订阅视频源的最佳做法

构建 Web 应用时要考虑的关键元素是如何最好地将视频集成到页面布局中。 视频的放置和数量可能会影响页面性能、用户体验和整体美学。 本文包含的指南可帮助开发人员确定在网页上放置的视频数量以及优化最终用户体验的最佳视频分辨率大小。

了解视频分辨率

开发人员需要了解有关视频分辨率的重要详细信息。 分辨率是指视频输出上显示的像素数，通常采用 width x height 格式度量。 更高的分辨率意味着更多的像素，导致图像更锐利和更清晰。 Azure 通信服务视频通话中提供的传入视频分辨率包括：

• 1080p （完整 HD）：1920 x 1080 像素
• 720p （HD）：1280 x 720 像素
• 540p （qHD）：960 x 540 像素
• 360p （SD）：640 x 360 像素
• 240p：426 x 240 像素
• 180p：320 x 180 像素

影响视频质量的因素

多个因素会影响可在网页上有效放置的视频数量。 这些因素包括设备类型、分辨率、可用带宽和用户体验注意事项。

本地设备功能

用于显示网页的设备类型起着重要作用。 例如，具有较大屏幕的台式机和笔记本电脑可以容纳比移动设备更多的视频。 建议使用 响应式设计技术 根据屏幕尺寸调整视频的数量和大小。

此外，本地计算机必须正确处理、编码和显示这些视频。 本地监视器屏幕和浏览器功能的大小还决定了可在网页上同时显示的活动视频数。

分辨率和视频屏幕大小

最终用户设备的显示分辨率直接影响到每页可显示的视频数。 监视器和屏幕分辨率越高，可以显示的视频越多。

请记住，对于在页面上放置的每个视频，视频所需的 Internet 带宽越多。 此外，本地计算机必须具有足够的性能功能才能正确编码和显示视频。

建议平衡视频质量和性能。 不要使用视频输出填充屏幕上的每一个像素，这可能会使用户不知所措。 将更多视频添加到页面时，请考虑传入和传出带宽。

Internet 带宽注意事项

为了改善最终用户体验，我们需要了解如何测量 Internet 速度，以及哪些因素会影响它们。 Internet 速度通常以每秒兆位（Mbps）为单位，指示下载或上传数据的速率。 多种因素可能会影响这些速度，包括网络连接类型（光纤、电缆、wifi、移动电话）、网络设备（调制解调器、路由器）的质量以及连接到网络的设备数量。

在网页上放置多个视频时，请考虑用户的网络带宽。 分辨率更高的视频需要更多数据进行流式传输。 在页面上放置的整体视频越多，每个视频消耗的带宽就越大。 如果某人通过较低的总带宽吞吐量连接连接到 Internet，则他们流式传输更高分辨率的视频或页面上的多个视频的能力受到限制。 相反，如果某人对入站和出站流量具有更高的 Internet 带宽，他们能够提供和使用高分辨率视频并在页面上容纳更多视频。

最佳优化处理传入视频流的方法

使用 Web UI 库

Azure 通信服务 Web UI 库 是一个功能强大的工具，面向希望创建无缝且具有视觉吸引力的 Web 应用程序的开发人员。 Web UI 库提供一组全面的预生成 UI 组件，这些组件易于集成且高度可自定义。 此解决方案使开发人员能够专注于构建功能，而不是从头开始设计。

Web UI 库可确保不同项目和平台的设计标准一致，增强用户体验并减少开发时间。 其广泛的文档和活跃的社区支持使它成为初学者和经验丰富的开发人员的绝佳选择。 通过应用 Web UI 库，可以简化工作流、创建专业质量的界面，并更高效地提供引人入胜的 Web 应用程序。 此外，使用 Web UI 库可以消除关于一次可最佳订阅多少视频的不确定性。

使用最佳视频计数API

Azure 通信服务 WebJS SDK 引入了 最佳视频计数（OVC）， 告知应用程序在群组通话期间可以最佳呈现来自不同参与者的传入视频数。 该 optimalVideoCount 属性根据 网络带宽 和 硬件功能动态调整。 最佳视频计数返回一个整数，用于定义可在网页上显示的理想视频数。 应用程序应根据 OVC 的输出更新呈现的视频数。 开发人员应确保其应用程序订阅群组通话中的 Optimal Video Count 更改，并根据 OVC 计数动态调整在网页上显示的视频数量。 最佳视频计数（OVC）的值每 10 秒更新一次。

需要通过 Call 对象的功能方法引用该功能 OptimalVideoCount 。 然后，可以通过 OptimalVideoCountCallFeature 的 on 方法设置侦听器，以便在 optimalVideoCount 更改时收到通知。 若要取消订阅更改，可以调用 off 方法。 可在网页上呈现的传入视频的当前最大数量为 16。 为了正确支持 16 个传入视频，计算机应至少具有 16 GB RAM 和 4 核或更大的 CPU（不超过 3 年）。

const optimalVideoCountFeature = call.feature(Features.OptimalVideoCount);
optimalVideoCountFeature.on('optimalVideoCountChanged', () =\> {
    const localOptimalVideoCountVariable = optimalVideoCountFeature.optimalVideoCount;
})

