js調用網路攝像頭

不支持IE瀏覽器(需要使用flash插件), 支持移動端, 未經過完全測試

PC端使用的時候, HTML頁面需要預留video標簽, canvas標簽

移動端使用的時候, HTML頁面需要預留file標簽, canvas標簽, img標簽

(function (window, document) {
    window.camera = {
        init: function (options) {
            /**
             * options 屬性示例
             * videoID: video控制項ID
             * canvasID: canvas控制項ID
             * fileID: type為file的input控制項的ID
             * imageID: img控制項的ID
             * videoEnable: 是否啟用攝像頭
             * audioEnable: 是否啟用麥克風
             * videoWidth: 視頻寬度
             * videoHeight: 視頻高度
             * photoWidth: 拍照寬度
             * photoHeight: 拍照高度
             */

            _options = options;
            if (isMobileTerminal()) {
                initMobileTerminal();
            } else {
                initComputerTerminal();
            }
        },
        photo: function () {
            if (isMobileTerminal()) {
                photoMobileTerminal();
            } else {
                photoComputerTerminal();
            }
        }
    };

    let _options = null;

    function initComputerTerminal() {
        let videoDom = document.getElementById(_options.videoID);
        if (!videoDom) {
            alert('Video 控制項無效');
            return;
        }

        let canvasDom = document.getElementById(_options.canvasID);
        if (!canvasDom) {
            alert('Canvas 控制項無效');
            return;
        }
        canvasDom.setAttribute('width', _options.photoWidth + 'px');
        canvasDom.setAttribute('height', _options.photoHeight + 'px');

        let parameters = {
            video: _options.videoEnable ? {
                width: _options.videoWidth,
                height: _options.videoHeight
            } : false,
            audio: _options.audioEnable
        };

        navigator.mediaDevices.getUserMedia(parameters)
            .then(function (MediaStream) {
                video.srcObject = MediaStream;
                video.play();
            }).catch(function (reason) {
                console.log(reason);
                alert(reason);
            });
    }

    function photoComputerTerminal() {
        let videoDom = document.getElementById(_options.videoID);
        if (!videoDom) {
            alert('Video 控制項無效');
            return;
        }


        let canvasDom = document.getElementById(_options.canvasID);
        if (!canvasDom) {
            alert('Canvas 控制項無效');
            return;
        }

        let context = canvasDom.getContext('2d');
        context.drawImage(videoDom, 0, 0, _options.photoWidth, _options.photoHeight);
    }

    function initMobileTerminal() {
        let fileDom = document.getElementById(_options.fileID);
        if (!fileDom) {
            alert('File 控制項無效');
            return;
        }

        fileDom.setAttribute('accept', 'image/*');
        fileDom.setAttribute('capture', 'camera');

        let canvasDom = document.getElementById(_options.canvasID);
        if (!canvasDom) {
            alert('Canvas 控制項無效');
            return;
        }

        canvasDom.setAttribute('width', _options.photoWidth + 'px');
        canvasDom.setAttribute('height', _options.photoHeight + 'px');

        let imageDom = document.getElementById(_options.imageID);
        if (!imageDom) {
            alert('Image 控制項無效');
            return;
        }

        fileDom.addEventListener('change', function () {
            let file = fileDom.files[0];
            let reader = new FileReader();
            reader.onloadend = function () {
                imageDom.setAttribute('src', reader.result);

                setTimeout(function () {
                    let context = canvas.getContext("2d");
                    context.drawImage(imageDom, 0, 0, _options.photoWidth, _options.photoHeight);
                }, 300);
            };
            reader.readAsDataURL(file);
        });
    }

    function photoMobileTerminal() {
        let fileDom = document.getElementById(_options.fileID);
        fileDom.click();
    }

    function isMobileTerminal() {
        if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || /Mobile/.test(navigator.userAgent) || /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))
            return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
        return false;
    }
})(window, document);