<!DOCTYPE html>
<html lang="en">
<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">
<title>获取视频</title>
<style>
#video{
/*镜子模式*/
transform: rotateY(-180deg);
}
</style>
</head>
<body>
<video id="video" width="500" height="500" autoplay></video>
<button id="snap">截图</button>
<canvas id="canvas" width="640" height="480"></canvas>
<h2>拍照模式</h2>
</body>
<script>
var video = document.getElementById('video');
var aCanvas = document.getElementById('canvas');
var ctx = aCanvas.getContext('2d');
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then(stream => {
// 这里就要用到srcObject属性了，可以直接播放流资源
video.srcObject = stream
}).catch(err => {
console.log(err) // 错误回调
})
document.getElementById("snap").addEventListener("click", function() {
ctx.drawImage(video, 0, 0, 640, 480); //将获取视频绘制在画布上
});
</script>
说明：因为高版本chrome的安全限制问题，新版google浏览器http是不能打开的，192等本地ip也不行，https、localhost可行。