navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先，如果有getUserMedia的话，就获得它
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
// 否则，为老的navigator.getUserMedia方法包裹一个Promise
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
const constraints = {
video: true,
audio: false
};
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(stream => {
let v = document.getElementById('v');
// 旧的浏览器可能没有srcObject
if ("srcObject" in v) {
v.srcObject = stream;
} else {
// 防止再新的浏览器里使用它，应为它已经不再支持了
v.src = window.URL.createObjectURL(stream);
}
v.onloadedmetadata = function (e) {
v.play();
};
}).catch(err => {
console.error(err.name + ": " + err.message);
})
})();
</script>
</body>
</html>
拍照
思路是设置一个标志变量 videoPlaying 看看是否 video 有在 play，监听拍照按钮的点击事件，如果videoPlaying 为 true ，使用一个canvas 获取 video 的宽高（默认 canvas 是不显示的），然后使用 canvas 的drawImage,然后使用 canvas 的 toDataURL返回一个 data url，将这个 url，设置在一个 img 标签上即可😀
第一种方法
navigator.getUserMedia实现代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拍照1</title>
</head>
<body>
<button id="take">拍照</button>
<br />
<video id="v" style="width: 640px;height: 480px;"></video>
<canvas id="canvas" style="display:none;"></canvas>
<br />
<img src="http://placehold.it/640&text=Your%20image%20here%20..." id="photo" alt="photo">
<script>
!(function () {
function userMedia() {
return navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia || null;
}
if (userMedia()) {
let videoPlaying = false;
let constraints = {
video: true,
audio: false
};
