简体中文

视频其他功能接入

1. 功能支持情况

插件	直通	回放
电子放大镜	√	√
全屏	√	√
截图	√	√
手动马赛克	√	√
视频信息	√	√
屏占比	√	√
直通延迟监测	√	-

2. 功能接入指南

所有的功能都挂载在 player.pluginMap 上。回放播放的插件也都统一挂载到了外层播放器 historyPlayer.pluginMap 上，不需要在通道播放器调用方法。方法传入通道对象 { devId, channel }，如果不传，则对所有通道生效。

用法：以开启电子放大镜为例

// 开启放大镜
Player.pluginMap.magnifier.enable({
    channel: 1,
    devId: '11111'
});

3. 功能详情

3.1. 电子放大镜

描述

在视频中按住鼠标左键，框选范围，然后松开，被框选的范围会被放大展示。

接口

开启放大镜

player.pluginMap.magnifier.enable(channelIndex?, devId?);
禁用放大镜

player.pluginMap.magnifier.disable(channelIndex?, devId?);
取消放大镜

player.pluginMap.magnifier.cancelZoomIn(channelIndex?, devId?);

注：其中通道对象 { devId, channel }，如果不填，则对所有通道生效。

示例

// 开启 通道 为 1 , devId 为 'devId' 的放大镜
player.pluginMap.magnifier.enable(1, 'devId');
// 或者
player.pluginMap.magnifier.enable({
    channel: 1,
    devId: 'devId'
});

3.2. 全屏

描述

将视频画面全屏显示。

注：该插件只会全屏显示视频画面，如果业务层还需要全屏显示控制按钮或者其他 UI 组件，请自行实现全屏功能。

接口

全屏

player.pluginMap.fullscreen.fullscreen();
取消全屏

player.pluginMap.fullscreen.cancelFullscreen();

注：其中 channelIndex 是回放播放器通道对象 { devId, channel }

示例

// devId 为 'devId'，channel 为 1 的通道全屏
player.pluginMap.fullscreen.fullscreen({ devId: 'devId', channel: 1 });

3.3. 截图

描述

截取视频画面，包括视频图像，adas 叠加，dms 叠加，马赛克效果。

接口

const base64Datas = player.pluginMap.snapshot.capture(channelIndex?,[, options]);

参数

属性值	数据类型	描述
channelIndex	object[]	必填参数, 可以是”ALL“ 、null 或通道对象 { devId, channel }，如果为 "ALL" 或者 `null`，则对所有通道生效
options	object	可选参数，控制截图行为
├fileName	string	可选参数，下载图片的文件名称, 不填则以时间戳命名
├autodownload	boolean	可选参数，是否自动下载截图图片，默认 false
├captureFormat	String	可选参数，下载图片的编码格式："png"或"jpeg"。注意 jpeg 为有损编码，适用于有截图需求但不需要原图场景，耗时短；png 为无损编码，耗时长。默认为 png 编码。
├captureSize	string	可选参数，指定下载图片的尺寸："container"或"original"。container 为播放容器尺寸，original 为视频原始尺寸。注意 original 相较于 container 会比较耗时。默认为"original"
├watermark	object	可选参数，水印配置。参考下表水印参数

水印参数

键名	默认值	说明
fontSize	16	字体大小（像素）
fontFamily	'sans-serif'	字体家族名称
color	'rgba(255, 255, 255, 0.25)'	文字颜色（RGBA格式）
gridSize	[320, 200]	单个水印块大小[宽度, 高度]（像素）
lineHeight	32	行高（像素）
rotate	-30	旋转角度（顺时针度数）
breakNumber	30	换行字符数（超过此值自动换行）
contents	[]	要显示为水印的文本内容数组

返回值

属性值	数据类型	描述
base64Datas	object[]	带有当前截图的 base64 数据的数组
├channel	number	通道号
├devId	string	设备 id
├base64	string	base64 数据

示例

// 截图 通道 为 1 , devId 为 'devId' 数据
player.pluginMap.snapshot.capture({ devId: 'devId', channel: 1 });

// 所有通道截图
player.pluginMap.snapshot.capture();
historyPlayer.pluginMap.snapshot.capture(null);
historyPlayer.pluginMap.snapshot.capture('ALL');

// 截图并做下载
historyPlayer.pluginMap.snapshot.capture(
    {
        devId: 'devId',
        channel: 1
    },
    {
        fileName: `test${new Date().getTime()}`,
        autodownload: true
    }
);
historyPlayer.pluginMap.snapshot.capture('ALL', {
    fileName: `test${new Date().getTime()}`,
    autodownload: true
});

3.4. 手动马赛克

描述

视频播放过程中，可手动添加固定位置马赛克。

接口

编辑马赛克

player.pluginMap.codeMosaic.editMosaic(channlInfo?);
保存马赛克

player.pluginMap.codeMosaic.saveMosaic(channelInfo?);
清除马赛克(编辑时使用)

player.pluginMap.codeMosaic.clearMosaic(channelInfo?);
获取马赛克

