前端调用摄像头
作者：互联网
<!DOCTYPE html>
<html>
<head>
<title>Photo</title>
<style>
video {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<button onclick="showCamera()">开启摄像头</button>
<div class="bg-content" style="display: none;">
<div class="show-photo">
<video id="video" width="600px" height="600px" autoplay="autoplay"></video>
<canvas id="canvas" width="600px" height="600px" style="display: none;"></canvas>
<a id="downloadA"></a>
</div>
<div class="take-photo">
<button type="button" onclick="takePhoto()">
拍照
</button>
</div>
<div class="close-photo">
<button type="button" onclick="closePhoto()">
关闭
</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
/**
* 开启摄像头
*/
let mediaStreamTrack = null; // 视频对象(全局)
function showCamera() {
$(".bg-content").css("display", "block");
let constraints = {
video: {
width: 600,
height: 600
},
audio: true
};
//获得video摄像头区域
let video = document.getElementById("video");
//这里介绍新的方法，返回一个 Promise对象
// 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
// then()是Promise对象里的方法
// then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
// 避免数据没有获取到
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function(MediaStream) {
mediaStreamTrack = typeof MediaStream.stop === 'function' ? MediaStream : MediaStream.getTracks()[1];
video.srcObject = MediaStream;
video.muted = true;
video.play();
});
}
/**
* 拍摄照片
*/
function takePhoto() {
let video = document.getElementById("video");
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
ctx.drawImage(video, 10, 10);
ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
let img = document.getElementById("canvas").toDataURL("image/png");
var triggerDownload = $("#downloadA").attr("href", img).attr("download", "micro-blog.png");
triggerDownload[0].click();
}
/**
* 关闭摄像头
*/
function closePhoto() {
mediaStreamTrack.stop();
$(".bg-content").css("display", "none");
}
</script>
</body>
</html>
报 Uncaught TypeError: Cannot read property ‘getUserMedia‘ of undefined 解决方法：
https://blog.csdn.net/weixin_44493841/article/details/108073810
标签：function,canvas,调用,前端,let,video,摄像头,MediaStream 来源： https://blog.csdn.net/jeason_1/article/details/120373066