版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
废话不多说，直接上代码！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
video{
width: 50%;
height: 50%;
margin: 50px auto;
background-color: aquamarine;
display: block;
}
</style>
</head>
<body>
<video id="video"></video>
<script>
var video = document.getElementById('video');
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices.getUserMedia({video : {width: 1000, height: 1000}}).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia({video : {width: 1000, height: 1000}},success, error)
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia({video : {width: 1000, height: 1000}}, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia({video : {width: 1000, height: 1000}}, success, error);
}
function success(stream) {
//兼容webkit核心浏览器
// let CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
console.log(stream);
//video.src = CompatibleURL.createObjectURL(stream);
video.srcObject = stream;
video.play();
}
function error(error) {
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
}
</script>
</body>
</html>
效果图：
