Unable to see video in HTML although seems WebRTC is properly connected.

[murtaza-20]

Hi,

I have connected Javascript SDK in my VueJS application. I published a stream from the Ant Media Server login. Then in my script I configured the WebRTCAdaptor object.

Following is my configuration:

const webRTCAdaptor = new WebRTCAdaptor({
      websocket_url: "wss://[my server.tld]:5443/WebRTCAppEE/websocket",
      mediaConstraints: {
        video: true,
        audio: true,
      },
      peerconnection_config: {
        'iceServers': [{'urls': 'stun:stun1.1.google.com:19302'}]
      },
      sdp_constraints: {
        OfferToReceiveAudio: false,
        OfferToReceiveVideo: false
      },
      localVideoId: "video_player",
      bandwidth: 900,
      dataChannelEnabled: false,
      callback: (info, obj) => {
        if (info === "initialized") {
          //webRTCAdaptor.play(streamId)
        }
      },
      callbackError: (error, message) => {
        //console.log(error, message)
      },
      isPlayMode: true,
      debug: true,
})

Then in the script, for playing the stream I did webRTCAdaptor.play(streamId);.

My issue is that it seems that the webrtc connection is happening properly but in my HTML I am not able to view the streaming video. Following is the web console messages that I receive when I click on the play button.

stream id in init peer connection: streamId_jGRTsCJUd close stream id: streamId_jGRTsCJUd
webrtc_adaptor.js:499 onTrack
webrtc_adaptor.js:504 Received remote stream
webrtc_adaptor.js:499 onTrack
webrtc_adaptor.js:884 try to create answer for stream id: streamId_jGRTsCJUd
3webrtc_adaptor.js:976 Candidate is added for stream streamId_jGRTsCJUd
webrtc_adaptor.js:889 created answer for stream id: streamId_jGRTsCJUd
webrtc_adaptor.js:559 sending ice candiate for stream Id streamId_jGRTsCJUd
webrtc_adaptor.js:560 {"candidate":"candidate:1467169716 1 udp 2113937151 9af88ea2-422e-4f8d-9d89-281deaadfc30.local 53232 typ host generation 0 ufrag zyj3 network-cost 999","sdpMid":"0","sdpMLineIndex":0,"usernameFragment":"zyj3"}
webrtc_adaptor.js:572 No event.candidate in the iceCandidate event

Also in my Ant media server management console I can see one viewer in the WebRTC.

I have tried a lot but I am not able to find the solution to this issue. Can anyone please help me out what I am missing over here?

[mekya]

Hi @murtaza-20,
Thank you very much for asking this question.

I think the remoteVideoId is missing in the configuration.

Could you please take a look at the very basic player sample?
https://github.com/ant-media/StreamApp/blob/master/src/main/webapp/player.html#L305

If it does not work, please let us know.

Cheers

[murtaza-20]

Hi @mekya ,

I did try but nothing is happening. Same issue. Even I tried this solution earlier.

[USAMAWIZARD]

Hi @murtaza-20 ,
did you create a video element with name remoteVideo in html ?

and passed the remoteVideoId : "remoteVideo",
in the WebRTCAdaptor configuration

[murtaza-20]

https://github.com/murtaza-20/kingsports-admin.git

[murtaza-20]

You can find the WebRTC code in this file src/views/Events/Index.vue

[USAMAWIZARD]

Thanks I will check

[USAMAWIZARD]

@murtaza-20 I am not much familiar with the Vue.js But what I understand Is the WebrtcAdapter is getting initialized before the video elements are added to the dom. That is causing the problem. Can you try to render the video element first to dom and then initialize the adapter

[murtaza-20]

Ok thanks I will check and let you know.

[USAMAWIZARD]

@murtaza-20 did you get a chance to check it ?

[murtaza-20]

Hi @USAMAWIZARD
I was able to fix the issue. As suggested by you, my script was getting executed before the video component getting loaded on the DOM.
Thanks for the help.

[USAMAWIZARD]

you're Welcome @murtaza-20