无法在 Vue.Js 中设置 null 的属性'srcObject'

Question

我使用vue.js与element-ui库，我有这个问题，我需要显示这个对话框组件能够显示相机和用户的音频，但我有以下错误在控制台

TypeError: Cannot set property 'srcObject' of undefined">

正如你所看到的，首先我调用挂载的实例，它收集用户的视频和音频信息，并在显示对话框函数中恢复数据。

代码如下:

<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> Reunión rápida
</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>

Answer 1

您需要使用箭头函数作为您的$nextTick的回调，否则回调中的this变量将不会是组件对象

showDialog(){
this.dialogVisible = true;
this.$nextTick(() => { // arrow function
console.log("xd")
this.$refs.videoBackup.srcObject = this.localStream; 
})
},