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);