Question

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

HTML：

  ]).factory('imageFind', [
        'imageService', 'ApiService',
        function (imageService, ApiService) {
            return {
                search: function (file, start, sort) {
                    var formData, params={};
                     if (start == null) {
                        start = 0;
                     }
                     if (sort == null) {
                        sort = "";
                     }

                    var data = {
                        start: start,
                        sort: sort
                    };

                    data = $.param(data);
                    var config = {'Content-Type': undefined};
                    return ApiService.post(imageFindPint, data, config);
                }
            };
        }
    ]);

JavaScript的：

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

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

但我无法将其增加到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找到更多支持。

Answer 2

您可以使用以下CSS调整屏幕尺寸。您可以在Quickstart-> public-> index.css

中找到此CSS文件

远程媒体视频大小

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

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

2 个答案: