音视频套件对接

Web无插件-WSPlayerWeb无插件-HLS/FLV插件播放-DHPlayer客户端开发包微信公众号申请及开发H5播放器适配浏览器ICC SDK-AndroidICC SDK-IOSICC 小程序开发

Web无插件-WSPlayer

套件介绍

WSPlayer视频播放器，基于大华协议提供web端通用视频业务功能的JavaScript应用视频相关接口的开发包，能够以极简方式快速在您的应用中集成视频功能，实现无控件化视频取流播放，支持windows、mac、ios、android以及国产化（龙芯+统信）操作系统。

功能介绍

功能项	实时预览	录像回放	录像暂停播放	拖动定位	声音开关	语音对讲	录像快放	录像倒放	手动抓图	规则线	电子放大	云台	视频格式	音频格式
WSPlayer	√	√	√	√	√	√	√	×	√	√	×	√	H264/H265	G711/G726/AAC/MP3

性能规格

硬件配置：i5 9500核显 16G内存

	H264 720P	H264 1080P	H264 2K	H265 720P	H265 1080P	H265 2K	首屏	延时
软解	14	6	2	14	6	2	<2s	<2s
硬解	25	25	16	25	16	9	<2s	<2s

浏览器兼容性

兼容浏览器	Chrome	Firefox	Edge	IE	统信浏览器	360浏览器
WSPlayer	√	√	√	×	√	√

开发指南

下载WSPlayer套件，pc端查看pc-wsplayer-demo[Version]的开发文档。在线开放文档

约束条件

ICC平台的视频子系统最低V1.0.5版本，建议 >= V1.1.2版本的视频子系统。

Chrome104+的浏览器可以使用H264和H265硬解，解码效率高，同时也需要较高版本的显卡（需要显卡支持硬解）。

Chrome92 ~ Chrome103的浏览器若想实现较高性能播放，需通过https环境下且https代理服务（web服务）全局增加响应头跨域隔离字段：Cross-Origin-Embedder-Policy: require-corp；Cross-Origin-Opener-Policy: same-origin；

【运行环境】

单线程以及多线程的硬解、软解对浏览器的要求：

	解码方式	chrome浏览器要求
单线程	H265 硬解	V104+
单线程	H265 软解	V71+
单线程	H264 硬解	V71+
多线程	H265 硬解	V104+
多线程	H265 软解	V96+
多线程	H264 硬解	V96+

【使用说明】

1）ICC平台的视频子系统最低V1.0.5版本，建议 >= V1.1.2版本的视频子系统。

2）Chrome104+的浏览器可以使用H264和H265硬解，解码效率高，同时也需要较高版本的显卡（需要显卡支持硬解）。

3）Chrome92 - Chrome103的浏览器若想实现较高性能播放，需通过https环境下且https代理服务（web服务）全局增加响应头跨域隔离字段：


Cross-Origin-Embedder-Policy: require-corp
    
    Cross-Origin-Opener-Policy: same-origin

常见问题

Q:能否用于H5、微信小程序开发?

A:可支持H5，但是只能使用软解。不支持微信小程序开发。微信小程序每个包都有个最大2M的大小要求，如果超过2M，则需要将文件分到其他包里。但是wsplayer一个解码库文件就有2.5M，因此无法用于微信小程序开发。

Q:安装了新版本的Chrome发现部分视频无法播放。

A:可能是电脑显卡太老，不支持H265硬解，导致部分视频无法播放。建议换台硬件配置较新的电脑，或者在代码里将硬解码改成软解码。

Web无插件-HLS/FLV

套件介绍

HLS/FLV web视频播放方案，提供浏览器视频播放免安装插件的JS开发包，可以快速集成实现WEB端视频应用开发。

能力说明

实时预览

功能项	云台控制	抓图	声音控制	窗口分割	主辅码流切换	智能规则线	语音对讲	电子放大	本地录像	水印
HLS视频播放器	√	×	√	×	√	×	×	×	√	×
FLV视频播放器	√	×	√	×	√	×	×	×	√	×

录像回放

功能项	开始/暂停	倍速	拖动定位	倒放	抓图	声音控制	窗口数切换	电子放大
HLS视频播放器	√	√	√	×	×	√	-	×
FLV视频播放器	×	×	×	×	×	×	×	×

性能规格

