Vue は、Hikvision H5 ビデオ プラグインを使用してビデオを再生する例を実装し、ストリームが失敗した後に新しいストリームを再取得してビデオを再生します。
h5player は、HTML5 ベースのストリーミング ネットワーク ビデオ プレーヤーであり、ブラウザ プラグインをインストールせずに、WebSocket プロトコルを通じてメディア サービスからストリームを取得し、さまざまな形式でオーディオおよびビデオ ストリームを再生できます。
まず、Hikvision 開発プラットフォームに移動し、プラグイン パッケージをダウンロードします。ただし、このパッケージを入手するにはログインする必要があります。
アドレス: https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=20
ログインしたくない場合は、ここから入手できます: https://download.csdn.net/download/lu6545311/88562387
1. プラグインパッケージの紹介
現在のプロジェクトは vue2.5 を使用しているため、リソース パッケージは static ディレクトリに配置されます
次に、index.html にインポートします。
<script src="/static/js/h5player/h5player.min.js"></scrip>
2. 使用する
(1) このプレーヤーはプロジェクト内の複数の場所で使用されるため、コンポーネント化して導入して使用します。
//子组件
<template>
<div id="H5Play"></div>
</template>
//父组件引入
<HKH5Player ref="hkH5Player" @resetVideoMax="resetVideoH5" @getWndPk="getWndPk"></HKH5Player>
(2) 初期化
let that = this
//设置播放容器的宽高并监听窗口大小变化
window.addEventListener('resize', () => {
this.player.JS_Resize()
})
this.player = new window.JSPlugin({
szId: 'H5Play',
szBasePath: "../../static/js/h5player",
//在集成过程中new JSPlugin时候必填szBasePath: './dist', // 必填,引用H5player.min.js的js相对路径，否则会引起内部加载解码库异常
iMaxSplit: this.maxSplit, //分屏播放，默认最大分屏4*4
iCurrentSplit: 1,
openDebug: true,
oStyle: {
borderSelect: '#FFCC00', //选中窗口的边框颜色
},
// 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
// iWidth: 600,
// iHeight: 400,
})
(3) イベントコールバックバインディング（ストリーム取得失敗後、ビデオを再生するための新しいストリームを再取得）
this.player.JS_SetWindowControlCallback({
windowEventSelect: function (iWndIndex) {
//插件选中窗口回调
console.log('windowSelect callback: ', iWndIndex);
//每一次窗口变化都会触发这个，用来记录窗口，方便后面进行取流失败了针对对应的窗口视频进行再次播放------------
that.$emit('getWndPk',iWndIndex) //调用父组件的方法，并且把当前的窗口传过去，为了记录当前视频的pk
},
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
//插件错误回调
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
//视频爆发错误之后，进行想要的逻辑操作，这里是为了再次取流播放视频------------
that.showErrror(iErrorCode,iWndIndex) //iErrorCode 错误码 iWndIndex 错误的视频窗口，对应上面获取到的是窗口来进行操作
},
windowEventOver: function (iWndIndex) {
//鼠标移过回调
//console.log(iWndIndex);
},
windowEventOut: function (iWndIndex) {
//鼠标移出回调
//console.log(iWndIndex);
},
windowEventUp: function (iWndIndex) {
//鼠标mouseup事件回调
//console.log(iWndIndex);
},
windowFullCcreenChange: function (bFull) {
//全屏切换回调
console.log('fullScreen callback: ', bFull);
},
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
//首帧显示回调
console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
},
performanceLack: function () {
//性能不足回调
// console.log('performanceLack callback: ');
}
});
(4) 動画の再生を開始します
//playURL:播放地址 ws://1111111
// mode 0 普通模式 1 高级模式 这里用的是高级模式
//index ： 窗口
this.player.JS_Play(playURL, {
playURL, mode }, index).then(
() => {
console.log('realplay success') },
e => {
console.error(e) }
)
//自动跳转下一个窗口
index = index + 1;
if (index == this.maxSplit) {
index = 0 }
player.JS_SelectWnd(index);
(5) 動画の再生を停止し、動画を破棄します。
this.player.JS_StopRealPlayAll(); //全部
this.player.JS_Stop(); //单个
(6) 切り替えウィンドウの数
//splitNum 最大 4
this.player.JS_ArrangeWindow(splitNum).then(
() => {
console.log(`arrangeWindow to ${
splitNum}x${
splitNum} success`) },
e => {
console.error(e) }
)
(7) エラーコードを取得してリマインドする
上記の 3 番目のポイントでは、イベントのコールバックでビデオ再生エラーのエラー コードを取得できます。公式 Web サイトからダウンロードした開発ドキュメントには対応するエラー コードが含まれていますが、不完全であるように見えますが、十分です。
showErrror(val,iWndIndex){
let list = {
'0x12f900005':'高级模式不支持该功能',
'0x12f900006':'高级模式的解码库加载失败',
'0x12f900008':'url格式错误',
'0x12f900009':'取流超时错误',
'0x12f900010':'设置或者是获取音量失败，因为没有开启音频的窗口',
'0x12f900011':'设置的音量不在1-100范围',
'0x12f910000':'websocket连接失败，请检查网络是否通畅，URL是否正确',
'0x12f910010':'取流失败',
'0x12f910011':'流中断，电脑配置过低，程序卡主线程都可能导致流中断',
'0x12f910014':'没有音频数据',
'0x12f910015':'未找到对应websocket,取流套接字被动关闭的报错',
'0x12f910016':'websocket不在连接状态',
'0x12f910017':'不支持智能信息展示',
'0x12f910018':'websocket长时间未收到message',
'0x12f910019':'WSS连接失败，原因：端口尚未开通、证书未安装、证书不安全',
'0x12f910020':'单帧回放时不能暂停',
'0x12f910021':'已是最大倍速',
'0x12f910022':'已是最小倍速',
'0x12f910023':'ws/wss连接超时，默认6s超时时间，原因：网络异常，网络不通',
'0x12f910026':'jsdecoder1.0解码报错视频编码格式不支持',
'0x12f910027':'后端取流超时，主动关闭连接(设备突然离线或重启，网络传输超时20s)',
'0x12f910028':'设置的缓冲区大小无效，大小0-510241024,不在该范围的报错',
'0x12f910029':'普通模式的报错，码流异常导致黑屏，尝试重新取流',
'0x12f910031':'普通模式下播放卡主会出现',
'0x12f910032':'码流编码格式普通模式下不支持，可切换高级模式尝试播放',
'0x12f920015':'未调用停止录像，再次调用开始录像',
'0x12f920016':'未开启录像调用停止录像接口错误',
'0x12f920017':'紧急录像目标格式不支持，非ps/mp4',
'0x12f920018':'紧急录像文件名为null',
'0x12f930010':'内存不足',
'0x12f930011':'首帧显示之前无法抓图，请稍后重试',
'0x12f950000':'采集音频失败，可能是在非https域下使用对讲导致',
'0x12f950001':'对讲不支持这种音频编码格式',
'0x12f900001':'接口调用参数错误',
'0x12f900002':'不在播放状态',
'0x12f900003':'仅回放支持该功能',
'0x12f900004':'普通模式不支持该功能'
}
if (list[val]) {
this.$message.error(list[val])
console.error(list[val]);
}
//防止一直在请求，我们只给你两个错误进行再次取流，各自根据业务进行调整
if (['0x12f910011','0x12f910027'].includes(val)) {
this.$emit('resetVideoMax',iWndIndex); //调用父组件的方法，并且把发生错误的窗口闯过去
this.player.JS_SelectWnd(iWndIndex); // 把当前窗口选择到发生错误的窗口
}
},
3. 親コンポーネントの書き方
主に、ビデオストリームの取得に失敗した場合に、ビデオ再生のために再度ストリームをリクエストする方法について書きます。
(1) 親コンポーネントでプラグインの初期化メソッドを呼び出す
mounted() {
setTimeout(function (){
that.$refs.hkH5Player.初始化方法();
that.$refs.hkH5Player.初始化方法();
that.$refs.hkH5Player.初始窗口数量(1);
},200)
}
(2) ビデオ ウィンドウの録画getWndPk方法
getWndPk(index){
// h5窗口变化的时候进行
// 播放视频的时候记录窗口对应的pk
//这里是把对应窗口的pk记录起来，计算你手动切换的窗口也可以记录到的
this.h5WndIndex = index;
},
//记录到当前的窗口，然后在播放视频的时候把pk存起来
playVideo(pk){
this.$axios.post('',{
pk:pk,protocol:'ws'}).then(res => {
this.h5PkList[this.h5WndIndex] = pk; //记录对应窗口的视频pk，为后面视频失败再次取流做准备
//调用子组件的播放视频的方法,具体逻辑自行处理
.....
this.$refs.hkH5Player.播放视频(url);
})
}
(3) ストリームの取得に失敗した場合は、再度ストリームを取得するメソッドを呼び出します。
resetVideoH5(index){
// 取流失败重新获取流
let pk = this.h5PkList[index]
this.playVideo(pk)
},
(4) 複数の動画の初期再生
getList(){
list = [...pk]
//先判断有多少个视频，然后来展示多少个窗口，最多16个 即num最大是4
if (that.videoList.length > 4 && that.videoList.length <= 9) {
num = 3;
} else if (that.videoList.length > 9) {
num = 4;
} else {
num = 2;
}
that.$refs.hkH5Player.初始窗口数量(num);
//拿到多个视频pk后，循环调用播放方法
for (let index = 0; index < list.length; index++) {
this.playVideo(list[index].pk)
}
}
このようにして、ビデオの再生が失敗した後でも、ビデオを再度再生できます。
ヒント：ポイント
(1) ウィンドウ変更の記録 親コンポーネントがビデオを再生するためにトリガーされると、インターフェイス ウィンドウ番号によって pk (またはストリームを再フェッチするためのパラメーターなど) が保存され、ストリームのフェッチが容易になります。後でもう一度< a i=1> (2) エラーが発生した後、親コンポーネントをトリガーして、対応するウィンドウでエラー ビデオの pk を見つけ、再度リクエストします
効果
機能（一部特定の機能は使用しません。使用したい場合は、ダウンロードパッケージ内の開発ドキュメントを確認してください）
このようにして、ビデオの再生が失敗した後でも、ビデオを再度再生できます。
機能（一部特定の機能は使用しません。使用したい場合は、ダウンロードパッケージ内の開発ドキュメントを確認してください）
