HTML 代码
- <video id="video" width="640" height="480" autoplay></video>
- <button id="snap">Snap Photo</button>
- <canvas id="canvas" width="640" height="480"></canvas>
- 复制代码
JS 代码
- let aVideo=document.getElementById('video');
- let aCanvas=document.getElementById('canvas');
- let ctx=aCanvas.getContext('2d');
-
- navigator.getUserMedia = navigator.getUserMedia ||
- navigator.webkitGetUserMedia ||
- navigator.mozGetUserMedia ||
- navigator.msGetUserMedia;
- navigator.getUserMedia({video:true}, gotStream, noStream);
-
- function gotStream(stream) {
- video.src = URL.createObjectURL(stream);
- video.onerror = function () {
- stream.stop();
- };
- stream.onended = noStream;
- video.onloadedmetadata = function () {
- alert('摄像头成功打开!');
- };
- }
- function noStream(err) {
- alert(err);
- }
- document.getElementById("snap").addEventListener("click", function() {
-
- ctx.drawImage(aVideo, 0, 0, 640, 480);
- });
- 复制代码
解决edge无法调用摄像头
上面代码在 Chrome、Firefox上调用摄像头没有问题(IE日后再再说)但在Edge浏览器上无法调用。主要原因有两个。
一、在win10的隐私内没有打开Edge调用浏览器的权限,按下图操作即可。
二、USB热插拔摄像头无法调用
Windows系统不再允许USB网络摄像头使用MJPEG或者H.264编码流方式,只能允许使用YUY2解码。微软的初衷不错:使用MJPEG或者H.264编码过程中会导致重复编码流(效率低下),所以微软对这类输出方式进行了限制,而当网络摄像头尝试使用MJPEG或者H264格式编码的时候,摄像头就会卡死。 此时此刻你使用笔记本是可以调用摄像头的。
解决方案:在注册表 "\HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Windows Media Foundation\Platform\XVP" 下新建EnableFrameServerMode的键值,并设置为0,即可正常使用摄像头。