remote video size change(cutoff) in firefox 83.0 when toggle local video on and off #1314

ericzhao0825 · 2020-12-11T17:10:22Z

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.
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.
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:

Browser(s): firefox 83.0
Operating System: windows 10
twilio-video.js: 2.7.2, 2.9.0
Third-party libraries (e.g., Angular, React, etc.): none

The text was updated successfully, but these errors were encountered:

manjeshbhargav · 2020-12-18T18:03:07Z

Hi @ericzhao0825 ,

Thanks for reporting this issue. We will investigate and get back to you.

makarandp0 · 2020-12-18T18:31:08Z

We are tracking this internally now (JSDK-3101) (VIDEO-3680)

manjeshbhargav assigned makarandp0 Dec 18, 2020

makarandp0 added the bug filed A bug has been filed upstream for this issue label Dec 18, 2020

vbabenko mentioned this issue Jan 25, 2021

Unexpected video dimensions #1327

Closed

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

remote video size change(cutoff) in firefox 83.0 when toggle local video on and off #1314

remote video size change(cutoff) in firefox 83.0 when toggle local video on and off #1314

ericzhao0825 commented Dec 11, 2020

manjeshbhargav commented Dec 18, 2020

makarandp0 commented Dec 18, 2020 •

edited

Loading

remote video size change(cutoff) in firefox 83.0 when toggle local video on and off #1314

remote video size change(cutoff) in firefox 83.0 when toggle local video on and off #1314

Comments

ericzhao0825 commented Dec 11, 2020

manjeshbhargav commented Dec 18, 2020

makarandp0 commented Dec 18, 2020 • edited Loading

makarandp0 commented Dec 18, 2020 •

edited

Loading