Track subscribed but not showing video sometimes on reload and restart video of remote participant

[mohsinijaz568]

• [x] I have verified that the issue occurs with the latest twilio-video.js release and is not marked as a known issue in the CHANGELOG.md.
• [x] I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• [ ] I verified that the Quickstart application works in my environment.
• [x] I am not sharing any Personally Identifiable Information (PII) or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

$(document).on('ready turbolinks:load', function() {
  page_load();
});
function page_load() {
  Video.connect(twilioToken, {
          name: twilioRoom,
          audio: false,
          video: true,
          statusCallback: twilioCallback,
          networkQuality: {
              local: 3,
          }
          }).then(room => {
          room.localParticipant.setNetworkQualityConfiguration({
              local: 3,
          });
          current_room = room;
          participant = room.localParticipant;
          room.localParticipant.videoTracks.forEach(track => {
            $('.sender-video').append(track.track.attach())
            $('#video-media-tracks video').attr('id', track.trackSid)
            currentStream = track
          })
  
          room.participants.forEach(participantConnected);
          room.on('participantConnected', participantConnected);
  
          room.on('participantDisconnected', participantDisconnected);
          room.once('disconnected', error => room.participants.forEach(participantDisconnected));
          room.on('disconnected', room => {
            room.localParticipant.tracks.forEach((publication) => {
              const track = publication.track;
              track.stop();
              const elements = track.detach();
              elements.forEach((element) => element.remove());
            });
          });
      }).catch(function (error) {
        console.error(error);
      }});
  function participantConnected(participant) {
        const div = document.createElement('div');
        div.id = participant.sid;
        div.classList.add('remote-video');
  
        participant.on('trackSubscribed', track => trackSubscribed(div, track));
        participant.on('trackUnsubscribed', trackUnsubscribed);
        participant.tracks.forEach(publication => {
            if (publication.isSubscribed) {
                trackSubscribed(div, publication.track);
            }
        });
         $('#video-media-tracks').append(div)
      }
      
    function trackSubscribed(div, track) { 
        div.appendChild(track.attach());            // this line causing issue only on chrome its attach the video element but video not 
                                                                      show of remote participant
     }
}

Expected behavior:

Remote Participant video should show

Actual behavior:

Remote video not shown

TODO

Software versions:

• [ ] Browser(s): Chrome Version 87.0.4280.88 (Official Build) (64-bit)
• [ ] Operating System: Ubuntu 20
• [ ] twilio-video.js: 2.13.1
• [ ] Third-party libraries (e.g., Rails):

[philnash]

Hey @mohsinijaz568, thanks for sharing your code. This looks quite similar to my example application here. Are you able to run this application successfully and see the remote video?

Are there any errors thrown in the dev tools when you are running your app?

[ardok]

Facing this issue as well.

The way to solve it for us is to just create an audio track and disable it.

      createLocalTracks({
        audio:
          doesMediaHaveAudio(mediaType) ||
          /*
          Adding this check for MEDIA_TYPE_SCREENSHARE_ONLY to handle the case of it not displaying
          the other participant's screen.
          Somehow, adding `audio` here makes it work :sigh:
          It won't be enabled because we are disabling it inside `then` handler below.
           */
          mediaType === 'MEDIA_TYPE_SCREENSHARE_ONLY',
        video: doesMediaHaveVideo(mediaType),
      }).then(tracks => {
          tracks.forEach(track => {
            if (track.kind === 'audio' && !doesMediaHaveAudio(mediaType)) {
              track.disable(); // Disable the audio here so that there is no "audio". 
            }
          });
          ...
      })

We have MEDIA_TYPE_SCREENSHARE_ONLY to only do call with screensharing only. So, it looks like somehow we need to either have an audio or video track so that screenshare could work?

[andriiDatsiuk]

Facing the same issue. The solution with disabling local audio track doesn't help.

[antonSavk]

It looks like a chrome autoplay policy is blocking the video from playback, isn't it?

[reezpatel]

Ok. Finally, fixed this stupid issue. I was stuck on this for days. @antonSavk comment made me realize that chrome won't autoplay play video if muted is not set. So, when the website reloads, video will not play unless the user interacts with the website. And the user must interact with the webpage before video is actually attached.

There are two ways to solve it,

1. Show some interactive popup, so user can click on it and chrome will autoplay the video. Zoom on web does this by asking to turn on mic / webcam before actually joining the room.
2. Set muted attribute to Video Element before mounting it, something like

const videoElement = track.attach();
videoElement.muted  = true;
container.appendChild(videoElement)

This will only work when you don't want sound in your video room.