<template>
<div>
<div class="video-list">
<div class="video-container" v-for="(item, index) in cameraList" :key="index">
<div class="videoBoxError" v-if="!isCamera">
<img src="@/assets/images/exam/icon_sxtyc.png" >
<p>摄像头调用异常，请按说明调试设备</p>
</div>
<video :id="'video' + index" v-if="isCamera"></video>
</div>
</div>
<div v-if="showBtn">
<el-button style="margin-bottom: 10px;" v-for="(item, index) in cameraList" :key="index">{{'摄像头'+(index+1)}}</el-button>
</div>
<canvas id="canvas" style="display: none;width:250px;height:250px"></canvas>
</div>
</template>
<script>
export default {
name: 'videoSetting',
props: {
value: {
type: Number,
default: () => 99999
},
width: {
type: Number,
default: () => 0
},
height: {
type: Number,
default: () => 0
},
showBtn: {
type: Boolean,
default: () => true
}
},
data() {
return {
cameraList: [],
isCamera: false
}
},
watch: {
value: {
handler() {
this.getDevices().then(() => {
this.main()
})
}
}
},
created() {
this.getDevices().then(() => {
this.main()
})
},
beforeDestroy() {
//this.close();
},
methods: {
main () {
this.cameraList.forEach((camera, index) => {
let domId = `video${index}`;
let video = document.getElementById(domId)
this.enableCamera(camera.id, video)
})
},
enableCamera (deviceId, video) {
this.getUserMedia(this.setConstraints(deviceId), (stream) => {
video.srcObject = stream;
video.onloadedmetadata = (e) => {
video.play();
this.isCamera = true;
}
}, error => {
this.isCamera = false;
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`)
})
},
getDevices () {
return new Promise((resolve, reject) => {
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
this.isCamera = false;
window.alert("不支持 mediaDevices.enumerateDevices()")
}
navigator.mediaDevices.enumerateDevices().then(devices => {
console.log(devices)
this.isCamera = true;
this.cameraList = []
devices.forEach((device, index) => {
if (device.kind && device.kind === 'videoinput') {
if(this.cameraList.length < this.value){
this.cameraList.push({
id: device.deviceId,
label: device.label
})
}
}
})
resolve()
}).catch((err) => {
this.isCamera = false;
console.log(err.name + ": " + err.message)
reject()
})
})
},
getUserMedia (constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error)
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints, success, error)
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error)
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error)
}
},
/** @desc 摄像头配置项通用配置 */
setConstraints (deviceId) {
return {
audio: false,
video: {
width: this.width,
height: this.height,
deviceId: deviceId
}
}
},
takePhoto () {
//let videoId = `video${idx}`;
let videoId = 'video0';
let videoDom = document.getElementById(videoId);
// 使用canvas进行拍照
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.drawImage(videoDom, 0,0,250, 250);
return canvas.toDataURL("image/png");
},
close: function () {
this.cameraList.forEach((camera, index) => {
let domId = `video${index}`;
let video = document.getElementById(domId);
//关闭摄像头
video.srcObject.getTracks()[0].stop();
})
console.log("摄像头已关闭")
},
closeRouter: function () {
return new Promise((resolve, reject) => {
if(this.isCamera){
this.cameraList.forEach((camera, index) => {
let domId = `video${index}`;
let video = document.getElementById(domId);
//关闭摄像头
video.srcObject.getTracks()[0].stop();
})
console.log("摄像头已关闭");
resolve();
}else{
resolve();
}
})
}
}
}
</script>
<style scoped>
.videoBoxError{
width: 600px;
height: 350px;
background: #3f4043;
margin-left: 30px;
margin-bottom: 10px;
}
.videoBoxError img{
width: 60px;
margin-top: 90px;
}
.videoBoxError p{
color: #5f6063;
font-size: 16px;
margin-top: 15px;
}
</style>
