vue2播放（大华-wsplayer）及时视频流-h264、h265

写视频流干系项目vlc能省去许多贫苦：所在如下
 官方下载：VLC media player，最棒的开源播放器 - VideoLAN

一、video.js + hls.js
 不知是是不是我个人缘故原由、h264可以正常播放、h265就歇了，果断换播放器

二、视频播放器-EasyPlayer
拉流方式：hls
长处：h264、h265、h265+ 及各种小牌摄像头都能播放
缺点：h264很流通、h265稍卡、h265+ 硬解码两个视频cpu直接拉满
所在如下：
EasyPlayer.js: EasyPlayer H5版，支持http、rtmp、flv、hls等多种协议，支持全平台、全终端（Windows、Linux、Android、iOS）播放 (gitee.com)
用法比力简朴，可以和video一样直接作为标签使用。
三、视频播放器-wsplayers（由于公司是和大华有相助、通过大华官网看他们播放器很流通.于是）
拉流方式：rtsp
长处：h264、h265、h265+ 及各种小牌摄像头都能播放
缺点：不是通过大华拉的视频流不确定可否播放...
大华icc开放平台：ICC开放平台
点击链接->在线开放文档->快速入门->下载最新demo->内里的demo可以测试视频流是否能正常播放（不能的话就诘责后端）
上代码——————————————————————————
层级如下：

然后在引入PlayerManager的页面 new PlayerManager创建播放器实例

1. // vue
2. initializePlayer(video, index) {
3.       const playerId = 'ws-real-player_' + index;
4.       console.log(playerId, 'playerId')
5.       realPlayer = new PlayerManager({
6.       el: "ws-real-player", /** 实时预览容器id，创建多个播放器，传入不同的容器id即可 **/
7.       type: 'real', /** real - 实时预览  record - 录像回放 **/
8.       maxNum: 4,  /** 一个播放器上限能播放的路数，可根据实际情况设置，支持 1 4 9 16 25 **/
9.       num: 1,   /** 初始化，页面显示的路数 **/
10.       showControl: true, /** 是否显示工具栏，默认显示 **/
11.       showIcons: { // 自定义按钮，需要的请配置true, 不需要的按钮请配置false，所有的按钮属性都要写上
12.         streamChangeSelect: true, // 主辅码流切换
13.         talkIcon: true, // 对讲功能按钮
14.         localRecordIcon: true, // 录制视频功能按钮
15.         audioIcon: true, // 开启关闭声音按钮
16.         snapshotIcon: true, // 抓图按钮
17.         closeIcon: true, // 关闭视频按钮
18.     },
19.       openIvs: true, // true-开启智能帧/规则线/目标框, false-不显示
20.       showRecordProgressBar: true, // 录像回放时，录像的进度条是否需要
21.       useH265MSE: true // true-表示硬解  false-软解 默认不传该字段
22.       receiveMessageFromWSPlayer: (methods, data, err) => { /* 回调函数，可以在以下回调函数里面做监听 */
23.         switch(methods) {
24.             case 'initializationCompleted':
25.                 // 初始化完成，可调用播放方法（适用于动态加载解码库）
26.                 // 若回调未触发时就使用实时预览/录像回放，则无法播放。
27.                 // 此时我们可以调用一个
28.                 realPlayer.playRealVideo({
29.                     channelList: [{
30.                         id: '100000$1$0$0', // {String} 通道编码 -- 用于预览，必填
31.                         deviceCode: deviceCode, // {String} 设备编码 -- 用于对讲，对讲必填，无对讲功能可不填
32.                         deviceType: deviceType, // {String} 设备类型 -- 用于对讲，对讲必填，无对讲功能可不填
33.                         channelSeq: channelSeq, // {String|Number} 通道序号 -- 用于对讲，对讲必填，无对讲功能可不填
34.                         cameraType: cameraType, // {String|Number} 摄像头类型 -- 用于云台，云台必填，无云台功能可不填
35.                         capability: capability, // {String} 能力集 -- 用于云台，选填
36.                     }],
37.                     streamType: 1, // {Number} 码流类型 1-主码流 2-辅码流
38.                     windowIndex: 0 // {Number} 播放窗口序号（从0开始）
39.                 })
40.                 break;
41.             case "realSuccess": // 实时预览成功
42.                 console.log("实时预览成功",)
43.                 break;
44.             case "realError": // 实时预览失败
45.                 console.log("实时预览失败")
46.                 break;
47.             case "talkError": // 对讲失败
48.                 console.log("对讲失败");
49.                 break;
50.             case 'selectWindowChanged': // 选中的窗口发生改变
51.                 console.log(data, "返回窗口信息")
52.                 break;
53.             case 'windowNumChanged': // 播放器显示的路数发生改变
54.                 console.log(data, "返回显示的窗口数量")
55.                 break;
56.             case 'closeVideo': // 视频关闭回调
57.                 // 点击关闭按钮引发的视频关闭进行提示
58.                 // 切换视频引发的视频关闭不进行提示
59.                 if(!data.changeVideoFlag) {
60.                     console.log(`窗口${data.selectIndex}的视频已关闭`)
61.                 }
62.                 break;
63.             case 'statusChanged': // 视频状态发生改变
65.                 break;
66.             case 'errorInfo': // 错误信息汇总
67.                 console.log(data, "可打印查看错误消息");
68.                 }
69.             }
70.         })
71.      
72.       realPlayer.realByUrl({
73.         playType: 'url', // 写死url
74.         rtspURL: 'rtsp地址',
75.         wsURL: 'websocket连接',
76.         channelId: '通道ID',
77.         streamType: '码流类型',
78.         // 以上必传/以下选传
79.         selectIndex: '窗口号信息，从0开始',
80.         playerAdapter: '窗口样式："selfAdaption" 自适应 | "stretching" 拉伸'
81.       });
82.     },

