twilio-video.js
twilio-video.js copied to clipboard
twilio
remote video size change(cutoff) in firefox 83.0 when toggle local video on and off
- [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.
- [x] 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:
<!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:
- [x] Browser(s): firefox 83.0
- [x] Operating System: windows 10
- [x] twilio-video.js: 2.7.2, 2.9.0
- [x] Third-party libraries (e.g., Angular, React, etc.): none
Hi @ericzhao0825 ,
Thanks for reporting this issue. We will investigate and get back to you.
