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>元素的样式，以确保其保持在一定的大小，这将导致接收方需要时进行视频放大/缩小。

我们计划将来更新我们的文档，包含更多这些细节。但您始终可以从 help@twilio.com 找到其他支持。