常用视频配置

---

功能简介

在视频通话或直播时，开发者可以根据需要指定推流和拉流视频相关配置，如视频采集分辨率、视频编码输出分辨率、视频帧率、码率、视图模式和镜像模式。

• 分辨率：
  • 视频分辨率：用于度量图像内数据量多少的一个参数，通常表示成 ppi。
  • 采集分辨率：指摄像头等采集设备提供的画面分辨率。
  • 编码分辨率：指经过编码处理的画面的分辨率。
• 码率：指每秒传输的比特（bit）数，单位为 bps（bit per second）。
• 帧率：单位时间内视频显示帧数的量度单位，测量单位为“每秒显示帧数”（Frame Per Second，fps）。

设置合适的视频分辨率、帧率和码率可以在音视频场景中提供用户更好的使用体验。选择合适镜像模式与视图模式则可以让开发者提供个性化的视频显示模式。

示例源码下载

请参考 下载示例源码 获取源码。

相关源码请查看 “/pages/example/common-feature/video-config.nvue” 目录下的文件。

前提条件

在进行视频配置之前，请确保：

• 已在 ZEGO 控制台 创建项目，并申请有效的 AppID 和 AppSign，详情请参考 控制台 - 项目信息。
• 已在项目中集成 ZEGO Express SDK，并实现了基本的音视频推拉流功能，详情请参考 快速开始 - 集成 和 快速开始 - 实现流程。

使用步骤

1 修改视频配置

调用 setVideoConfig 修改推流视频配置。可通过该接口设置视频帧率、码率、视频采集分辨率和视频编码输出分辨率。若不进行设置，则默认视频配置如下：

以下以设置视频采集分辨率 360p，编码分辨率 360p，码率 600 kbps，帧率 15 fps 为例：

let videoConfig = {};

videoConfig.captureHeight = 640;
videoConfig.captureWidth = 360;
videoConfig.encodeHeight = 640; // Web 不需要
videoConfig.encodeWidth = 360; // Web 不需要
videoConfig.fps = 15
videoConfig.bitrate = 600;

// 设置视频配置
ZegoExpressEngine.instance().setVideoConfig(videoConfig);

使用预设值设置

您也可以使用 ZEGO Express SDK 提供的预设组合值进行修改视频配置，ZegoVideoConfigPreset 的预设组合值如下：

调用 setVideoConfig 接口使用预设值时示例代码如下：

// 使用预设置进行视频设置
ZegoExpressEngine.instance().setVideoConfig(ZegoVideoConfigPreset.Preset1080P)

2 修改视频视图模式

在 uni-app 项目的 App 平台，通过修改视图标签 <zego-local-view> 和 <zego-remote-view> 的 “viewMode” 参数可以修改视频的视图模式。在 Web 的环境的 video 元素，通过修改 object-fit 属性的值改变视图模式。

目前支持如下 3 种视频渲染填充模式：

三种视频渲染填充模式效果如图所示：

• 上图中展示的视图分辨率为 320 × 390（宽 × 高），视频分辨率为 340 × 340（宽 × 高）。
• 上图中原视频尺寸长等于宽，视图尺寸长大于宽，故在 “AspectFit” 渲染模式下，视频上下出现黑边；若此时视图尺寸宽大于长，则在 “AspectFit” 渲染模式下，视频左右将会出现黑边。

以设置预览视图模式为 “AspectFit” 并开始预览为例：

<template>
    <zego-local-view :viewMode="viewModeIndex" style="height: 403.84rpx;flex: 1;">
    </zego-local-view>
</template>

<script>
import ZegoLocalView from '@/components/zego-ZegoExpressUniApp-JS/zego-view/ZegoLocalView';
import { ZegoViewMode } from '@/components/zego-ZegoExpressUniApp-JS/lib/ZegoExpressDefines';

export default {
   components: {
        ZegoLocalView
    },
    ...
    startPreview() {
        viewModeIndex = ZegoViewMode.AspectFit;
        ZegoExpressEngine.instance().startPreview();
    }
    ...
}
</script>

3 设置镜像模式

在推流前或停止推流后可通过调用 setVideoMirrorMode 设置本地预览视频以及推送的视频是否开启镜像模式。目前支持如下四种镜像模式：

四种镜像模式的效果如下：

以设置拉流端镜像且本地预览非镜像为例：

// #ifdef APP-PLUS
ZegoExpressEngine.instance().setVideoMirrorMode(ZegoVideoMirrorMode.OnlyPublishMirror);
// #endif

相关文档

如何选择视频分辨率、帧率、码率？ Web 平台如何设置镜像模式？