web浏览器获取摄像头并拍照

Nitfgg

于 2022-11-26 16:16:51 发布

阅读量1.5k

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/u011591179/article/details/128053290

版权

浏览器兼容性尚可

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android
`getUserMedia`	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>