性能项	720P H264	720P H265	1080P H264	1080P H265	2K H264	2K H265	首屏延时
HLS视频播放器	20	-	18	-	9	-	9-14s
FLV视频播放器	6	-	6	-	6	-	3-5s
硬件配置	显卡：NVIDIA GeForce GTX 1050 CPU：Intel（R） Core（TM） i5-6500 @ 3.20GHz 3.19GHz

浏览器兼容性

兼容项	Chrome	Firefox	360浏览器	IE浏览器	iOS safari	UOS统信浏览器	Edge
HLS视频播放器	√（>43）	√（>42）	√	×	√	×	√（>15）
FLV视频播放器	√（>39）	√（>42）	√	×	×	×	√（>39）

开发指南

下载套件，查看开发文档在线开放文档

约束条件

通过接口获取url的方式暂不支持内外网环境, 需手动拼接url，手动拼接示例如下：

补充说明

【运行环境】

1）操作系统支持 win7，win10，win11 版本。

【使用说明】

1）播放环境网络状况、硬件配置与视频分辨率都会导致播放过程中出现卡顿情况。

2）目前HLS/FLV web视频播放器移动端的兼容性需结合媒体源扩展的兼容性综合考虑。

3）hls/flv 默认是标准流,可以通过修改PCPS配置支持海康私有码流播放。

常见问题

Q:hls拉流无法播放。

A:可按下面步骤排查:

1）排查确定当前设备通道是否处于在线状态 (设备通道需要在线才能拉流)。

2）检查当前7086端口 7096端口是否可以连接。

3）拼接HLS流后，可以在 VLC 中通过网络串流进行播放。如果VLC无法播放则是流地址拼接错误，检查拼接流url。

DHPlayer 插件播放器

套件介绍

视频Web插件，提供适用于Windows桌面系统，Chrome，Firefox，Edge三大主流浏览器浏览器的实时预览，对讲与录像回放功能，支持Win7，Win10，Win11，由于是单独exe安装使用，所以需要在使用前安装浏览器插件，通过我们的demo进行功能测试，通过API文档进行开发。

能力说明

实时预览

模式	云台	抓图	声音控制	窗口分割	主辅码流切换	智能规则线	语音对讲	电子放大	本地录像下载	水印	变焦放大	顶部按钮自定义	插件遮挡
dhplayer插件式播放	√	√	√	√	√	√	√	√	√	√	√	√	√

录像回放

模式	开始/结束	播放/暂停	倍速	拖动定位	倒放	抓图	声音控制	窗口数切换	电子放大	水印	智能规则线	单帧	回放剪切	精确定位	本地录像下载	rtsp录像下载
dhplayer插件式播放	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√

性能规格

配置	模式	720P H264	720P H265	1080P H264	1080P H265	2K H264	2K H265	首屏	延时
I7 9700 内存 32G Chrome 105	软解	25	25	9	9	4	4	<2s	<2s
I7 9700 内存 32G Chrome 105	硬解	36	36	25	25	9	9	<2s	<2s

开发指南

下载该资源x32位和x64位，内附demo体验。在线开放文档

补充说明

【运行环境】

1）操作系统支持 win7，win10，win11 版本。

2）浏览器支持 chrome，edge，firefox三大主流浏览器，不支持IE，版本均需要为 78版本以上。

3）Demo启动需要node环境支撑，资源包有node安装包可自行安装。

【使用说明】

1）不要频繁在窗口上关闭开启视频拉流，会导致异常崩溃。

2）Mac 电脑不支持插件。

3）插件遮挡DOM元素时，注意在demo中查阅处理遮挡问题的API和案例。

4）基于iframe的情况，我们支持一个iframe嵌入，不支持多级iframe嵌入的使用方式。跨域iframe情况下在demo中下载sgIframe文件进行跨域处理，内附有文件的使用说明。

5）页面支持多个插件的使用。推荐一个页面最好使用一个。

6）插件不支持重叠情况。

7）浏览器拖动不要过快，会使得插件和浏览器短暂分离。

8）鼠标点击浏览器会导致插件闪烁，属于正常现象。

常见问题

Q:视频流拉流失败，有何原因？

A:检查如下内容是否正确:

1）接口返回的地址，端口默认为 9100 (实时流端口) 或 9320(回放流端口)。

