File: js/page.js

Recommend this page to a friend!
  Classes of Andras Toth  >  Expert JS Camera Capture  >  js/page.js  >  Download  
File: js/page.js
Role: Unit test script
Content type: text/plain
Description: Unit test script
Class: Expert JS Camera Capture
Capture video and audio and save to files
Author: By
Last change: V 2.0.0

-add Jquery version
-some minor bug fixed
Date: 2 months ago
Size: 11,544 bytes
 

Contents

Class file image Download
/*!
 * ExpertCamJS 2.0.0 javascript video-camera handler
 * Author: Tóth András
 * Web: http://atandrastoth.co.uk
 * email: atandrastoth@gmail.com
 * Licensed under the MIT license
 */
(function(undefined) {
    'use strict';
    function Q(el) {
        if (typeof el === 'string') {
            var els = document.querySelectorAll(el);
            return typeof els === 'undefined' ? undefined : els.length > 1 ? els : els[0];
        }
        return el;
    }
    var txt = 'innerText' in HTMLElement.prototype ? 'innerText' : 'textContent';
    var play = Q('#play'),
        localVideo = Q('#local-video'),
        videoSelect = Q('#video-select'),
        audioSelect = Q('#audio-select'),
        shootImg = Q('#shoot-img'),
        shoot = Q('#shoot'),
        pause = Q('#pause'),
        record = Q('#record'),
        streaming = Q('#streaming'),
        streamVideo = Q('#stream-video'),
        streamText = Q('#result .caption h3')[1];
    streamVideo.onended = function(e) {
        this.removeAttribute('src');
    };
    var isWebpSupport = !!navigator.webkitGetUserMedia || (navigator.mediaDevices && navigator.userAgent.indexOf('Edge') !== -1);
    var camera;
    var args = {
        getDevicesError: function(error) {
            var p, message = 'Error detected with the following parameters:\n';
            for (p in error) {
                message += p + ': ' + error[p] + '\n';
            }
            alert(message);
        },
        getUserMediaError: function(error) {
            var p, message = 'Error detected with the following parameters:\n';
            for (p in error) {
                message += p + ': ' + error[p] + '\n';
            }
            alert(message);
        },
        cameraError: function(error) {
            var p, message = "Error detected with the following parameters:\n";
            if (error.name == "NotSupportedError" || (error.name == "PermissionDeniedError" && error.message == "Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).")) {
                var ans = confirm("Your browser does not support getUserMedia via HTTP!\n(see: https://goo.gl/Y0ZkNV).\n You want to see github demo page in a new window?");
                if (ans) {
                    window.open("https://andrastoth.github.io/expertcamjs/");
                }
            } else {
                for (p in error) {
                    message += p + ": " + error[p] + "\n";
                }
                alert(message);
            }
        },
        cameraSuccess: function() {
            toggleClass([streaming, record], 'disabled', false);
        }
    };
    Page.On = function() {
        if (!camera) {
            camera = new ExpertCamJS('#camera-canvas').init(args).buildSelectMenu('#video-select', '#audio-select');
        } else {
            camera.stop();
            streamVideo.streamSrc();
        }
        toggleClass([record, shoot, pause], 'disabled', true);
        toggleClass([localVideo, play], 'disabled', false);
        audioSelect.disabled = false;
        videoSelect.disabled = false;
    };
    Page.Play = function() {
        if (videoSelect.selectedIndex !== 0 || audioSelect.selectedIndex !== 0) {
            camera.play();
            toggleClass([shoot, pause, streaming], 'disabled', false);
            audioSelect.disabled = true;
            videoSelect.disabled = true;
        }
    };
    Page.Streaming = function() {
        streamText[txt] = 'Captured stream';
        streamVideo.controls = false;
        streamVideo.muted = true;
        if (camera && camera.getStream()) {
            streamVideo.streamSrc(camera.getStream());
        } else {
            streamVideo.streamSrc();
        }
    };
    Page.Stop = function() {
        if (camera.isInitialized()) {
            camera.pause();
        }
    };
    Page.Shoot = function() {
        if (camera) {
            var src = camera.getLastImageSrc();
            shootImg.setAttribute('src', src);
        }
    };
    Page.LocalVideo = function() {
        if (camera) {
            toggleClass([record, streaming, play, pause], 'disabled', true);
            toggleClass([shoot], 'disabled', false);
            camera.playLocalVideo();
        }
    };
    Page.FullScreen = function() {
        if (camera) {
            camera.toggleFullScreen();
        }
    };
    Page.StartRecord = function() {
        streamVideo.removeAttribute('src');
        var stream = camera.getStream();
        if (stream) {
            toggleClass([record], 'disabled', true);
            var filename = (new Date().getTime().toString());
            var multiStreamRecorder;
            var hasAudio = Boolean(stream.getAudioTracks().length);
            var hasVideo = Boolean(stream.getVideoTracks().length);
            if (hasAudio && hasVideo && !isWebpSupport) {
                multiStreamRecorder = new MediaStreamRecorder(stream);
                multiStreamRecorder.mimeType = 'video/webm';
                multiStreamRecorder.width = camera.options.width;
                multiStreamRecorder.height = camera.options.height;
            } else if (hasAudio && hasVideo && isWebpSupport) {
                multiStreamRecorder = new MultiStreamRecorder(stream);
                multiStreamRecorder.video = camera.getVideo();
                multiStreamRecorder.width = camera.options.width;
                multiStreamRecorder.height = camera.options.height;
                multiStreamRecorder.audioChannels = 1;
            } else if (hasAudio && !hasVideo) {
                multiStreamRecorder = new MediaStreamRecorder(stream);
                multiStreamRecorder.mimeType = 'audio/ogg';
                multiStreamRecorder.audioChannels = 1;
            } else if (!hasAudio && hasVideo) {
                multiStreamRecorder = new MediaStreamRecorder(stream);
                multiStreamRecorder.mimeType = 'video/webm';
                multiStreamRecorder.width = camera.options.width;
                multiStreamRecorder.height = camera.options.height;
            }
            multiStreamRecorder.ondataavailable = function(blob) {
                /*Without upload*/
                var url = window.URL || window.webkitURL;
                if (isWebpSupport && hasAudio && hasVideo) {
                    window.open(url.createObjectURL(blob.video));
                    window.open(url.createObjectURL(blob.audio));
                } else {
                    window.open(url.createObjectURL(blob));
                }
                /*With upload*/
                /*
                streamVideo.src = 'media/loading.webm';
                streamText[txt] = 'Processing video';
                streamVideo.controls = false;
                streamVideo.loop = true;
                var data = new FormData();
                if (isWebpSupport && hasAudio && hasVideo) {
                    data.append('audio-filename', filename + '.ogg');
                    data.append('audio-blob', blob.audio);
                    data.append('video-filename', filename + '.webm');
                    data.append('video-blob', blob.video);
                } else if (hasVideo) {
                    data.append('video-filename', filename + '.webm');
                    data.append('video-blob', blob);
                } else {
                    data.append('audio-filename', filename + '.ogg');
                    data.append('audio-blob', blob);
                }
                xhr('save.php', data, function(fileURL) {
                    if (validURL(fileURL)) {
                        streamVideo.src = fileURL;
                        streamText[txt] = 'Recorded stream';
                        streamVideo.controls = true;
                        streamVideo.loop = false;
                        streamVideo.muted = false;
                    } else {
                        alert(fileURL);
                    }
                });
                */
            };
            setTimeout(function() {
                multiStreamRecorder.stop();
            }, 5E3);
            multiStreamRecorder.start(5E3);
            countDown(5E3);
        }
    };
    Page.changeBlurCSS = function(el) {
        camera.cssFilter('blur', el.value.toString() + 'px');
        document.querySelector('#blur-value')[txt] = 'Blur: ' + el.value.toString() + 'px';
    };
    Page.changeBrightnessCSS = function(el) {
        camera.cssFilter('brightness', el.value);
        document.querySelector('#brightness-value')[txt] = 'Brightness: ' + el.value.toString();
    };
    Page.changeGrayscaleCSS = function(el) {
        camera.cssFilter('grayscale', el.value);
        document.querySelector('#grayscale-value')[txt] = 'Grayscale: ' + el.value.toString();
    };
    Page.changeContrastCSS = function(el) {
        camera.cssFilter('contrast', el.value);
        document.querySelector('#contrast-value')[txt] = 'Contrast: ' + el.value.toString();
    };
    Page.changeInvertCSS = function(el) {
        camera.cssFilter('invert', el.value);
        document.querySelector('#invert-value')[txt] = 'Invert: ' + el.value.toString();
    };
    Page.changeSepiaCSS = function(el) {
        camera.cssFilter('sepia', el.value);
        document.querySelector('#sepia-value')[txt] = 'Sepia: ' + el.value.toString();
    };
    Page.changeHueCSS = function(el) {
        camera.cssFilter('hue-rotate', el.value.toString() + 'deg');
        document.querySelector('#hue-value')[txt] = 'Hue: ' + el.value.toString() + 'deg';
    };
    Page.changeSaturateCSS = function(el) {
        camera.cssFilter('saturate', el.value);
        document.querySelector('#saturate-value')[txt] = 'Saturate: ' + el.value;
    };

    function countDown(time) {
        var t = time;
        toggleClass([record], 'btn-danger', true);
        record.innerHTML = '<span>&nbsp;' + t / 1E3 + '&nbsp;</span>';
        var count = setInterval(function() {
            t -= 1E3;
            record.innerHTML = '<span>&nbsp;' + t / 1E3 + '&nbsp;</span>';
            if (t === 0) {
                window.scrollTo(0, offset(streamVideo).top - 100);
                clearInterval(count);
                toggleClass([record], 'disabled', false);
                record.innerHTML = '<span class="glyphicon glyphicon-record""></span>';
                toggleClass([record], 'btn-danger', false);
            }
        }, 1E3);
    }

    function offset(el) {
        var rect = el.getBoundingClientRect(),
            scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
            scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        return {
            top: rect.top + scrollTop,
            left: rect.left + scrollLeft
        };
    }

    function xhr(url, data, callback) {
        var request = new XMLHttpRequest();
        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                callback(request.responseText);
            }
        };
        request.open('POST', url);
        request.send(data);
    }

    function validURL(str) {
        return /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/.test(str);
    }

    function toggleClass(el, cl, bol) {
        el.forEach(function(element, index) {
            var list = element.classList;
            if (eval(bol)) {
                list.add(cl);
            } else {
                list.remove(cl);
            }
        });
    }
}).call(window.Page = window.Page || {});