I have a button that allows a user to preview their video that es through their camera. The video stream is successfully displayed but I am struggling to find out how to alter the dimensions of the displayed video. This is what I have:

HTML:

<div id="local-media"></div>

JavaScript:

previewMedia = new Twilio.Conversations.LocalMedia();

Twilio.Conversations.getUserMedia().then(
    function (mediaStream) {
        previewMedia = new Twilio.Conversations.LocalMedia();
        previewMedia.on('trackAdded', function (track) {
        if(track.kind === "video"){
            track.dimensions.height = 1200;
            track.on('started', function (track) { // DOES NOT FIRE
                console.log("Track started");
            });
            track.on('dimensionsChanged', function (videoTrack) { // DOES NOT FIRE
                console.log("Track dimensions changed");
            });
        }
        previewMedia.addStream(mediaStream);
        previewMedia.attach('#local-media')
    }),
    function (error) {
        console.error('Unable to access local media', error);
    };
);

The trackAdded event fires but I don't get the started or dimensionsChanged events firing and setting the track.dimensions.height does not work.

I can shrink the video by using:

div#local-media {
   width:270px;
    height:202px; 
}

div#local-media video {
    max-width:100%;
    max-height:100%;
}

but I cannot increase it beyond 640x375 pixels.

I have a button that allows a user to preview their video that es through their camera. The video stream is successfully displayed but I am struggling to find out how to alter the dimensions of the displayed video. This is what I have:

HTML:

<div id="local-media"></div>

JavaScript:

previewMedia = new Twilio.Conversations.LocalMedia();

Twilio.Conversations.getUserMedia().then(
    function (mediaStream) {
        previewMedia = new Twilio.Conversations.LocalMedia();
        previewMedia.on('trackAdded', function (track) {
        if(track.kind === "video"){
            track.dimensions.height = 1200;
            track.on('started', function (track) { // DOES NOT FIRE
                console.log("Track started");
            });
            track.on('dimensionsChanged', function (videoTrack) { // DOES NOT FIRE
                console.log("Track dimensions changed");
            });
        }
        previewMedia.addStream(mediaStream);
        previewMedia.attach('#local-media')
    }),
    function (error) {
        console.error('Unable to access local media', error);
    };
);

The trackAdded event fires but I don't get the started or dimensionsChanged events firing and setting the track.dimensions.height does not work.

I can shrink the video by using:

div#local-media {
   width:270px;
    height:202px; 
}

div#local-media video {
    max-width:100%;
    max-height:100%;
}

but I cannot increase it beyond 640x375 pixels.

• javascript
• video
• twilio

2 Answers 2

Based upon some interactions with our support team it seems you should first try setting the size of a <div> using CSS before attaching the video track. This technique is used in the quickstart application.

https://www.twilio./docs/api/video/guide/quickstart-js

Then, try passing in the optional localStreamConstraints when calling inviteToConversation

https://media.twiliocdn./sdk/js/conversations/releases/0.13.5/docs/Client.html#inviteToConversation

It looks like you can specify the dimensions for video:

https://developer.mozilla/en-US/docs/Web/API/MediaDevices/getUserMedia

which is then used by getUserMedia (the WebRTC function)

Keep in mind that you can adjust the capture size locally.This is the size of the Video Track being captured from the camera.

However, depending on network conditions, the WebRTC engine in your browser (and the receivers browser) may decide that the video resolution being captured is too high to send across the network at the desired frame rate (you can also set frame rate constraints on the capturer if you'd like to trade off temporal vs spatial resolution). This means that the receiving side may receive a video feed that is smaller than what you intended to send. To overe this, you can use CSS to style the <video> element to ensure that it stays at a certain size, which will result in video upscaling/downscaling where required on the receiving side.

We plan to update our documentation with more of these specifics in the future. But you can always find additional support from [email protected].

you can adjust the screensize using following css. you can find this css file in Quickstart->public->index.css

Remote Media Video Size

div#remote-media video 
{
  width: 50%;
  height: 15%;
  background-color: #272726;
  background-repeat: no-repeat;
}