2）拉流后，token的有效时间为30s，超时后拉流会失败。

3）每次获取的流只能播一次。再次播放需要重新获取流。

4）内外网映射，确认是否开启了对应的端口。

Q:老版本使用新插件，是否支持无痕升级？

A:如果是老版本需要升级，在不改变业务的情况下需要对API做修改:

1）实时预览 realmonitor方法变更为 realByUrl方法。

2）录像回放 playback 方法变更为 playbackByUrl 方法。

3）对讲 talk 方法变更为 talkByUrl 方法。

Q:用iframe嵌入了有DHPlayer插件的页面，DHPlayer未加载出来。

A:查看控制台:

1）如果有相关跨域的报错，则是因为 iframe (跨域) 嵌入页面导致了跨域，按照【跨域情况】处理。

2）如果没有报错，检查是否有多个层级的 iframe 嵌入的情况。两个及两个以上层级的 iframe 嵌入。

Q:插件位置发生偏移，是什么原因？

A:检查浏览器和屏幕情况:

1）不能打开控制台。

2）低版本插件，只支持屏幕的缩放比例为 100%。

3）是否有iframe嵌入的情况。

Q:播放流的时候，必须要传入 request 那个参数吗，能不能只传流进行播放?

A:我们支持两种模式: 根据【快速开始】进行查看:

1）第三方告知接口和通道相关信息, 插件内部去调用, startReal (实时预览),startPlayBack (录像回放)，startTalk (对讲)。

2）第三方告知url地址和通道Id等信息，插件播放流，realByUrl (实时预览),playbackByUrl (录像回放), talkByUrl (对讲)。

Q:插件播放器失败的错误回调是什么？

A:@createError 我们会返回对应的错误码，让用户合理判断：

1001：插件未安装

1002：电脑系统不支持情况

1003：和插件连接断开

客户端开发包

套件介绍

基于Visual Studio2005开发，支持C/C++开发语言对接的SDK（WIN32/WIN64），主要支持实时视频解码播放、获取实时视频码流、录像码流解码播放、获取录像码流以及录像下载，支持获取平台报警等事件通知，支持控制球机方向、镜头等功能。

能力说明

	基础功能	高级功能																			音视频格式
功能项	实时预览	回放正放	回放暂停/恢复	窗口分割	回放时间定位	本地文件播放	声音调节	智能规则线	语音对讲	录像倒放	录像倍速	录像下载	手动录像	单帧回放	主辅码流切换	YUV数据回调	云台三维定位	云台预置点	云台方向控制	云台镜头操作	视频格式	音频格式
视频SDK	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	√	H264/H265/H264B/H264H	PCM/G711a/G711U/AAC等

性能规格

配置		720P H264	720P H265	1080P H264	1080P H265	2K H264	2K H265	首屏	延时
推荐配置系统：win7/win10 CPU: i5-9500 显卡: Intel(R) UHD Graphics 630	软解	25	25	9	9	4	4	<2s	<2s
	硬解	36	36	25	25	9	9	<2s	<2s

配置

720P H264

720P H265

1080P H264

1080P H265

2K H264

2K H265

首屏

延时

推荐配置
系统：win7/win10

CPU: i5-9500

显卡: Intel(R) UHD Graphics 630

软解

<2s

硬解

<2s

开发指南

下载【视频SDK】套件后，查看开发包内指南文档DSSICCManual.pdf、ICC Demo Manual(C++).pdf、大华平台SDK开发手册(C++版).chm，SDK接口说明和demo使用说明。

约束条件

约束限制	开发工具	运行环境
视频SDK	Visual Studio2005	支持Win7、Win8、Win10、Win11 32/64位以及Windwos Server2008/2012R2、Windows Server2016操作系统

微信公众号申请及开发

套件介绍

微信公众号可以通过跳转已经开发好的小程序实现视频流的播放，或者跳转开发好的H5页面播放视频。

申请注册流程

1）微信公众平台，选择账号注册。

2）填写基本账号信息，包括邮箱和密码。

3）选择注册地，默认中国大陆。

4）选择账号类型，账号类型包括订阅号，服务号以及企业微信。现在比较常用的是订阅号，日常使用比较多。具体区别可以登录微信公众平台查看。

