safari直接无法支持
firedox支持良好
chrome支持良好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web调取摄像头</title>
</head>
<body>
<video src=""></video>
<script>
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function(constraints) {
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
var mediaOpts = {
audio: false,
video: true,
}
function successFunc(stream) {
var video = document.querySelector('video');
if ("srcObject" in video) {
video.srcObject = stream
} else {
video.src = window.URL && window.URL.createObjectURL(stream) || stream
}
video.play();
}
function errorFunc(err) {
alert(err.name);
}
navigator.getUserMedia(mediaOpts, successFunc, errorFunc);
</script>
</body>
</html>
参考链接
https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
网友评论