当最佳视频计数值发生更改时，如果结果指示本地计算机上的更多传入视频容量增加，则可以使用 createView 该方法创建新的传入视频，以显示要在页面上显示的更多传入视频流。

相反，如果最佳计数减少且小于页面上当前视频数，请考虑用 dispose 方法释放一个视频，并相应地更新应用布局。

将 1080p 或 720p 视频添加到页面时要考虑的事项。

• 你可以放置一个 1080p 传入视频，其余视频小于 720p。
• 你可以放置两个 720p 传入视频，其余视频小于 720p。

在公共预览版 1.33 及更高版本中，调用 SDK 支持同时在网页上放置 2 720p 视频。

例如，在有七名参与者打开摄像头的群组通话中，你可以在每个客户端页面上选择以更高的分辨率显示两名参与者的视频。 这两个参与者将视频设置为以 720p 分辨率播放，方法是将网页上的视图设置为高度 720 像素，宽度 1280 像素或更大。 其余五个参与者视频应设置为较低的分辨率，例如 360p 或更低。

• 请确保呈现的视频总数不超过 OVC 最佳视频计数 （OVC） 值。

• 每个客户端都可以从特定用户中选择视频源，并调整其各个设备上的分辨率大小。

• 每个参与者发送特定视频分辨率的能力可能会有所不同。 一些计算机配备了更高质量的相机，使它们能够传输 1080p 视频。 相反，某些移动浏览器的视频传输功能较低，例如只有 540p。 如果在页面中嵌入视频分辨率为 1080p 或 720p，则传入的视频可能与该分辨率不匹配。 在这种情况下，系统会纵向扩展视频流以填充视频呈现器大小。

• 目前，最多可以在网页上呈现两个 720p 视频流。 如果启用了两个以上的 720p 流，则所有 720p 视频版本均以 540p 进行流式处理。

• 可订阅的最大传入远程流数为 16 个视频流和 1 个桌面浏览器上的屏幕共享，4 个视频流和 1 个 Web 移动浏览器上的屏幕共享。

• Azure 通信服务视频 Simulcast 功能通过同时在多个分辨率和比特率上启用最终客户端提供的单个视频来增强视频流。

  此函数使具有不同网络条件的观看者能够选择哪些视频呈现形式，以获得最佳视频质量，而无需缓冲或中断。 通过优化带宽使用率，模拟广播仅向支持带宽的用户发送更高分辨率流。 此行为可最大程度地减少不必要的数据传输。 Simulcast 通过提供稳定且一致的视频质量并启用自适应流式处理来提高整体用户体验。

  所有浏览器（特别是移动浏览器和 macOS Safari）都不支持 Simulcast。 如果使用 iOS Safari、Android Chrome 或 macOS Safari 的参与者呈现 720p 视频，而另一个参与者尝试以较低的分辨率呈现同一视频，则两者都将获得较低的分辨率。 发生这种情况是因为，当不支持同播发送时，这些设备优先选择较小的分辨率。

如何配置以发送 1080p 流

公共预览版调用 SDK 的版本 1.35.1 及更高版本支持发送 1080p 视频。

使用 WebJS SDK 以 1080p 分辨率发送视频时，必须使用 视频约束 API 并指定要使用 1080p。 如果未使用视频约束 API 且未指定 1080p，则默认视频流分辨率为 720p。

    const callOptions = {
        videoOptions: {
            localVideoStreams: [...],
            constraints: {
                send: {
                    height: {
                        max: 1080
                    }
                }
            }
        },
        audioOptions: {
            muted: false
        }
    };
    // make a call
    this.callAgent.startCall(identitiesToCall, callOptions);

发送 1080p 视频流时要注意的项目

• 正在使用的相机应该能够发送 1080p 视频。 若要检查相机支持哪些分辨率，可以使用以下 JavaScript 示例来确定可用的分辨率。

async function getSupportedResolutions() {
  const constraints = {
    video: {
      width: { ideal: 4096 }, // Try to get the maximum width
      height: { ideal: 2160 } // Try to get the maximum height
    }
  };
 
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    const videoTrack = stream.getVideoTracks()[0];
    const settings = videoTrack.getSettings();
    
    console.log(`Supported resolution: ${settings.width}x${settings.height}`);
    
    // Stop the video track to release the camera
    videoTrack.stop();
  } catch (error) {
    console.error('Error accessing media devices.', error);
  }
}
 
getSupportedResolutions();

• 发送 1080p 的计算机必须具有足够强大的计算机来支持发送 1080p。
• 在接收方(接受 1080p 视频的人员)的客户端上，必须具有支持 1080p 的视频渲染 HTML5 元素，以便能够呈现 1080p。 如果呼叫中的任何参与者都未启用 1080p 元素来接收视频，则呼叫将调整并协商为较小的分辨率。
• 呼叫中发送和接收 1080p 视频流的所有用户必须具有支持 1080p 流的带宽。

可以使用 WebJS SDK 中的媒体质量统计信息 API 来确定实时视频发送和接收分辨率。 请参阅此处了解详细信息。

结论

若要确定网页上要放置的视频数，需要仔细考虑分辨率、设备类型、带宽和用户体验。 遵循以下指南和最佳做法，创建不仅外观吸引人，而且可无缝运作的 Web 应用，为各种设备和连接速度的用户提供最佳查看体验。