首页截图
image.png
获取音视频
image.png
关键Code
获取摄像头数据
/**
* 获取流数据
*/
openUserMeida() {
var that = this
// 判断是否支持获取媒体数据
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
that.$notify({
title: '警告',
message: '浏览器不支持获取媒体设备',
type: 'warning'
});
return;
}
let constraints = {video: true, audio: true}
this.loading = true
this.getLocalUserMedia(constraints).then(stream => {
// 拿到流数据后，将流显示在video
this.setDomVideoStream('localVideo', stream);
});
},
/**
* 获取音视频流
* @param constraints
* @returns {Promise<MediaStream>}
*/
async getLocalUserMedia(constraints) {
return await navigator.mediaDevices.getUserMedia(constraints).catch(this.handleError)
},
/**
* 异常处理
* @param error
*/
handleError(error) {
this.loading = false;
this.$notify({
title: '警告',
message: '无法获取媒体设备，请检查是否占用或缺失',
type: 'warning'
});
console.error('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
},
关闭摄像头
/**
* 关闭
* @param domId
*/
closeUserMedia(domId) {
let video = document.getElementById(domId)
// 获取video流数据
let stream = video.srcObject
// 判断流数据是否存在 ，存在则关闭所有轨道数据
if (stream) {
stream.getTracks().forEach(e => {
e.stop();
})
}
video.srcObject = null
}
期待更新，麻烦点个赞，点个关注，栓Q !
