伤害是别人带来的，开心是自己寻找的，想哭就哭，哭完了接着笑，没有人能把谁的幸福没收。
因为要做一个使用 js 代码来调用电脑摄像头，并进行一次拍照的功能，就花费了点时间研究了一下 WEB API的媒体输入接口，并写了点调试代码，大家可以参考一下。
WEB API 的 MediaDevices 接口，可以提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等，他可以使你取得任何硬件资源的媒体数据。不过下面只针对获取摄像头的信息在谷歌浏览器的最新(87.0)版本上进行测试，其它品牌的浏览器没有测试！
测试注意：
1、只在 chrome 87.0 版本上测试过
2、测试时，浏览器会询问是否开启摄像头，必须允许后才能使用（个别情况下浏览器会屏蔽摄像头）
3、如果使用在线测试，网址必须为 HTTPS 协议，否则浏览器会屏蔽摄像头
4、本地测试时，虽然浏览器询问是否开启摄像头，但没有调用成功，不知道怎么回事
更多的功能可以参考下面两个链接的内容：
https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
js调用打开摄像头的测试代码：
先上测试效果图：
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<title>JS调用摄像头的示例-</title>
</head>
<body>
<video src=""></video>
<canvas id="canvas"></canvas>
<button>拍照</button>
<img src="">
<script type="text/javascript">
var video = document.querySelector('video');
navigator.mediaDevices.getUserMedia({
audio: true,
video: { width: 200, height: 150 }
})
.then(function (stream) {
try {
video.src = window.URL.createObjectURL(stream);
} catch (e) {
video.srcObject = stream;
video.onloadedmetadata = function(e){
video.play();
}
}
})
.catch(function (err) {
console.log(err); //如果无法调用摄像头，这里会提示错误
});
$('button').on('click',function(){
var canvas = document.getElementById('canvas');
canvas.getContext('2d').drawImage(video,0,0,200,150); // canvas 拍照
var image = new Image(); //必须使用 Image ，不然 canvas 的 toDataURL 方法会报错，可不是闲着蛋疼
image.src = canvas.toDataURL("image/png"); //base64 类型的图片
$('img').attr('src', image.src);
})
</script>
</body>
</html> 本文javascript调用摄像头以及拍照的方法到此结束。欲望得不到满足痛苦；欲望一旦满足就无聊，生命就是在痛苦和无聊之间摇摆。小编再次感谢大家对我们的支持！
