vue/react+wsplayer对接大华的rtsp实时预览视频流

小羊aa

于 2024-09-25 17:38:41 发布

阅读量705

点赞数 4

文章标签： vue.js react.js 前端

本文链接：https://blog.csdn.net/weixin_45960031/article/details/142525792

版权

1.首先在大华官网icc开放平台下载这个前端demo

里边有需要使用的工具包
在这里插入图片描述

2.WSPlayer文件引入

将WSPlayer/ 文件夹放到项目的静态资源中，这里使用的是react，和vue项目位置是一样的
在这里插入图片描述
修改index.html文件

如果跟我位置一样可以直接粘贴

<link rel="stylesheet" type="text/css" href="/dhPro/WSPlayer/player.css">
<script type="text/javascript" src="./dhPro/WSPlayer/PlaySDKInterface.js"></script>
<script type="text/javascript" src="./dhPro/WSPlayer/WSPlayer.js"></script>

3.icc文件引入

我这里个人习惯是放在utils目录下
在这里插入图片描述

4.封装大华播放器DHPlayer.js

这里也可以直接使用（直接使用请跳到第6步），我是封装了一层方便调用


import PlayerManager from "../icc/PlayerManager.js";

export default class DHPlayer {
    constructor(domid) {
        this.dom = document.getElementById(domid);
        this.init(domid)
    }
    init(domid) {
        const player = new PlayerManager({
            el: domid,
            type: 'real', /** real - 实时预览  record - 录像回放 **/
            maxNum: 1,  /** 一个播放器上限能播放的路数，可根据实际情况设置，支持 1 4 9 16 25 **/
            num: 1,   /** 初始化，页面显示的路数 **/
            showControl: false, /** 是否显示工具栏，默认显示 **/
            isIntranet: true, // 固定写死 true
            showRecordProgressBar: true, // 录像回放时，录像的进度条是否需要
            prefixUrl: '../dhPro',
            importLoad: true,
            receiveMessageFromWSPlayer: (methods, data) => { /* 回调函数，可以在以下回调函数里面做监听 */
              switch (methods) {
                case 'initializationCompleted':
                  player.playRealVideo({
                    channelList: [{
                    }],
                    streamType: 1, // {Number} 码流类型 1-主码流 2-辅码流
                    windowIndex: 0 // {Number} 播放窗口序号（从0开始）
                })
                console.log(data) // 通道数据
                  break;
                case "realSuccess": // 实时预览成功
                  console.log("实时预览成功")
                  break;
                case "realError": // 实时预览失败
                  console.log("实时预览失败")
                  break;
                case "talkError": // 对讲失败
                  console.log("对讲失败");
                  break;
                case 'selectWindowChanged': // 选中的窗口发生改变
                  console.log(data, "返回窗口信息")
                  break;
                case 'windowNumChanged': // 播放器显示的路数发生改变
                  console.log(data, "返回显示的窗口数量")
                  break;
                case 'closeVideo': // 视频关闭回调
                  // 点击关闭按钮引发的视频关闭进行提示
                  // 切换视频引发的视频关闭不进行提示
                  if (!data.changeVideoFlag) {
                    console.log(`窗口${data.selectIndex}的视频已关闭`)
                  }
                  break;
                case 'statusChanged': // 视频状态发生改变
      
                  break;
                case 'errorInfo': // 错误信息汇总
                  console.log(data, "可打印查看错误消息");
              }
            }
        })
        this.player = player;
    }
    startPlayer(rtspURL) {
        let arr = rtspURL.match(/^rtsp:\/\/([^\/:]+)(:\d*)?/)
        const host = arr[1];
        const port = arr[2] || '';
        let wsStr = `ws://${host}${port}`
        // console.log('?????拿到了吗', rtspURL, wsStr)
        this.player.realByUrl({
            playType: "url", // 写死url
            rtspURL,
            wsURL: wsStr,
            // wsURL: "ws://119.36.17.241:9100",
            channelId: 'channelId', //必传，通道id
            streamType: "1", // 1-主码流  2-辅码流 (可不传，默认主码流)
            selectIndex: "0",
            // playerAdapter: "selfAdaption",
            channelData: {  // 建议传, 通道树信息
                // id: channelCode, // {String} 通道编码
                // deviceCode: deviceCode, // {String} 设备编码
                // deviceType: deviceType, // {String} 设备类型
                // channelSeq: channelSeq, // {String|Number} 通道序号
            }, // 选传
          });
    }
    destroy() {
        this.player.destroy();
    }
}

5.对接实时视频

