一定是在https环境下
<template>
<view class="container">
<video :src="videoSrc" autoplay ref="video" :controls="false" objectFit="fill"></video>
<img :src="imgUrl" alt="" />
<button @click="canvas1">拍照</button>
</view>
</template>
<script>
export default {
data() {
return {
videoSrc: '',
video: '',
imgUrl: ''
};
},
mounted() {
this.video = document.querySelector('video')
console.log(this.video, "viede");
this.connectCamera();
},
methods: {
connectCamera(groupId) {
navigator.mediaDevices.getUserMedia({
video: true
})
.then((stream) => {
this.video.srcObject = stream;
this.video.onloadedmetadata = (e) => {
this.video.play();
setTimeout(() => {
this.canvas1()
}, 5000)
};
})
.then((devices) => {
console.log(devices);
})
.catch((err) => {
console.error('获取设备失败:', err);
});
},
connectCamera2(groupId) {
console.log(groupId, "groupid");
navigator.mediaDevices
.getUserMedia({
video: {
groupId,
width: 800,
height: 600
},
})
.then((stream) => {
console.log(stream, 'stream');
this.video.srcObject = stream;
this.video.onloadedmetadata = (e) => {
this.video.play();
setTimeout(() => {
this.canvas1()
}, 5000)
};
})
.catch(console.log);
},
canvas1() {
let video = document.getElementsByTagName("video")[0]
let canvas = document.createElement("canvas")
let w = video?.clientWidth
let h = video?.clientHeight
canvas.width = w
canvas.height = h
const ctx = canvas.getContext("2d")
ctx?.drawImage(video, 0, 0, w, h)
let imgUrl = canvas.toDataURL("image/png")
this.imgUrl = imgUrl
}
}
};
</script>