Cannot set property ‘srcObject’ of null in Vue.Js

I am using vue.js with element-ui library and I have this problem where I need to show this dialog component to be able to show the camera and the user’s audio but I have the following error in console

TypeError: Cannot set property ‘srcObject’ of undefined”

As you can see, first I am calling the mounted instance where it collects the video and audio information of the user and in the show dialog function I am recovering the data.

Here is the code:

    <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

You need to use Arrow functions as callback for your $nextTick, otherwise the this variable inside the callback will not be the component object

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

Advertisement

Answer