复制代码

如果视频播放不成、各种状态码也好、功能Api也好 官网里都有写。
好用，爱用！！

——————————————————————————————————————————
我看有的同伴不知道集成之后怎样更换自己的接口（api.js文件修改方法）
由于我的视频监控需求并不必要多复杂的功能，仅作为监控展示
api.js中 getRealmonitor 这个“哀求及时视频流所在”方法 会在PlayerManager.js中作为参数使用

API泉源：import API from "./api.js";

代码如下：
正常来讲，后端直接拉大华接口的话返回的应该是一个内网所在的路径，必要映射后才可外网访问，映射必要接洽运营（大概必要大华提供技能支持）
内网ip前端转后端转自己定就好

1. // api.js
3. import {
4.   getHlsApi,
5.   getRtspApi,
6. } from "项目接口地址";
7. // 跟平台相关的业务JS
8. const API = {
9.   /**
10.    * 请求实时视频流地址
11.    * @returns Promise<>
12.    * @desc 只需改写 API.ajaxRequest 内容
13.    *
14.    * 固定格式如下
15.    * return new Promise ((resolve, reject) => {
16.    *      ...
17.    *      resolve({     resolve 返回格式示例如下
18.    *          url: "",
19.    *          token: 1,
20.    *          ...
21.    *      })
22.    * })
23.    */
24.   getRealmonitor(realmonitorParam) {
25.     return new Promise((resolve, reject) => {
26.       let formdata = new FormData();
27.       formdata.append("deviceCode", sessionStorage.getItem("deviceCode"));
28.       formdata.append("channelCode", sessionStorage.getItem("channelCode"));
29.       getRtspApi(formdata)
30.         .then((res) => {
31.           const urlObj = new URL(res.data.data);
32.           // 使用 URLSearchParams 获取查询参数
33.           const params = new URLSearchParams(urlObj.search);
34.           // 获取 token 参数的值
35.           const token = params.get("token");
36.           // 使用 split 方法以 ? 为分隔符分割 URL
37.           const parts = res.data.data.split("?");
38.           // 获取 ? 前面的部分
39.           const beforeQuestionMark = parts[0];
40.         
41.           resolve({
42.             url: res.data.data, // 正常来讲返回的应该是一个内网地址的路径，需要映射后才可外网访问，映射需要联系运营（可能需要大华配合）。 内网ip前端转后端转自己定就好
43.             // url: beforeQuestionMark,
44.             // token: token,
45.           });
46.         })
47.         .catch((res) => {
48.           reject(res);
49.         });
50.     });
51.   },

复制代码

如果必要别的功能，比如回放、对讲， api.js 内里也有对应的方法，只必要改接口、传参即可