1

I'm using Twilio video and want to record the WebRTC video stream at 720x1280 on the server while showing a lower resolution 360x640 live preview of the user's camera in the browser. This is for layout reasons because I want to fit the video into a smaller div in my HTML. In the code below I've set separate sizes for the video and render dimensions. When I run the code below, Twilio inserts a video element in the DOM matching the dimensions specified in the video parameter. On the server I always receive a recorded video at 360x640 irrespective of what is specified in the video parameter or renderDimensions parameter.

<div class="row">
                <div class="columns large-12" style="background-color: blue; width: 640px; height: 360px;">

                    <div id="local-media" width="640" height="360"></div>


                </div>
            </div>



function createLocal() {
            Twilio.Video.createLocalTracks({
                audio: true,
                video: { height: 720, frameRate: 24, width: 1280 },
                renderDimensions: {
                    low: { height: 720, frameRate: 24, width: 1280 }
                }
            }).then(localTracks => {
                //DOCUMENTATION
                //https://media.twiliocdn.com/sdk/js/video/releases/2.3.0/docs/module-twilio-video.html#.createLocalTracks
                var localMediaContainer = document.getElementById('local-media');
                localTracks.forEach(function (track) {
                    localMediaContainer.appendChild(track.attach());
                });


                return Twilio.Video.connect(token, {
                    name: rm,
                    tracks: localTracks
                });
            }).then(room => {
                window.room = room;
                console.log(`Connected to Room: ${room.name}`);
            });

        }

Here's a summary of my test findings when I change the video and renderDimension settings and then check the size of the video inserted into the DOM and recorded on the server. enter image description here

I'm not sure if this is a Twilio question or a front-end dev question. For example, can I tell the Twilio SDK to show a smaller video preview in the browser while recording something larger on the server? And why is the recorded video always the same size irrespective of the configuration? Or if not a Twilio issue, how do I force the 720x1280 video element that Twilio adds to the DOM into a 360x640 div?

Note - I understand that Twilio will automatically switch to a lower-quality video if the user has a slow connection. My testing is on a 1Gbps fiber connection.

hughesdan
  • 3,019
  • 12
  • 57
  • 80
  • Are you finding that the video on the page is bigger than you're asking for for your local participant or remote participants? And how are you getting the video from the Twilio server? Is it through the compositions API and when you request it are you requesting a specific resolution? – philnash Apr 15 '20 at 06:26
  • The video I am getting is a different size than I am requesting. In the table above the first two columns are the parameters I pass and the last two columns are what I see on the page and on the Twilio server respectively. I'm not using compositions yet. In the createLocal function I'm passing the name of the DIV ("local-media") and the client-side Twilio SDK is inserting the live video feed. – hughesdan Apr 15 '20 at 12:12
  • You might want to check [the composition API as that gives you the option to supply the resolution for the video](https://www.twilio.com/docs/video/api/compositions-resource#create-composition-http-post). As for displaying the video on the page, have you tried sizing it with CSS? – philnash Apr 15 '20 at 13:47
  • Thanks. I'll take a look at the composition API. There's a size on the DIV already. The video element doesn't exist until it's inserted by Twilio so that presents two challenges 1) I can't pre-emptively set the size and can only resize it which is a suboptimal user experience IMO, and 2) when resizing the style is ignored for some reason that I can not yet determine. I will focus first on a solution using the composition API as that sounds like a preferable option. – hughesdan Apr 16 '20 at 01:03

0 Answers0