/*
接口返回的格式如下：
rtsp://10.10.8.5:9100/dss/monitor/param/cameraid=1002241%240%26substream=1?token=16348
前端传参需要rtsp和ws地址，ws的地址就是rtsp后边带的这一串：10.10.8.5:9100
*/

import DHPlayer from '@/utils/player/DHPlayer';

//使用封装好的类
let DHPlayerObj = null;
const DHplayVideo = () => {
  DHPlayerObj =  new DHPlayer("videoElement")
  startPlayer()
}
const DHstopPlay = () => {
  DHPlayerObj?.destroy();
}
function startPlayer() {
  getCameraPlayUrl(playitem.id).then(res => {
    if (!res.data) return;
      if (!DHPlayerObj) {
        console.log("不能播放，请先初始化！！！！！");
        return;
      }
      DHPlayerObj.startPlayer(res.data);
  });
}

6.不封装直接使用

注意prefixUrl和 importLoad这两个参数！！

// html
<div className="centeredVideo" id={"videoElement" + playitem.id} style={{ width: '100%', height: '100%' }}>  </div>

//js
import PlayerManager from "../icc/PlayerManager.js";
const DHPlayer = new PlayerManager({
            el: "videoElement" + playitem.id,
            type: 'real', /** real - 实时预览  record - 录像回放 **/
            maxNum: 1,  /** 一个播放器上限能播放的路数，可根据实际情况设置，支持 1 4 9 16 25 **/
            num: 1,   /** 初始化，页面显示的路数 **/
            showControl: false, /** 是否显示工具栏，默认显示 **/
            isIntranet: true, // 固定写死 true
            showRecordProgressBar: true, // 录像回放时，录像的进度条是否需要
            prefixUrl: '../dhPro', //注意文件位置，必填
            importLoad: true, // 必填！！
            receiveMessageFromWSPlayer: (methods, data) => { /* 回调函数，可以在以下回调函数里面做监听 */
              switch (methods) {
                case 'initializationCompleted':
                  player.playRealVideo({
                    channelList: [{
                    }],
                    streamType: 1, // {Number} 码流类型 1-主码流 2-辅码流
                    windowIndex: 0 // {Number} 播放窗口序号（从0开始）
                })
                console.log(data) // 通道数据
                  break;
                case "realSuccess": // 实时预览成功
                  console.log("实时预览成功")
                  break;
                case "realError": // 实时预览失败
                  console.log("实时预览失败")
                  break;
                case "talkError": // 对讲失败
                  console.log("对讲失败");
                  break;
                case 'selectWindowChanged': // 选中的窗口发生改变
                  console.log(data, "返回窗口信息")
                  break;
                case 'windowNumChanged': // 播放器显示的路数发生改变
                  console.log(data, "返回显示的窗口数量")
                  break;
                case 'closeVideo': // 视频关闭回调
                  // 点击关闭按钮引发的视频关闭进行提示
                  // 切换视频引发的视频关闭不进行提示
                  if (!data.changeVideoFlag) {
                    console.log(`窗口${data.selectIndex}的视频已关闭`)
                  }
                  break;
                case 'statusChanged': // 视频状态发生改变
      
                  break;
                case 'errorInfo': // 错误信息汇总
                  console.log(data, "可打印查看错误消息");
              }
            }
        })
  /*
  rtspURL为接口返回数据
  格式如下：
	rtsp://10.10.8.5:9100/dss/monitor/param/cameraid=1002241%240%26substream=1?token=16348
  前端传参需要rtsp和ws地址，ws的地址就是rtsp后边带的这一串：10.10.8.5:9100
*/
startPlayer(rtspURL) {
     let arr = rtspURL.match(/^rtsp:\/\/([^\/:]+)(:\d*)?/)
     const host = arr[1];
     const port = arr[2] || '';
     let wsStr = `ws://${host}${port}`
     // console.log('?????拿到了吗', rtspURL, wsStr)
     this.player.realByUrl({
         playType: "url", // 写死url
         rtspURL, // 必填
         wsURL: wsStr, // 必填
         // wsURL: "ws://119.36.17.241:9100",
         channelId: 'channelId', //必传，通道id
         streamType: "1", // 1-主码流  2-辅码流 (可不传，默认主码流)
         selectIndex: "0",
         // playerAdapter: "selfAdaption",
         channelData: {  // 建议传, 通道树信息
             // id: channelCode, // {String} 通道编码
             // deviceCode: deviceCode, // {String} 设备编码
             // deviceType: deviceType, // {String} 设备类型
             // channelSeq: channelSeq, // {String|Number} 通道序号
         }, // 选传
       });
 }