5）接下去选择账号主体类型，账号主体包括企业，媒体，政府，个人，组织。这个根据实际情况进行选择。不同主体对应的能力不同，比如个人主体没有微信支付，微信认证和高级接口的能力；选择完主体类型后，需要填入主体的基本信息，如下是个人与媒体的需要的信息。

6）完成上述步骤后，即可完成公众号申请。申请完成后即可通过管理员登录公众号。

7）公众号开发，首先也需要登录公众平台。然后在自定义菜单中根据需要进行选择，自定义菜单可以配置跳转内容：跳转网页或者小程序，开发者可以通过以下方案实现公众号开发：

方案1：开发好微信小程序，公众号跳转到微信小程序即能实现视频取流播放。

方案2【推荐】：开发好集成H5播放器的视频业务Web页面，公众号通过跳转网页到集成开发的Web页面，实现公众号视频取流播放。

特别注意

跳转网页需要我们填入页面地址，同时页面地址必须是域名而不能是IP端口，这是由腾讯规定公众号的限制，并且要求跳转网页的地址必须在公网上，否则公众号无法通过浏览器进行访问预览。

H5播放器适配浏览器

	Safari	Chrome	华为浏览器	荣耀浏览器	小米浏览器	红米浏览器	OPPO浏览器	vivo浏览器	腾讯Android X5内核（QQ、微信、小程序Webview）
预览	√	√	√	√	√	√	√	√	√
对讲	√	√	√	√	√	√	√	×	×
备注						配置采样率以及降噪可获取StreamMedia的回调	配置采样率以及降噪可获取StreamMedia的回调

ICC SDK-Android

套件介绍

ICC SDK 是一套基于平台开发的套件，主要功能包括平台登录、预览、对讲、回放等。

能力说明

实时预览

云台	抓图	录像	主辅码流切换	声音控制	窗口分割	电子放大	智能规则线	录像下载	红外测温	报警输出
√	√	√	√）	√	√	√	√	√	√	√
暂停/恢复	鱼眼矫正	语音对讲	视频格式	音频格式
√	√	√	H264/H265	AAC/PCM/G系列

录像回放

播放/暂停	抓图	录像	拖动定位	倒放	倍速	声音控制	窗口切换	电子放大	智能规则线	录像下载
√	√	√	√	√	√	√	√	√	√	√
单帧进退	视频格式	音频格式
√	H264/H265	AAC/PCM/G系列

性能规格

配置	720P H264	720P H265	1080P H264	1080P H265	2K H264	2K H265	首屏
系统：iOS10及以上系统	16路	16路	16路	16路	4路	4路	<2s

开发指南

下载该资源包，包含ICC-SDK及demo。

ICC SDK-IOS

套件介绍

ICC SDK是一套基于平台开发的套件，主要功能包括平台登录、预览、对讲、回放等。

能力说明

实时预览

云台	抓图	录像	主辅码流切换	声音控制	窗口分割	电子放大	智能规则线	录像下载	红外测温	报警输出	暂停/恢复	鱼眼矫正	语音对讲	视频格式	音频格式
√	√	√	√	√	√	√	√	√	√	√	√	√	√	H264/H265	AAC/PCM/G系列

录像回放

播放/暂停	抓图	录像	拖动定位	倒放	倍速	声音控制	窗口切换	电子放大	智能规则线	录像下载	单帧进退	视频格式	音频格式
√	√	√	√	√	√	√	√	√	√	√	√	H264/H265	AAC/PCM/G系列

性能规格

配置	720P H264/H265	1080P H264/H265	2K H264/H265	首屏
系统：Android5.0及以上硬件配置：高通骁龙410及以上，麒麟650及以上，联发科Helio P30及以上	16路	16路	4路	<2s

开发指南

下载开发文档，demo可进行调试参考。demo包含了快速集成方法、播放组件解码库以及部分案例代码展示。

常见问题

Q:拉流失败。

A:按下面步骤排查:

1）主、辅码流参数是否配对？若当前设备只配了主码流，则用户只能去拉取主码流。

2）trackID问题，部分平台推流会受trackId入参影响而不推流。

3）排查网关问题，部分现场环境可能在防火墙上或运营商方面对网关作了限制，会有某一运营商网络可以拉流，而其他运营商网络不能拉流的现象（如，移动网络可以拉流，而电信联通网络不能拉流）。

Q:码流解析失败。

A:排查播放解码库是否支持当前码流数据，抓包将码流提取出来，使用大华工具管家中的大华播放器进行播放。

Q:录像查询失败。

A:录像分为设备录像/中心录像，设备录像存储在设备上，中心录像则存储在服务器中，可通过录像计划进行配置。首先排查录像计划与查询参数是否匹配（默认查询中心录像）；录像播放时间与实际不对应，若时差较小，排查设备校时是否准确，若时差较大则考虑时区是否一致（终端与服务时区）。

Q:获取组织、设备失败。

A:登录管理端，查看当前用户所对应的角色是否配置了设备权限。

ICC 小程序

套件介绍

uni-app 是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台，官网地址：uni-app。

开发指南

1 开发环境

uni-app 提供了两种快速上手的方案：

1）使用HBuilder可视化界面作为 IDE 内置了各种环境开箱即用，不需要再配置 Node.js。

2）如果不想使用 HBuilder 则需要配置vue-cli 命令行，并使用其他编辑器开发，具体见文档通过vue-cli命令行。

1.1 通过HBuilderX 开发

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

1.1.1 创建uni-app

在点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）：

1.1.1-创建uni-app

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。

uni-app自带的模板有默认的空项目模板、Hello uni-app 官方组件和API示例，还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。

1.1.2 运行uni-app

在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。

1.1.2-运行uni-app

注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。

1.1.2.1-设置微信开发者工具路径

注意：微信开发者工具需要开启服务端口在微信工具的「设置」- 「安全」

1）如果是第一次使用，需要配置开发工具的相关路径。点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的路径。

2）微信小程序工具需要配置允许权限，不然HBuilder无法调用微信小程序开发工具的命令行。

3）支付宝/百度/字节跳动/360小程序工具，不支持直接指定项目启动并运行。因此开发工具启动后，请将 HBuilderX 控制台中提示的项目路径，在相应小程序开发者工具中打开。

4）如果自动启动小程序开发工具失败，请手动启动小程序开发工具并将 HBuilderX 控制台提示的项目路径，打开项目。运行的快捷键是Ctrl+R。

1.1.3 发布为微信小程序

1）申请微信小程序AppID，参考：微信教程。

2）在HBuilderX中顶部菜单依次点击 "发行" => "小程序-微信"，输入小程序名称和appid点击发行即可，如果手动发行，则点击发行按钮后，会在项目的目录 unpackage/dist/build/mp-weixin 生成微信小程序项目代码。在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” => “发布” 小程序标准流程，逐步操作即可，详细查看：微信官方教程。如果在发行界面勾选了自动上传微信平台，则无需再打开微信工具手动操作，将直接上传到微信服务器提交审核。

1.2 通过vue-cli命令行开发

除了HBuilderX可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。

1.2.1 环境安装

全局安装 vue-cli


xxxxxxxxxx
    
    
    
    
        
            
            
            npm install -g @vue/cli

1.2.2 创建uni-app

使用Vue3/Vite版：

1）创建以 javascript 开发的工程（如命令行创建失败，请直接访问gitee


xxxxxxxxxx
    
    
    
    
        
            
            
            npx degit dcloudio/uni-preset-vue#vite my-vue3-project

复制代码

2）创建以 typescript 开发的工程（如命令行创建失败，请直接访问gitee下载模板）


xxxxxxxxxx
    
    
    
    
        
            
            
            npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

注意

1）Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0

2）如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效）；HBuilderX Mac 版本菜单栏左上角 HBuilderX->偏好设置->运行配置->node路径；HBuilderX Windows 版本菜单栏工具->设置->运行配置->node路径。

1.2.3 运行、发布uni-app


xxxxxxxxxx
    
    
    
    
        
            
            
            npm run dev:%PLATFORM%
        
        npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

值	平台
app-plus	app平台生成打包资源（支持npm run build:app-plus，可用于持续集成。不支持run，运行调试仍需在HBuilderX中操作）
h5	H5
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	字节跳动小程序
mp-lark	飞书小程序
mp-qq	qq 小程序
mp-360	360 小程序
mp-kuaishou	快手小程序
mp-jd	京东小程序
mp-xhs	小红书小程序
quickapp-webview	快应用(webview)
quickapp-webview-union	快应用联盟
quickapp-webview-huawei	快应用华为

可以自定义更多条件编译平台，比如钉钉小程序，参考package.json文档。

1.3 cli创建项目和HBuilderX可视化界面创建项目的区别

1）cli创建的项目，是传统的node项目结构。工程代码在src目录下，编译器在项目下，编译结果在dist目录下。

2）HBuilderX可视化创建的项目，是一种免node开发概念。工程代码在项目目录下，编译器在HBuilderX目录下而不是项目下，编译结果在项目的unpackage目录下。

2 开发流程

2.1 账号

小程序账号可以管理小程序，如发布、版本管理、成员管理等功能。小程序部分 API 存在权限校验，需要在小程序后台管理权限。

如果你所在的开发团队从未接触过微信小程序，那么在开发之前，需要先申请小程序账号。如果已注册过小程序账号，在后台通过「成员管理」->「项目成员」添加开发者到小程序，然后再进行开发工作。

2.1-添加成员

2.2 权限申请

注意：该章节在操作过程中要求有较高权限，可能存在多个地方需要扫码，建议由小程序管理员进行操作。

小程序的一些组件/API 如live-player只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」- 「开发管理」 -「接口设置」中自助开通该组件权限，开通成功后需要再添加小程序类目。一个小程序可以设置多个类目，但是只能有一个主类目。

2.2.1 小程序后台

进入小程序后台，在「开发」 - 「开发管理」

2.2.1-小程序后台开发设置

选择「接口设置」后，点击「开通」，再准备需要的材料等待审核通过就可以使用接口了。

注：live-player 组件有多个类目均支持开通，根据小程序属性准备相关材料申请。

2.2.1.1-开通API权限

服务类目列表与申请材料要求：小程序类目。

2.2.2 类目设置

成功开通小程序类目后，需要在小程序「基本设置」（导航栏点击小程序图标即可进入）。

2.2.2.1 进入小程序基础设置页面。选择「服务类目」，如下图所示：

2.2.2.1-服务类目设置

2.2.2.2 进入详情页面后，可点击「添加类目」按钮新增类目

注意：每个月都有限定的添加次数，所以在添加/删除时要再三考虑清楚。

2.2.2.2-详情页设置服务类目

2.2.2.3 点击「添加类目」按钮后，使用小程序管理员的微信扫码完成身份认证

2.2.2.3-添加服务类目

2.2.2.4 添加所需要的服务类目

注意：这里可能存在搜索不到的情况，可以按照一级分类逐级选择设置。

成功添加对应服务类目后，在「真机调试」中测试是否有权限使用 live-player 组件。

2.2.2.4-设置小程序服务类目

2.3 开发框架

uni-app 是一个使用 Vue.js 的框架，现版本Vue3已经相对稳定可以适用于生产环境，因此在新项目中都建议选择Vue3作为主要版本来开发应用。相对于Vue2，Vue3有如下优势：

1）更快的渲染速度和更小的包体积：Vue3 使用了新的响应式引擎，它可以更快地跟踪数据变化并更新视图。同时，Vue3 的包体积也比 Vue2 更小，因为它使用了模块化的架构，使得开发者可以按需加载需要的功能。

2）更好的组合式 API：Vue3 的组合 API 可以更好地组织和重用逻辑代码，使得代码更加清晰和易于维护。

3）更好的性能和优化：Vue3 在性能和优化方面也有不少改进，例如使用了更高效的模板编译器、更快的虚拟 DOM 算法和更好的静态分析等技术。

4）更强大的构建工具：Vue3 项目已全面拥抱 Vite 进行项目构建，它提供了更快的开发体验和更高的渲染性能。

2.3.1 UI库

uni-ui是DCloud提供的一个跨端 UI 库，它是基于 vue 组件的、flex 布局的、无 dom 的跨全端 UI 框架。这个官方库提供的 UI 组件，完全可以满足多平台小程序开发中的业务需求。

更重要的一点是，uni-ui 中的每个组件都是独立的。当 uni-ui 部分组件需求不满足使用时，可以很容易的直接 clone 到项目中根据需求做定制（在插件市场中搜索下载对应组件），需要注意的是基础组件如 scroll-view 未开源，也不建议直接修改。

2.3.2 CSS

目前前端开发中，CSS 都会选择扩展语言，如 sass 和 less等预处理语言来代替CSS的编写。它们都可以提供以下特性来增强 CSS 的开发效率：

1）变量和常量。

2）嵌套规则。

3）混合器和继承。

4）函数和操作符。

5）导入和模块化。

2.3.3 插件市场

uni-app 框架为开发者提供了一个共享插件和组件的平台，在插件市场可以根据需求下载各种插件和组件。

其中也包含 uni-ui 扩展组件可下载：

3 拉流方式

在微信小程序中，能够有能力播放 rtmp 流的组件只有 live-player ，调试之前先参照 2.2节给账号申请权限。live-player 提供了一系列的LivePlayerContext API，帮助开发者实现全屏、静音、播放、暂停等基础能力。

3.1 预览实时流

3.1.1 拼接方式

拼接规则


xxxxxxxxxx
    
    
    
    
        
            
            
            rtmp://平台IP:端口/live/cameraid/设备编号%24通道号;substream=码流类型

拼接说明

1）端口：1975。

2）设备编号：平台上设备编号，例如 1000004。

3）通道号：设备下通道，从 0（通道一）开始。

4）码流类型：1 代表主码流，2 代表辅码流

示例

本级设备拉流

以通道1000004$1$0$0为例


xxxxxxxxxx
    
    
    
    
        
            
            
            rtmp://10.35.239.168:1975/live/cameraid=1001337%240;substream=1

级联设备拉流

以通道1000004@001$1$0$3为例


xxxxxxxxxx
    
    
    
    
        
            
            
            rtmp://10.35.239.168:1975/live/cameraid=1001337%40001%240;substream=1

%40 是域标识符号@的转义符， %24 是$的转义符

3.1.2 接口方式

接口地址


xxxxxxxxxx
    
    
    
    
        
            
            
            /evo-apigw/admin/API/video/stream/realtime

请求方式

数据提交格式


xxxxxxxxxx
    
    
    
    
        
            
            
            application/json

请求参数

参数名	必选	类型	说明
data	true	string	Json串
- channelId	true	string	视频通道编码
- streamType	true	string	码流类型：1=主码流, 2=辅码流，3=辅码流2
- type	true	string	hls,hlss,flv,flvs,rtmp

请求示例


xxxxxxxxxx
    
    
    
    
        
            
            
            {
        
          "data": {
            "channelId": "1000067$1$0$0",
            "streamType": "1",
            "type": "rtmp"
          }
        }

返回参数

名称	类型	说明
code	int	错误代码
desc	string	结果描述
data	string	Json串
- url	string	拉流url

返回示例


xxxxxxxxxx
    
    
    
    
        
            
            
            {
        
          "code": 1000,
          "desc": "Success",
          "data": {
            "url": "rtmp://icc-app-testing.dah-demo.com:1975/live/cameraid=1000809$0;substream=1"
          }
        }

3.2 录像回放流

3.2.1 拼接方式

中心录像拼接规则


xxxxxxxxxx
    
    
    
    
        
            
            
            rtmp://[服务IP]:1975/vod/center/cameraid=[摄像头ID];substream=[码流类型];recordtype=[中心录像类型];begintime=[开始时间];endtime=[结束时间]

设备录像拼接规则


xxxxxxxxxx
    
    
    
    
        
            
            
            rtmp://[服务IP]:1975/vod/device/cameraid=[摄像头ID];substream=[码流类型];recordtype=[设备录像类型];begintime=[开始时间];endtime=[结束时间]

拼接说明

1）[服务IP]：MES所在服务器的ip地址，若MES是分布式部署的话，IP为MESGW服务所在服务器的IP。

2）[服务端口]：MES服务监听的http端口，默认7086，https 端口是7096，若MES是分布式部署的话，端口为MESGW服务监听的 Port。

3）[摄像头ID]：请参看大华标准URL文档说明，一般型如：1000000%40001%240 1000000代表设备编号，001代表级联号，两者间以“%40”即“@”分隔 %24代表符号“$”，后面的0代表通道1（从0开始）。

4）[码流类型]：1表示主码流，2表示辅码流。

5）[中心录像类型]：1表示普通录像；2表示报警录像；81表示补录录像；82表示报警预录录像。

6）[设备录像类型]：2报警录像，3 移动侦测类型， 6普通录像类型。

7）[开始时间] 和 [结束时间] ：录像块的开始和结束时间，int类型表示的，单位秒。

示例

以视频通道1000018$1$0$0为例

中心录像拼接示例


xxxxxxxxxx
    
    
    
    
        
            
            
            rtmp://10.35.239.81:1975/vod/center/cameraid=1000018%240;substream=1;recordtype=1;begintime=1642475411;endtime=1642648211

设备录像拼接示例


xxxxxxxxxx
    
    
    
    
        
            
            
            rtmp://10.35.239.81:1975/vod/device/cameraid=1000018%240;substream=1;recordtype=1;begintime=1642475411;endtime=1642648211

3.2.2 接口方式

接口地址


xxxxxxxxxx
    
    
    
    
        
            
            
            /evo-apigw/admin/API/video/stream/record

请求方式

数据提交格式


xxxxxxxxxx
    
    
    
    
        
            
            
            application/json

请求参数

参数名	必选	类型	说明
data	true	string	Json串
- channelId	true	string	视频通道编码
- streamType	true	string	码流类型：1=主码流, 2=辅码流，3=辅码流2
- type	true	string	支持hls/hlss/rtmp格式， flv录像类型不支持
- recordType	true	string	录像类型：1 表示普通录像
- beginTime	true	string	开始时间,格式:"2020-11-12 11:10:11"
- endTime	true	string	结束时间,格式:"2020-11-12 23:10:11"
- recordSource	true	string	录像来源：2：设备 device,3：中心center

请求示例


xxxxxxxxxx
    
    
    
    
        
            
            
            {
        
          "data": {
            "channelId": "1000018$1$0$0",
            "streamType": "1",
            "type": "hls",
            "recordType": "1",
            "beginTime": "2022-1-18 11:10:11",
            "endTime": "2022-1-20 11:10:11",
            "recordSource": "3"
          }
        }

返回参数

名称	类型	说明
code	int	错误代码
desc	string	结果描述
data	string	Json串
- url	string	拉流url

返回示例

RTMP示例


xxxxxxxxxx
    
    
    
    
        
            
            
            {
        
          "code": 1000,
          "desc": "Success",
          "data": {
            "url": "rtmp://xx.xx.xx.xx:1975/vod/center/cameraid=1000018$0;substream=1;recordtype=1;begintime=1642475411;endtime=1642648211"
          }
        }

3.3 关键代码

在实际开发中，一般不会调用 play 方法，所以直接给 src 赋值即可。

html


xxxxxxxxxx
    
    
    
    
        
            
            
            <live-player
        
          autoplay
          id="player"
          :muted="muted"
          :src="playerUrl"
          mode="RTC"
          object-fit="contain"
          @statechange="playerCodeChange"
        >
          <image class="waitting-icon" :src="waittingIcon" v-if="isShowLoading" />
          <cover-view v-if="isFullscreen" class="full-img-div" @click="closeFullscreen">
            <cover-image
              src="../../static/images/preview/full_screen_close.png"
              style="width: 32px; height: 32px;"
            ></cover-image>
          </cover-view>
        </live-player>

script


xxxxxxxxxx
    
    
    
    
        
            
            
            const livePlayerContext = uni.createLivePlayerContext('player')

3.3.1 播放代码


x
const play = ({ _channelCode = '', streamType = '1' }) => {
    
      return new Promise((resolve, reject) => {
        let code = channelCode.value
    
        if (_channelCode !== '') {
          code = _channelCode
        }
        getRtmpUrl(code, streamType).then((rtmpUrl) => {
          cacheRecordOnce.value = false
          playerUrl.value = rtmpUrl // 赋值给live-player
          resolve()
        })
      })
    }

3.3.2 抓图代码


xxxxxxxxxx
    
    
    
    
        
            
            
            const snapshot = () => {
        
          livePlayerContext.snapshot({
            sourceType: 'stream',
            quality: 'raw',
            success(res) {
              const tmpPath = res.tempImagePath
              uni.saveImageToPhotosAlbum({
                filePath: tmpPath,
                success() {
                  uni.showToast({
                    icon: 'success',
                    title: '已保存到相册',
                  })
                },
              })
            },
          })
        }

3.3.3 全屏


xxxxxxxxxx
    
    
    
    
        
            
            
            const fullscreen = () => {
        
          livePlayerContext.requestFullScreen({
            direction: 90,
            success: () => {
              isFullscreen.value = true
            },
          })
        }