uni-app + Vue3 开发H5 页面播放海康ws(Websocket协议)的视频流

一、准备工作

1、海康开放平台H5视频播放器开发包下载

海康开放平台

先注册/登录，然后下载开发包

二、播放视频流

1、引入下载的开发包

在项目中创建文件夹 /static/js/Hk，将下载好的开发包解压放到 Hk 文件夹中，

2、引入

在 index.html 文件中引入

<script src="/static/js/HK/h5player.min.js"></script>

如下图：

3、使用

第一步：// 动态加载 h5player.min.js

// 动态加载 h5player.min.js
function loadh5player() {return new Promise((resolve, reject) => {if (typeof JSPlugin !== "function") {resolve();return;}const script = document.createElement("script");script.src = "/static/js/Hk/h5player.min.js";script.onload = resolve;script.onerror = reject;document.head.appendChild(script);});
}	

第二步：初始化播放窗口

// 初始化播放窗口
playersH5.value = new JSPlugin({szId: "player", //需要英文字母开头 必填szBasePath: "/static/js/Hk/h5player.min.js", // 必填,引用H5player.min.js的js相对路径oStyle: {border: "none",borderSelect: "none",background: "#000",}
})

第二步：播放

function playVideo() {playersH5.value.JS_Play(playerUrl.value, 1);// 事件初始化playersH5.value.JS_SetWindowControlCallback({windowEventSelect: function(iWndIndex) { //插件选中窗口回调console.log('windowSelect callback: ', iWndIndex);},pluginErrorHandler: function(iWndIndex, iErrorCode, oError) { //插件错误回调console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);},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(iWndIndex) { //性能不足回调console.log('performanceLack callback: ', iWndIndex);},StreamEnd: function(iWndIndex) { //性能不足回调console.log('recv StreamEnd: ', iWndIndex);},StreamHeadChanged: function(iWndIndex) {console.log('recv StreamHeadChanged: ', iWndIndex);},ThumbnailsEvent: (iWndIndex, eventType, eventCode) => {console.log('recv ThumbnailsEvent: ' + iWndIndex + ", eventType:" + eventType + ", eventCode:" +eventCode);},InterruptStream: (iWndIndex, iTime) => {console.log('recv InterruptStream: ' + iWndIndex + ", iTime:" + iTime);},ElementChanged: (iWndIndex, szElementType) => { //回调采用的是video还是canvas console.log('recv ElementChanged: ' + iWndIndex + ", szElementType:" + szElementType);},});}

三、完整代码

父组件：点击方法跳转到视频播放组件页面

function openVideoPlayBack(item) {uni.navigateTo({url: `/pages/videoPlayback/videoPlayback?url=${item.url}`})
}

子组件videoPlayback.vue：视频播放组件

<template><view class="container"><view class="box" id='player' :style="{'height':heightInfo + 'px'}" :info='playerUrl' :stop='stopPlay'></view><view class="tipName">双击全屏展示</view></view>
</template><script setup>import {ref} from "vue";import {onLoad} from "@dcloudio/uni-app"// 接收页面跳转的传参onLoad((e) => {let {url = null} = e;initPlayers(url)})let playersH5 = ref({}); // 存储播放器实例let heightInfo = ref();//销毁播放窗口状态let stopPlay = ref(false);let playerUrl = ref({})// 初始化播放器async function initPlayers(url) {try {playerUrl.value = url;const systemInfo = uni.getSystemInfoSync(); // 获取系统信息heightInfo.value = (systemInfo.windowHeight)/2;await loadh5player();playersH5.value = new JSPlugin({szId: "player", //需要英文字母开头 必填szBasePath: "/static/js/Hk/h5player.min.js", // 必填,引用H5player.min.js的js相对路径oStyle: {border: "none",borderSelect: "none",background: "#000",}})setTimeout(() => {playVideo()}, 500)} catch (error) {console.error("Failed to initialize JSPlugin:", error);}}function playVideo() {playersH5.value.JS_Play(playerUrl.value, 1);// 事件回调绑定playersH5.value.JS_SetWindowControlCallback({windowEventSelect: function(iWndIndex) { //插件选中窗口回调console.log('windowSelect callback: ', iWndIndex);},pluginErrorHandler: function(iWndIndex, iErrorCode, oError) { //插件错误回调console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);},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(iWndIndex) { //性能不足回调console.log('performanceLack callback: ', iWndIndex);},StreamEnd: function(iWndIndex) { //性能不足回调console.log('recv StreamEnd: ', iWndIndex);},StreamHeadChanged: function(iWndIndex) {console.log('recv StreamHeadChanged: ', iWndIndex);},ThumbnailsEvent: (iWndIndex, eventType, eventCode) => {console.log('recv ThumbnailsEvent: ' + iWndIndex + ", eventType:" + eventType + ", eventCode:" +eventCode);},InterruptStream: (iWndIndex, iTime) => {console.log('recv InterruptStream: ' + iWndIndex + ", iTime:" + iTime);},ElementChanged: (iWndIndex, szElementType) => { //回调采用的是video还是canvas console.log('recv ElementChanged: ' + iWndIndex + ", szElementType:" + szElementType);},});}// 动态加载 h5player.min.jsfunction loadh5player() {return new Promise((resolve, reject) => {if (typeof JSPlugin !== "function") {resolve();return;}const script = document.createElement("script");script.src = "/static/js/Hk/h5player.min.js";script.onload = resolve;script.onerror = reject;document.head.appendChild(script);});}
</script><style lang="scss" scoped>.container {width: 100%;height: 600px;display: flex;justify-content: center;align-items: center;flex-direction: column;+// padding-top: 44px;.video-container {width: 100%;}.tipName {margin-top: 10px;color: #3709ee;}}
</style>