欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js调用网络摄像头

程序员文章站 2022-04-29 20:33:55
不支持IE浏览器(需要使用flash插件), 支持移动端, 未经过完全测试 PC端使用的时候, HTML页面需要预留video标签, canvas标签 移动端使用的时候, HTML页面需要预留file标签, canvas标签, img标签 ......

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