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);
上一篇: 详解Vue中的虚拟DOM