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

已于 2024-08-20 13:51:02 修改
阅读量4k 收藏 16
点赞数 50
文章标签： vue.js 前端 javascript
于 2024-08-20 13:48:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53616906/article/details/141356133
版权

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

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

然后在index.html中进行引入

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

引入  PlayerManager

import PlayerManager from "@/utils/icc/PlayerManager";

4.创建播放器

<!-- 实时预览 -->
<div id="ws-real-player" width="100%" heig
最低0.47元/天 解锁文章
大华web平台视频集成
07-27
搞大华视频搞了n久，基于html开发，需要ocx插件，最初利用网上的下载的ocx插件，但是不支持click事件以及历史回放功能。用c#大华的官方sdk，基本winform移植到wenform难上加难，相当于还是要进行activex插件开发。这种选择也放弃了。大华的dss平台需要购买，但是公司比较抠，pass。很幸运找到这份资料，传递给每一个做web集成大华的码农们，最后的最后下次开发绝对不用大华，大华的服务态度不想说，总是发邮箱。。。回复找市场人员管技术人员要资料。难道大华的资料每个客户都要这样搞吗？对了，视频实时播放+历史回放等功能是可以接口文档的，云台服务就要利用sdk写一个服务进行调用。
WEB前端调用大华摄像头
08-01
亲测有用，支持实时播放、截图、NVR、语音对讲，包含详细的文档接口说明。
vue项目中播放ws（Websocket协议）视频流
最新发布
Dalin0929的博客
03-24 1084
vue项目中播放ws（Websocket协议）视频流
web无插件音视频播放-WsPlayer
08-12
wsPlayer是一款专注于WebSocket-fmp4协议的web视频播放器，HTTP/WebSocket-fmp4协议与RTMP、HLS、HTTP-FLV相比，具有播放延时短，HTML5兼容性好等优点；
vue2播放（大华-wsplayer）实时视频流-h264、h265
a895544608的博客
07-19 4723
点击链接->在线开放文档->快速入门->下载最新demo->里面的demo可以测试视频流是否能正常播放（不能的话就质问后端）三、视频播放器-wsplayers（因为公司是和大华有合作、通过大华官网看他们播放器很流畅.于是）不知是是不是我个人原因、h264可以正常播放、h265就歇了，果断换播放器。缺点：h264很流畅、h265稍卡、h265+ 硬解码两个视频cpu直接拉满。优点：h264、h265、h265+ 及各种小牌摄像头都能播放。优点：h264、h265、h265+ 及各种小牌摄像头都能播放。
大华视频监控对接
weixin_29938009的博客
01-04 53
几种不同方案的兼容性表： https://open-icc.dahuatech.com/#/videoDoc/integration_web 推荐使用：WSPlayer无插件播放器 wsplayer播放器demo下载地址： https://open-icc.dahuatech.com/#/download?currentTab=4 下载压缩包里面有一个对接文档，按对接文档的说明，因为跨域的问...
海康视频流前端播放使用(vue版本ws通信)
11-24
海康视频流前端播放使用
vue/react+wsplayer对接大华的rtsp实时预览视频流
weixin_45960031的博客
09-25 2525
vue+wsplayer对接大华的rtsp实时预览视频流
大华网络摄像头视频播放（基于vue+SpringBoot）
qq_37529783的博客
08-24 7925
基于NetSDK_Java后端实现将大华摄像机的码流转发至前端。
vue H264，H265视频播放组件
lin13144470741的博客
07-17 1662
实现浏览器播放H264，H265播放flv，ws等视频流
【vue】视频流播放
小菜张的博客
11-06 8257
vue 视频流播放
大华摄像头实时视频接入Demo
01-25
亲测可用，这是使用大华sdk接入大华摄像头实时视频的winform测试程序
播放摄像头流视频支持H264 H265
09-03
基于jessibuca播放摄像头流视频支持H264 H265，基于MediaSource/Webcodec/ WebAssembly(wasm)实现的纯JavaScript直播播放器。支持ws-raw、http(ws)-flv、hls、webTransport、webrtc、http(ws)-fmp4、http(ws)-h264、http(ws)-h265多种播放格式。自带底部UI。支持创建多个播放实例。支持多种视频缩放模式 支持填充，等比，等比缩放 3中视频缩放模式。支持视频录制 支持录制MP4和WebM格式(video/webm;codecs=h264)的视频录制。(基于MediaRecorder),(MP4格式支持在IOS VLC播放器显示时长播放，Android VLC播放器无法显示时长播放，PC VLC播放器可以播放)。支持微信等H5自动播放 借助于wasm软解码（wcs硬解码）+canvas渲染，可以实现在微信等H5任何交互情况下自动播放。
大华实时视频完整程序
09-17
C#大华实时视频程序，包含完整云台控制，拍照功能，页面通过wpf实现，下载完成后即可使用。
vue2播放（大华-wsplayer）实现录播回放功能-rtsp
a895544608的博客
01-14 1172
​ 前面有写过实时视频流如何播放- 引入位置可以参考上一篇博客 vue2播放（大华-wsplayer）实时视频流-h264、h265_vue2 easyplayer-CSDN博客 大华icc开放平台：ICC开放平台 接口回调文档：web视频播放 点击链接->在线开放文档->快速入门->下载最新demo->里面的demo可以测试视频流是否能正常播放 ​
vue3 - 实现WebRTC播放实时rtsp视频流+NVR录像机回放，web前端浏览器网页播放RTSP推流，支持海康威视大华等摄像头/监控设备对接（监控摄像头录像及回放，拿到rtsp视频流如何处理）
热门推荐
高级前端工程师
12-17 1万+
vue3，webrtc-streamer，rtsp视频流，监控画面，nvr录像机，回放功能，监控摄像头设备，vue3播放Rtsp推流示例代码，前端如何在vue3项目中播放rtsp视频流，VUE中播放RTSP实时推流播放解决方案，vue3 webrtc播放rtsp视频流，vue3实现rtsp视频流浏览器实时播放，海康摄像机、NVR、流媒体服务器、回放取流RTSP地址，vue3+vite+ts 使用webrtc-streamer播放海康rtsp监控视频，播放海康rtsp监控视频，海康摄像机/录像机预览+回放RT
wsPlayer：基于WebSocket-fmp4的Web视频播放器
gitblog_07397的博客
09-13 1379
wsPlayer：基于WebSocket-fmp4的Web视频播放器 wsPlayer wsPlayer is a web video player based on WebSocket-fmp4. 项目地址: https://g...
vue+wsplayer对接大华的rtsp实时预览视频流
weixin_66549669的博客
02-28 618
【代码】vue+wsplayer对接大华的rtsp实时预览视频流。
大华监控web调用展示
weixin_43861449的博客
11-30 824
【代码】大华监控web调用展示。
前端vue播放 大华icc rtsp视频流
01-11
### 实现 Vue.js 中集成并播放大华 ICC RTSP 视频流 #### 使用 VLC 测试流媒体连接 为了确保提供的 RTSP 流地址有效，在开发前建议通过 VLC 播放器验证该流是否可正常播放。操作方法是在 VLC 菜单栏选择【媒体】-> 【打开网络串流】，然后输入所提供的 RTSP 地址进行测试[^2]。 #### 尝试 Video.js 和 vue-video-player 插件 对于希望利用流行的 video.js 库来处理视频播放的应用程序来说，可以直接引入 video.js 并配置其用于播放 RTSP 流。然而需要注意的是，尽管原生 video.js 支持良好，但 vue-video-player 这个专门为 Vue 设计的组件库可能由于长时间未更新而存在兼容性问题，因此推荐优先考虑使用官方文档中的最新版本或寻找其他替代方案[^1]。 ```javascript // main.js 或入口文件中全局注册 video.js import 'video.js/dist/video-js.css'; import videojs from 'video.js'; Vue.prototype.$video = videojs; ``` #### 推荐采用 EasyPlayer.js 解决方案 考虑到不同编码格式的支持情况以及性能表现，EasyPlayer.js 是一个更为理想的选项。它不仅能够很好地适配多种编解码标准（H.264, H.265），而且提供了跨平台的良好体验。安装完成后只需简单几行代码即可完成基本设置： ```html <!-- HTML 部分 --> <easy-player :src="streamUrl"></easy-player> ``` ```javascript // JavaScript 部分 export default { data() { return { streamUrl: "rtsp://your_rtsp_stream_address" }; } }; ``` 此外，如果遇到特定于硬件加速的问题，则需进一步调整参数以优化用户体验[^3]。 #### WSPlayer 方案简介 另一种可行的方法是借助 wsplayer 来实现与大华 ICC 的对接工作。此插件由 `@/utils/icc/PlayerManager` 提供管理功能，允许开发者更方便地控制和定制化播放逻辑。不过具体实施细节取决于项目的实际需求和技术栈的选择[^4]。
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小朱同学️

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值