前言
前些天，线上笔试的时候，发现需要浏览器同意开启摄像头，感觉像是 js 调用的，由于当时笔试，也就没想到这么多问题。今天闲来无事，看了下自己的 todo，发现有这个调用摄像头的todo，才想到😂。网上查了一下，果然 js 有调用摄像头的 api，为此自己写一个 demo ，避免忘记。
正文
调用摄像头
一共有两种实现方式，一种是使用
navigator.getUserMedia（该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性），前面一种已经从 Web 标准中删除，仅为了向后兼容而存在，第二种是使用
navigator.mediaDevices.getUserMedia(推荐使用),这两种方法 Safari 貌似都不支持。。。。第一种方法
navigator.getUserMedia用法详见mdn ，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摄像头调用1</title>
</head>
<body>
<video id="v"></video>
<script>
!(function () {
function userMedia() {
return navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia || null;
}
if (userMedia()) {
var constraints = {
video: true,
audio: false
};
var media = navigator.getUserMedia(constraints, function (stream) {
var v = document.getElementById('v');
var url = window.URL || window.webkitURL;
v.src = url ? url.createObjectURL(stream) : stream;
v.play();
}, function (error) {
console.log("ERROR");
console.log(error);
});
} else {
console.log("不支持");
}
})();
</script>
</body>
</html>
第二种方法
navigator.mediaDevices.getUserMedia用法详见mdn。
navigator.mediaDevices.getUserMedia 其实和第一种差不多，主要第二种返回是一个 Promise 对象，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摄像头调用2</title>
</head>
<body>
<video id="v"></video>
<script>
!(function () {
// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if (navigator.mediaDevices === undefined) {
