<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="视频" onclick="getMedia()">
<video src="" width="500px" id="video" height="500px" autoplay muted></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<button onclick="takePhone()" id='but'>拍照</button>
<script>
function getMedia(){
var constraints={
video:{width:500,height:500},
audio:true
};
//获取摄像头区域
var video=document.getElementById('video');
//该方法返回promise对象
//这个对象返回成功后得回调函数带一个mediaStream对象作为其参数
//then()是promise的方法，异步执行，当then（）前的所有方法执行完后再执行then（）内部的程序
//避免数据没有获取到
var promise=navigator.mediaDevices.getUserMedia(constraints);
promise.then(function(MediaStream){
video.srcObject=MediaStream;
video.play();
});
}
function takePhone(){
var video=document.getElementById('video');
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
ctx.drawImage(video,0,0,500,500);
}
</script>
</body>
</html>
我这里一直在报错
京公网安备 11011402011233号