Utilizing vue.js in combination with the element-ui library, I am facing a challenge where I need to display a dialog component for accessing the camera and user's audio. However, an error is being thrown in the console:
TypeError: Cannot set property 'srcObject' of undefined"
The process begins by calling the mounted instance to capture video and audio data from the user, and then, in the show dialog function, I retrieve this data.
Below is the code snippet:
<template>
<div class="main-background">
<el-main>
<el-row class="opt" style="top: 11%">
<el-col :push="16" :span="2">
<el-button v-show="false" @click="quickMeeting" :style="shadow" type="primary">
<i class="el-icon-video-camera"></i> Quick Meeting
</el-button>
</el-col>
</el-row>
<el-dialog id="video-dialog" :visible.sync="dialogVisible" style="padding: 0;margin:0">
<div id="dialog-video" style="backgroud-color: #fff;width:100%;height:100%;" v-show="turnonVideoCamera">
<video autoplay ref="videoBackup" style="position: relative;width:100%;height:100%;"></video>
</div>
</el-dialog>
</el-main>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
roomNumber: '',
dialogVisible: false,
localStream: null,
videoDevice: null,
}
},
methods: {
async _initMethod(){
console.log("xd")
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter(device => device.kind === 'videoinput');
this.videoDevice = videoDevices.length >0?videoDevices[0]:null;
this.localStream = await navigator.mediaDevices.getUserMedia({
video: this.videoConf,
audio: true,
});
},
quickMeeting() {
this.showDialog();
},
jump(){
sessionStorage.setItem('joinName', this.joinName);
sessionStorage.setItem('turnonVideoCamera', this.turnonVideoCamera);
sessionStorage.setItem('turnonMicrophone', this.turnonMicrophone);
this.$router.push('/meeting/'+ this.roomNumber);
},
showDialog(){
this.dialogVisible = true;
this.$nextTick(function() {
console.log("xd")
this.$refs.videoBackup.srcObject = this.localStream;
})
},
},
mounted(){
this._initMethod();
console.log("xd")
},
computed:{
videoConf: function(){
return {
deviceId: this.videoDevice.deviceId,
width: 1920,
height: 603
};
}
}
}
</script>