For a sample application I am developing, I need to incorporate two video elements and a "Call" button. The first video element (#localVideo) will display the local media stream output. Upon clicking the call button, the remote video element should play the remote media stream. Initially, I created this application in raw JavaScript, where everything was functioning correctly.
In VueJS, I am working on a WebRTC component to access user media and assign the stream to the local video element. When users click the call button, I create two RTCPeerConnection objects, send offers, set local descriptions, send answers, and so on.
Here is the template code for the component -
<template>
<div class="webRTC">
<video id = "localVideo" playsinline autoplay muted></video>
<button id = "call" v-on:click='call'> Call </button>
<video id = "remoteVideo" playsinline autoplay controls></video>
</div>
</template>
<script src="./webRTC.js"></script>
And here is the script section of the component -
export default {
name: 'webRTC',
sockets: {
connect: function () {
console.log('Socket IO connected!')
},
TestConnection: function () {
console.log('Test connection successful!')
}
},
data: function () {
return {
localStream: null,
remoteStream: null,
pc1: null,
pc2: null
}
},
methods: {
// Methods included here...
},
created: function () {
console.log('webRTC is created!')
let prom = navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(this.gotDevices).catch(this.handleMediaError)
}
}
The issue I'm encountering is that upon clicking the Call button, the remote video does not display anything. Instead, there's just a loading circle shown. There are no errors displayed in the console either.
I have checked the srcObject of both the local and remote videos, and they seem to be the same -
https://i.sstatic.net/Cgxlj.png.
Can someone please guide me on what might be wrong? Additionally, is there another way to debug this?
Note:
You can download the project/source code from here: https://drive.google.com/open?id=1e7C0ojZ0jT7EXFNtCKcWpJBpKd_mWi_s