js调用网络摄像头

2019-08-14 09:55:24来源：博客园阅读 ()

不支持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);