新建一个video标签,设置大小,ref命名
<video
ref="video"
autoplay
width="700"
height="500"
class="videoElement"
></video>
video获取摄像头内容
可以这么写,没有回调提示
查看代码
// video标签获取摄像头内容
this.$refs.video.srcObject = await navigator.mediaDevices.getUserMedia({
video: true,
audio: false,
});
也可以这么写,有回调+ 用户体验好
查看代码
await navigator.mediaDevices
.getUserMedia({
video: true,
audio: false,
})
.then((stream) => {
this.$refs.video.srcObject = stream;
console.log("摄像头开启成功");
})
.catch((error) => {
console.log("摄像头开启失败");
});
加个画布实现截图拍照
创建canvas标签,设置大小,ref命名
<canvas
ref="canvas"
width="400"
height="300"
class="canvansturn"
></canvas>
获取canvas对象
// 创建canvas对象
this.canvas = this.$refs.canvas;
this._context2d = this.canvas.getContext("2d");
调用canvas对象的获取内容功能 【就是 this.canvas.getContext("2d").drawImage() 】
this._context2d.drawImage(this.$refs.video, 0, 0, 400, 300);
调用后画布显示的内容就是video的内容
新建标签点击后下载canvas图片
<!-- 下载 -->
<a href="" download="canvas.jpeg" id="save_herf">
<img src="" id="save_img" alt="" />
</a>
js这么写
var img = document.createElement("img"); // 创建img元素
img.src = this.canvas.toDataURL("image/png"); // 截取画布内容
var svaeHref = document.getElementById("save_herf");
console.log(img.src);
var sd = document.getElementById("save_img");
svaeHref.href = img.src;
sd.src = img.src;
标签:src,canvas,调用,img,refs,video,摄像头,设备 From: https://www.cnblogs.com/Hello233/p/17245472.html