player.pluginMap.codeMosaic.getData(channlInfo[]);

返回值: mosaicData[]
设置马赛克

player.pluginMap.codeMosaic.setData(mosaicData[]);
删除马赛克

player.pluginMap.codeMosaic.clearData(channlInfo[]);

注：其中 channelInfo 通道对象 { devId, channel }，如果不填，则对所有通道生效。getData 和 clearData 方法中，该参数必填。

参数 mosaicData 说明：

{
	devId: string, // 设备id
    channel: number, // 通道号
    list: {
        x: number,
        y: number,
        w: number,
        h: number,
        mw: number,
        mh: number
    }[]
}

示例

// 编辑 通道 为 1 , devId 为 'devId'
player.pluginMap.codeMosaic.editMosaic({ devId: 'devId', channel: 1 });

// 编辑所有通道
player.pluginMap.codeMosaic.editMosaic();

手动马赛克动态设置示例

// 第一步，获取手动马赛克数据,需要先编辑手动马赛克
player.pluginMap.codeMosaic.saveMosaic({devId: 'dev1', channel: 1});
player.pluginMap.codeMosaic.getData([{ devId: 'dev1', channel: 1 }]); // return [{devId: 'dev1', channel: 1, list: [{x: 10, y: 20, w: 100, h: 100, mw: 1920, mh: 1080}]}]

// 第二步，将获取的数据存储在后端，并可通过接口获取

// 第三步，注册hook，动态设置马赛克
// 假设存储的数据格式为 [{ devId, channel, startTime, endTime, data: mosaicData[] }]
const list = await ajax.get({...}); // 通过后端接口获取存储的数据
player.hooks.onChannelRender.tap('render mosaic', (param, renderer) => {
    const { utc } = param.info; // 获取当前渲染帧的 utc，单位 秒。
    const { realDevId: devId, realChannel: channel } = renderer;
    const data = list.find(p => {
        return p.devId === devId && p.channel === channel && p.startTime <= utc && p.endTime >= utc;
    });
    if (data) {
        player.pluginMap.codeMosaic.setData(p.data);
    } else {
        player.pluginMap.codeMosaic.clearData([{ devId, channel }]);
    }

});

3.5. 视频信息

描述

展示视频的分辨率，码率，帧率信息。在视频的右下角显示。

接口

player.pluginMap.videoInfoLayer.setInfoList(data[], channelIndex?);

data 中参数详解：

p：分辨率，

fps：码率

mbps：实时帧率

示例

// 展示 通道 为 1 , devId 为 'devId' 的视频信息
player.pluginMap.videoInfoLayer.setInfoList(['p', 'fps', 'mbps'], {
    devId: 'devId',
    channel: 1
});

// 开启所有通道
player.pluginMap.videoInfoLayer.setInfoList(['p', 'fps', 'mbps']);

// 关闭展示 传入空数组
player.pluginMap.videoInfoLayer.setInfoList([]);
// 指定通道关闭展示
player.pluginMap.videoInfoLayer.setInfoList([], {
    devId: 'devId',
    channel: 1
});

3.6. 屏占比

描述

设置视频屏占比，设置取值范围：String，full: 铺满、origin: 原始比例、比例模式，如：16:9, 4:3, 1:1

接口

player.pluginMap.aspectRatio.set(value, channelInfo?);

注： channelInfo 为空或者为 0，则是全部通道生效。如果为对象数据 { channel: 1, devId: 'devId' }，则可以指定通道修改。

示例

// channel 为0 或者为空 全部修改, 为正整数时为指定通道修改
player.pluginMap.aspectRatio.set(value);
player.pluginMap.aspectRatio.set(value, 0);
// 指定设备 channel 为 1，devId 为 'devId' 通道修改
player.pluginMap.aspectRatio.set(value, {
    devId: 'devId',
    channel: 1
});

3.7. 直通延迟监测

描述

用于检测直通是否延时，并给出回调。只有直通场景插件才生效。

接口

player.pluginMap.liveDelay.setOptions(options: Object)

参数

属性	类型	说明
interval	number	单位：毫秒。onMessage 的回调间隔。
delayTime	number	单位：毫秒。延时判断时长，比如设置为 5000，播放过程中延时了 5000ms ，就回调 onMessage
onMessage	function	延时的回调函数，参数无。

开启延迟插件

player.pluginMap.liveDelay.enable()
关闭延迟插件

player.pluginMap.liveDelay.disable();

示例

player.pluginMap.liveDelay.setOptions({
    interval: 10000,
    delayTime: 5000,
    onMessage: () => {
        console.log('当前直通播放有延时，请检查网络');
    }
});

视频其他功能接入#

1. 功能支持情况#

2. 功能接入指南#

3. 功能详情#

3.1. 电子放大镜#

3.2. 全屏#

3.3. 截图#

3.4. 手动马赛克#

3.5. 视频信息#

3.6. 屏占比#

3.7. 直通延迟监测#