海康摄像头视频流h5播放功能

原创于 2026-06-17 09:49:56 发布 · 88 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

访问海康开发者平台工具，下载所需的工具插件，这是我需要的工具开发包

下载后目录内容为bin,demo,doc下图所示

打开bin目录下的文件，我们所需要的是h5player.min.js文件

我用的是uniapp做的h5项目，在index.html里引入目录里的文件h5player.min.js，我把该文件夹放到了static里（根据个人的情况而定）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
        CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <title></title>
    <!--preload-links-->
    <!--app-context-->
  </head>
  <body>
    <div id="app"><!--app-html--></div>
    <script type="module" src="/main.js"></script>
	<script src="/static/h5player/bin/h5player.min.js" type="module"></script>
  </body>
</html>

在需要的文件里进行编写视频流播放代码

<template>
    <view>
        <view v-for="(item,index) in dataList" :key="index">
             <view style="width: 100%;height: 100%;">
				<view style="width: 100%; height: 100%;" :id="`play_window-${index}`</view>
			 </view>
        </view>
    </view>
</template>
<script>
//这是我自己的接口，根据实际来
import {
		getVideoStream
	} from '../../api/index.js'
   export default {
      data(){
        return{
          dataList:[]
        }
      },
      mounted(){
            getVideoStream({
							cameraIndexCode: 35040350001310586030,//文档要求传的code
							protocol: 'ws',//根据自己需要的格式来传，不传默认rtsp
						})
						.then(res => {
							if(res.data.code == 500){
								return
							}
							this.$nextTick(() => {
								this.playVideo( res.data.data.url, 0)//第一个参数为视频流地址，第二个参数为索引
							})
						})
						.catch(err => {
							console.error("视频接口失败：", err)
						})
      },
      methods:{
        playVideo(url, index) {
				const url = url
				setTimeout(() => {
					var myPlugin = new JSPlugin({
						szId: `play_window-${index}`, //父窗口id，需要英文字母开头 必填
						szBasePath: '/static/h5player/bin', // 必填,与h5player.min.js的引用目录一致
						mseWorkerEnable: false, //是否开启多线程解码，分辨率大于1080P建议开启，否则可能卡顿
						bSupporDoubleClickFull: true, //是否支持双击全屏，true-双击是全屏；false-双击无响应
						iMaxSplit: 1,
						openDebug: true
					})
					myPlugin.JS_Play(
						url, {
							playURL: url,
							mode: 0,
							PlayBackMode: 1,
							keepDecoder: 0
						},
						index
					).then(() => {
						console.log('✅ 海康视频播放成功！');
					}).catch((err) => {
						console.log('❌ 播放失败：', err);
					});
				}, 500)
			},
     }
   }
</script>