Twilio视频：如何增加视频大小？

Question

我有一个按钮，允许用户预览他们通过相机拍摄的视频。视频流已成功显示，但我很难找到如何更改所显示视频的尺寸。这就是我所拥有的：

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);
    };
);

trackAdded事件开火，但我没有得到started或dimensionsChanged事件发射和设置track.dimensions.height不起作用。

我可以使用以下方法缩小视频：

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

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

但我无法将其增加到640x375像素以上。

Answer 1

基于与我们的支持团队的一些互动，您似乎应首先尝试使用CSS设置<div>的大小，然后再附加视频轨道。此技术用于快速入门应用程序。

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

然后，在调用localStreamConstraints时尝试传入可选的inviteToConversation

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

看起来您可以指定video的尺寸：

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

然后由getUserMedia使用（WebRTC功能）

请记住，您可以在本地调整capture大小。这是从相机捕获的视频轨的大小。

但是，根据网络状况，浏览器中的WebRTC引擎（以及接收器浏览器）可能会决定捕获的视频分辨率太高，无法以所需的帧速率通过网络发送（您还可以设置帧速率约束）捕获器，如果你想在时间与空间分辨率之间进行权衡）。这意味着接收方可能会收到小于您要发送的视频。为了克服这个问题，您可以使用CSS来设置<video>元素的样式，以确保它保持一定的大小，这将导致接收端所需的视频放大/缩小。

我们计划将来更新我们的文档更多这些细节。但您总能从[email protected]找到更多支持。

Answer 2

您可以使用以下css调整屏幕大小。你可以在Quickstart-> public-> index.css中找到这个css文件

远程媒体视频大小

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