javascript - Twilio 视频 : how to increase video size?

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。高度 不起作用。

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

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

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

但我无法将其增加到超过 640x375 像素。

Answer 1

根据与我们支持团队的一些互动，您似乎应该首先尝试设置 <div> 的大小在附加视频轨道之前使用 CSS。快速启动应用程序中使用了此技术。

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 获得更多支持。