vue使用wsplayer对接大华实时视频流-h264、h265

1. 前往大华 ICC 开放平台：ICC 开放平台 下载 WSPlayer 套件

2. 在项目静态资源中引入 demo 中的 WSPlayer 文件   层级如下：

然后在 index.html 中进行引入

3. 将 demo 中的 /public/icc 拷贝到项目中，然后引用并创建播放器

引入  PlayerManager

import PlayerManager from “@/utils/icc/PlayerManager”;

4. 创建播放器

 data() {
    return {realplayer: null,};
  },

initializePlayer() {
    this.realPlayer = new PlayerManager({
        el: "ws-real-player", /** 实时预览容器 id，创建多个播放器，传入不同的容器 id 即可 **/
        type: 'real', /** real - 实时预览  record - 录像回放 **/
        maxNum: 4,  /** 一个播放器上限能播放的路数，可根据实际情况设置，支持 1 4 9 16 25 **/
        num: 1,   /** 初始化，页面显示的路数 **/
        showControl: true, /** 是否显示工具栏，默认显示 **/
        showIcons: { // 自定义按钮，需要的请配置 true, 不需要的按钮请配置 false，所有的按钮属性都要写上
            streamChangeSelect: true, // 主辅码流切换
            talkIcon: true, // 对讲功能按钮
            localRecordIcon: true, // 录制视频功能按钮
            audioIcon: true, // 开启关闭声音按钮
            snapshotIcon: true, // 抓图按钮
            closeIcon: true, // 关闭视频按钮
        },
    openIvs: true, // true- 开启智能帧 / 规则线 / 目标框, false- 不显示
    showRecordProgressBar: true, // 录像回放时，录像的进度条是否需要
    useH265MSE: true // true- 表示硬解  false- 软解 默认不传该字段
    receiveMessageFromWSPlayer: (methods, data, err) => { /* 回调函数，可以在以下回调函数里面做监听 */
        switch(methods) {
            case 'initializationCompleted':
                // 初始化完成，可调用播放方法（适用于动态加载解码库）// 若回调未触发时就使用实时预览 / 录像回放，则无法播放。// 此时我们可以调用一个
                realPlayer.playRealVideo({
                    channelList: [{id: '100000$1$0$0', // {String} 通道编码 -- 用于预览，必填
                        deviceCode: deviceCode, // {String} 设备编码 -- 用于对讲，对讲必填，无对讲功能可不填
                        deviceType: deviceType, // {String} 设备类型 -- 用于对讲，对讲必填，无对讲功能可不填
                        channelSeq: channelSeq, // {String|Number} 通道序号 -- 用于对讲，对讲必填，无对讲功能可不填
                        cameraType: cameraType, // {String|Number} 摄像头类型 -- 用于云台，云台必填，无云台功能可不填
                        capability: capability, // {String} 能力集 -- 用于云台，选填
                    }],
                    streamType: 1, // {Number} 码流类型 1- 主码流 2- 辅码流
                    windowIndex: 0 // {Number} 播放窗口序号（从 0 开始）})
                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, "可打印查看错误消息");
        }
    }
})
}

 startReal(channelId) {if (!this.realplayer) {// document.querySelector("#desc").innerHTML= "不能播放，请先初始化插件！！！！！"
        console.log("不能播放，请先初始化！！！！！");
        return;
      }
      this.realplayer.realByUrl({
        playType: "url", // 写死 url
        rtspURL: "rtsp 地址",
        wsURL: "websocket 连接",
        channelId: "channelId", // 必传，通道 id
        streamType: "1", // 1- 主码流  2- 辅码流 (可不传，默认主码流)
        selectIndex: "0",
        playerAdapter: '窗口样式："selfAdaption"自适应 |"stretching"拉伸',
      });
    },