IE browser does not support (requires flash plug-in), supports mobile, has not been fully tested
When using the PC side, the HTML page needs to reserve video tags and canvas tags.
When using the mobile terminal, the HTML page needs to reserve file tags, canvas tags, and img tags.
(function (window, document) { = { init: function (options) { /** * options attribute example * videoID: video control ID * canvasID: canvas control ID * fileID: The ID of the input control whose type is file * imageID: The ID of the img control * videoEnable: Whether to enable the camera * audioEnable: Whether to enable microphone * videoWidth: Video width * videoHeight: Video Height * photoWidth: photo width * photoHeight: photo height */ _options = options; if (isMobileTerminal()) { initMobileTerminal(); } else { initComputerTerminal(); } }, photo: function () { if (isMobileTerminal()) { photoMobileTerminal(); } else { photoComputerTerminal(); } } }; let _options = null; function initComputerTerminal() { let videoDom = (_options.videoID); if (!videoDom) { alert('Video control is invalid'); return; } let canvasDom = (_options.canvasID); if (!canvasDom) { alert('Canvas control is invalid'); return; } ('width', _options.photoWidth + 'px'); ('height', _options.photoHeight + 'px'); let parameters = { video: _options.videoEnable ? { width: _options.videoWidth, height: _options.videoHeight } : false, audio: _options.audioEnable }; (parameters) .then(function (MediaStream) { = MediaStream; (); }).catch(function (reason) { (reason); alert(reason); }); } function photoComputerTerminal() { let videoDom = (_options.videoID); if (!videoDom) { alert('Video control is invalid'); return; } let canvasDom = (_options.canvasID); if (!canvasDom) { alert('Canvas control is invalid'); return; } let context = ('2d'); (videoDom, 0, 0, _options.photoWidth, _options.photoHeight); } function initMobileTerminal() { let fileDom = (_options.fileID); if (!fileDom) { alert('File control is invalid'); return; } ('accept', 'image/*'); ('capture', 'camera'); let canvasDom = (_options.canvasID); if (!canvasDom) { alert('Canvas control is invalid'); return; } ('width', _options.photoWidth + 'px'); ('height', _options.photoHeight + 'px'); let imageDom = (_options.imageID); if (!imageDom) { alert('Image control is invalid'); return; } ('change', function () { let file = [0]; let reader = new FileReader(); = function () { ('src', ); setTimeout(function () { let context = ("2d"); (imageDom, 0, 0, _options.photoWidth, _options.photoHeight); }, 300); }; (file); }); } function photoMobileTerminal() { let fileDom = (_options.fileID); (); } function isMobileTerminal() { if (/AppleWebKit.*Mobile/() || /Mobile/.test() || /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test()) return /Android|webOS|iPhone|iPod|BlackBerry/(); return false; } })(window, document);
The above is the detailed content of the method of calling webcam by js. For more information about calling webcam by js, please follow my other related articles!