javascript - 控制 Twilio Video 渲染的本地视频大小，同时保持服务器端录制的高清质量

Question

我正在使用 Twilio 视频并希望在服务器上以 720x1280 录制 WebRTC 视频流，同时在浏览器中显示用户相机的较低分辨率 360x640 实时预览。这是出于布局原因，因为我想将视频放入 HTML 中较小的 div 中。在下面的代码中，我为视频和渲染尺寸设置了单独的尺寸。当我运行下面的代码时，Twilio 会在 DOM 中插入一个与 video 参数中指定的尺寸相匹配的视频元素。在服务器上，无论 video 参数或 renderDimensions 参数中指定了什么，我总是会收到 360x640 的录制视频。

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

        }

这是我更改视频和 renderDimension 设置然后检查插入 DOM 并记录在服务器上的视频的大小时的测试结果摘要。

我不确定这是 Twilio 问题还是前端开发问题。例如，我可以告诉 Twilio SDK 在浏览器中显示较小的视频预览，同时在服务器上录制较大的内容吗？为什么无论配置如何，录制的视频总是相同的大小？或者，如果不是 Twilio 问题，我如何将 Twilio 添加到 DOM 的 720x1280 视频元素强制转换为 360x640 div？

注意 - 我了解如果用户连接速度较慢，Twilio 会自动切换到质量较低的视频。我的测试是在 1Gbps 光纤连接上进行的。

标签： javascripttwiliotwilio-video