Open ericzhao0825 opened 3 years ago
Code to reproduce the issue:
<!DOCTYPE HTML> <html> <head> <title> Twilio Video Room </title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="https://media.twiliocdn.com/sdk/js/video/releases/2.9.0/twilio-video.js"></script> </head> <body> <style> html, body { width: 100%; height: 100%; } </style> <br><br><br> <div id="local-media" style="border: red 1px solid;"> </div> <div class="container"> <div id="remote-media"></div> </div> <button onclick="toggleVideo()">Toggle video</button> <button onclick="leaveMeeting()">Leave meeting</button> <button onclick="startMeeting()">Start meeting</button> <script type="text/javascript"> const token = ''; //TODO const roomName = 'test'; let videoTrack = null; let audioTrack = null; let room = null; async function startMeeting() { Twilio.Video.connect(token, { name: roomName, audio: false }).then(_room => { room = _room; console.log(`Successfully joined a Room: ${room}`); // Attach the Tracks of the Room's Participants. room.participants.forEach(function (participant) { console.log("Already in Room: '" + participant.identity + "'"); participantConnected(participant); }); room.on('participantConnected', participant => { console.log(`A remote Participant connected: ${participant}`); participantConnected(participant); }); room.on('participantDisconnected', participant => { console.log(`A remote Participant connected: ${participant}`); participantDisconnected(participant); }); }, error => { console.error(`Unable to connect to Room: ${error.message}`); }); function participantConnected(participant) { console.log('Participant "%s" connected', participant.identity); const div = document.createElement('div'); div.id = participant.sid; participant.tracks.forEach((publication) => { console.log('subbing to existing publication', publication); trackSubscribed(div, publication); }); participant.on('trackPublished', (publication) => { trackSubscribed(div, publication) }); participant.on('trackUnpublished', trackUnsubscribed); document.getElementById('remote-media').appendChild(div); } function participantDisconnected(participant) { console.log('Participant "%s" disconnected', participant.identity); var div = document.getElementById(participant.sid); if (div) { div.remove(); } } function trackSubscribed(div, publication) { console.log('sub publication', publication); if (publication.track) { attachTrack(div, publication.track); } publication.on('subscribed', track => attachTrack(div, track)); publication.on('unsubscribed', track => detachTrack(track)); } function attachTrack(div, track) { console.log('attachTrack', track); div.appendChild(track.attach()); } function trackUnsubscribed(publication) { console.log('unsub publication', publication); if (publication.track) { detachTrack(publication.track); } } } function detachTrack(track) { console.log('detachTrack', track); track.detach().forEach(element => element.remove()); } function toggleVideo() { const localMediaContainer = document.getElementById('local-media'); console.log(videoTrack, room); if (videoTrack && videoTrack.isEnabled) { room.localParticipant.unpublishTrack(videoTrack); console.log('disable'); detachTrack(videoTrack); videoTrack = null; } else { getVideoTrack().then(function (t) { videoTrack = t; room.localParticipant.publishTrack(videoTrack); localMediaContainer.appendChild(videoTrack.attach()); }) console.log('enable'); } } function getVideoTrack() { return Twilio.Video.createLocalVideoTrack(); } function leaveMeeting() { room.disconnect(); if (videoTrack) { videoTrack.stop(); detachTrack(videoTrack); } if (audioTrack) { audioTrack.stop(); detachTrack(audioTrack); } } </script> </body> </html>
Steps: after a remote participant shared a video, click 'Start Meeting' then toggle the local video on and off.
Expected behavior: toggle on and off local video should not affect the videoWidth/videoHeight of the remote video.
Actual behavior: the remote video is being cutoff, only showing the top right portion of the video. This is not happening in firefox 82.0.2 and 79.0
when inspect the remote video element, is shows videoWidth 640 , videoHeight 480
inspect again after toggling local video on and off, videoWidth 320, videoHeight 180, and it is only showing part of the video
Software versions:
Hi @ericzhao0825 ,
Thanks for reporting this issue. We will investigate and get back to you.
We are tracking this internally now (JSDK-3101) (VIDEO-3680)
Code to reproduce the issue:
Steps: after a remote participant shared a video, click 'Start Meeting' then toggle the local video on and off.
Expected behavior: toggle on and off local video should not affect the videoWidth/videoHeight of the remote video.
Actual behavior: the remote video is being cutoff, only showing the top right portion of the video. This is not happening in firefox 82.0.2 and 79.0
when inspect the remote video element, is shows videoWidth 640 , videoHeight 480
inspect again after toggling local video on and off, videoWidth 320, videoHeight 180, and it is only showing part of the video
Software versions: