大华监控前端实时预览（踩坑）

大家好，欢迎来到IT知识分享网。

ps:如果安装后页面仍然报找不到插件的错，或者重启电脑后播放视频显示找不到插件，多半是因为插件没有运行，1.安装的时候，最后询问是否允许启动，一定要选允许
2.如果已经选了不允许，在安装包里双击运行这个，插件就运行了（每次都要手动点击运行，建议卸载重装，执行第一点的方法）

2. 安装完之后会有个demo文件，可以直接点开index.html里面有例子和一些api也可以看，也可以在这里试试，填写后端给你的通道号和rtsp地址能不能播放，*本地测试接口未通的情况下需要电脑链接摄像头的网线接口

3.可以播放的话，就可以把视频接入项目中了，demo里面这个文件里面有使用方法可以看看

3.1 引入
复制DHPlayer.js进项目里，找个地方放，我放在util文件下的
在main.js 引入

import DHPlayer from '@/utils/DHPlayer' Vue.use(DHPlayer) 

 <DHPlayer ref="dhplayer" video-id="dhplayer" :window-type="0" @createSuccess="createSuccess" /> 

*在网上搜的例子用到createSuccess，我们也需要找个方法，这个初始化成功之后，才能给视频播放地址，否则会报错。但是这个方法一直没被调用，可能是引入dhplayer.js版本问题，后面看源码就是没emit出去，于是手动改了源码（格式化一下dhplayer.js ,找到找个方法，加个emit）

 createSuccess(){ 
    this.$refs.dhplayer.setRealTime({ 
    channelId: this.channelId,//后端给通道号 stdRtsp: true, // 默认false path: `${ 
   this.playerUrl}?token=${ 
   this.playerToken}`,//后端给的地址，看你们咋拼接，需不需要token }); } 

4.对讲
对讲直接调后端接口+大华api接口就可以了
逻辑：点击开始对讲后，调后端接口，后端返回参数给你后，调setTalk方法。
结束对讲，再调后端接口就行了，不需要再调setTalk方法。所以难点都在后端

 this.$refs.dhplayer.setTalk({ 
    path: `${ 
   data.url}?token=${ 
   data.token}`, //restp地址 audioType: data.audioType, // 音频类型 int 0-default 1-PCM 2-G711a 3-AMR 4-G711U 5-G726 6-AAC 7-G722 8-G711 audioBit: data.audioBit, // 位数 int 8 16 sampleRate: data.sampleRate, // 采样频率 8000 16000 32000 48000 8192 talkType: 1, // 对讲类型： 1 设备 2通道 }); 

剩下的按照文档的例子来就行了。

放了一个demo包，可以运行下里面index.html 可以看页面功能对应的源码，我在网页自己下载的demo好像没这个功能，所以放上来你们可以看看。