浏览器兼容性尚可
desktop | mobile | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android | |
| 53 footnote Toggle history | 12 Toggle history | 36 footnote Toggle history | 40 footnote Toggle history | 11 Toggle history | 53 footnote Toggle history | 36 footnote Toggle history | 41 footnote Toggle history | 11 Toggle history | 6.0 Toggle history | 53 Toggle history |
Secure context required | 53 Toggle history | 79 Toggle history | 68 Toggle history | 40 Toggle history | 11 Toggle history | 53 Toggle history | 68 Toggle history | 41 Toggle history | 11 Toggle history | 6.0 Toggle history | 53 Toggle history |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
video,canvas{
width: 500px;
height: 281px;
}
</style>
</head>
<body>
<video id="video" width="1280" height="720" autoplay></video>
<button id="takePhotos" onclick="takePhotos()">拍照</button>
<canvas id="canvas" width="1280" height="720"></canvas>
</body>
<script type="text/javascript">
var aVideo = document.getElementById('video');
var aCanvas = document.getElementById('canvas');
var ctx = aCanvas.getContext('2d');
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia; //获取媒体对象(摄像头)
navigator.getUserMedia({
video: {
width: { ideal: 1280 },//分辨率宽
height: { ideal: 720 },//分辨率高
frameRate: { ideal: 30, max: 30 },//帧率
},
audio: true
}, function(stream) {
video.srcObject = stream;
console.log(video.srcObject);
video.onerror = function() {
stream.stop();
};
stream.onended = noStream;
video.onloadedmetadata = function() {
console.log('摄像头成功打开!',);
};
}, noStream);
function noStream(err) {
console.log('摄像头打开失败!',);
console.error(err);
}
function takePhotos(){
ctx.drawImage(aVideo, 0, 0, 1280, 720); //将获取视频绘制在画布上
}
</script>
</html>