vue接入海康4G版摄像头通过萤石云平台推送视频流教程

renkai721

已于 2024-08-01 17:01:44 修改

阅读量5.5k

点赞数 22

分类专栏：前端文章标签：萤石云平台海康摄像头 video-player contrib-hls

于 2024-01-06 14:43:20 首次发布

本文链接：https://blog.csdn.net/renkai721/article/details/135425241

版权

前端专栏收录该内容

37 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

需求

最近需要接入海康视频摄像头，然后把视频的画面接入到自己的网站系统中。以前对接过rtsp固定IP的显示视频，这次的不一样，没有了固定IP。海康的解决办法是，摄像头通过配置服务器到萤石云平台，然后购买企业版账号和套餐【注意必须要购买套餐】最便宜的一个月是300元。如果不购买，视频会一直转圈圈，无法播放。

# 萤石云平台官网
https://open.ys7.com



# 国际版视频推流接入教程
https://blog.csdn.net/renkai721/article/details/140849065

1、购买萤石云平台企业版套餐。

2、购买4G卡的流量，默认500MB，新人注册免费领取2G。官方测评一天流量消耗是8个G。

3、购买4G版的摄像头。

效果图

技术方案

1、摄像头通过4G的

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

renkai721

关注关注

22
点赞
踩
32

收藏

觉得还不错? 一键收藏
10
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

Vue3 - 详细实现接入使用海康威视监控云端显示及控制功能，网站集成安装海康监控及实时监控显示、回放、放大缩小画面、视频画面截图、截屏抓拍、摄像头控制，实时推流及播放器解决延迟卡顿等问题（详细代码）

王佳斌

07-12

1万+

vue3，nuxt3，海康威视，海康监控，摄像头监控，实时监控画面，海康插件，视频播放，回放，视频流地址，取流协议，视频sdk播放，hik，rtsp，rtmp，hls，ws，网站，网页，h5页面，后台管理系统，vue3对接海康监控设备，无法连接，报错，vue3对接海康处理接口认证规则，监控实时预览和回放功能，海康api接口，安全认证，海康开放平台，官方文档，播放海康摄像头的监控视频，海康实时监控播放详细步骤，web，黑屏，特别卡不流畅怎么办，解决无法推流，录像，连接不上，vue3，海康，vue海康视频监控，

萤石云二次开发包，配合文档，学习使用

06-06

萤石云二次开发包，但目前官网未找到此文件，上传至此，学习使用

10 条评论您还未登录，请先登录后发表或查看评论

海康摄像头配置、国标平台接入、萤石云平台、局域网拉流方法

w741852961的博客

03-14

2万+

1、查看设备ip 在Ezviz Studio软件中（设置->账号内设备->网络参数配置）查看设备Ip(eg:192.168.3.42),在高级配置->RTSP端口可以查看或修改端口 2、网页端配置入口在网页上输入设备IP，192.168.3.42，输入账号（默认：admin）输入密码（eg:DSMY666666） 3、局域网拉流地址（RTSP协议,网页端不支持） rtsp_url = rtsp://admin:DSMY666666@192.168.3.42:5545/Stre

前端vue页面实时播放海康威视监控视频 3种方法

热门推荐

bobier_zhao的博客

11-09

13万+

The media could not be loaded, either because the server or network failed or because the format is not supported. 翻译：由于服务器或网络故障或不支持格式，无法加载媒体解决问题的方案及思路（文章最后有惊喜！！） 1.根据报错提示，非常直观的问题就是确认自己的视频格式，所以先看看自己发布的视频格式是否存在问题。 2.出现这个问题最多的是自己配置的文件路径出现问题，所以查看自己在前端页面配置的

报错：The media could not be loaded, either because the server or network failed or ...

weixin_45898996的博客

12-08

6万+

vue播放视频报错The media could not be loaded, either because the server or network failed or

The media could not be loaded, either because the server or network failed or because the format is

SSS01233210的博客

12-24

13万+

The media could not be loaded, either because the server or network failed or because the format is not supported 问题反复排查，视频资源没问题，调用方式也没问题。而且出问题的用户所占比例非常小，所在地区、宽带线路也无规律，而且均反映土豆、优酷等站的视频能正常播放。远程方式查看用户浏览器控制台，网络选项中提示视频资源404，由于视频托管在阿里云oss服务器中，提交工单，阿里工程师也没说出所以

The media could not be loaded, either because the server or network failed...

lanren312的博客

01-05

9524

视频在云服务器的OOS上，前端vue查看视频使用了video-player组件，在自己的云服务器上视频播放正常，但是在客户的服务器上视频无法播放。排除地域问题，之前有在nginx中有配置 add_header X-Frame-Options SAMEORIGIN;重启nginx发现视频还是无法播放，临时解决办法，直接使用window.open(url, "_blank");有尝试修改 X-Frame-Options。

萤石云播放海康摄像头

12-12

萤石云播放海康摄像头是基于云计算技术的一种远程视频监控解决方案，主要应用于工地、家庭、商铺等场景，便于用户随时随地查看实时监控画面。这个系统整合了海康威视的硬件设备与萤石云服务平台，提供了稳定且高效的...

vue-video-player接入海康摄像头

renkai721的专栏

01-06

1924

vue通过萤石云平台接入海康摄像头

王佳斌

12-19

1万+

vue3，EZVIZ萤石，vue3萤石云摄像头监控，vue3项目集成萤石云详细示例代码，vue3中使用萤石云播放视频，vue3中使用萤石云播放视频，萤石云实现多窗口监控，展示多个监控画面同时播放，云台控制左右移动，Vue3莹石摄像头直播视频，萤石视频回放，摄像头黑屏不显示，加载慢报错出错，多个摄像头宫格布局，vue3萤石云视频监控对接，实现海康萤石直播预览、回放、云台控制功能，如何利用萤石实现直播推流回流，实时监控播放，监控画面清晰度切换，调节声音大小，全屏放大缩小，云存储SD卡录像，回放功能，截屏，录制视

coursera “the media could not be loaded either because the server or network falled...“解决办法

happiness_boy的博客

07-16

2万+

1.进入https://ping.eu/nslookup/将地址 d3c33hcgiwev3.cloudfront.net 输入得到IP地址 d3c33hcgiwev3.cloudfront.net has address 13.225.84.9 d3c33hcgiwev3.cloudfront.net has address 13.225.84.30 d3c33hcgiwev3.cloudfront.net has address 13.225.84.12 d3c33hcgiwev3.cloudfr.

使用videojs，安卓可以正常播放视频，ios浏览器报错The media could not be loaded,either because the server or network ...

Y_seaboy的博客

12-30

2万+

写在开头 video标签在各个浏览器中表现各异，存在很多兼容性问题，所以我尝试使用了videojs这个框架传送门：videojs起步传送门：videojs文档直入主题问题：按照videojs文档添加视频后，发现安卓可以正常播放视频，但是ios浏览器报错：The media could not be loaded,either because the server or network failed or because the format is not supported（无法加载媒体，原因可能是

vue接入萤石云视频怎么默认打开云台控制功能

09-27

要在Vue项目中接入萤石云视频并默认启用云台控制功能，你需要按照以下步骤操作： 1. 安装依赖：首先确保你已经在项目中安装了Vue和相关的插件，如axios用于发起HTTP请求。如果还没有，可以使用`npm install vue axios`命令。 2. 注册萤石云API客户端：你需要获取萤石云提供的API密钥和设备ID。注册一个萤石云开发者账户，然后创建一个新的应用，在配置中获取到App Key和Device Token。 3. 创建组件：创建一个新的Vue组件，例如VideoPlayer.vue，用于显示视频流，并处理云台控制逻辑。在该组件中，初始化API客户端并设置默认的云台控制状态。 ```html <template> <div class="video-player"> <video :src="videoUrl" controls></video> <button v-if="isTiltEnabled" @click="toggleTilt">云台控制</button> </div> </template> <script> export default { data() { return { videoUrl: '', isTiltEnabled: true, }; }, mounted() { this.fetchVideoStream(); }, methods: { fetchVideoStream() { // 使用axios或其他HTTP库从萤石云服务器获取视频流URL this.$http.get('your-api-url', { params: { appKey, deviceToken } }).then((response) => { this.videoUrl = response.data.stream; }); }, toggleTilt() { this.isTiltEnabled = !this.isTiltEnabled; // 根据实际情况更新云台控制状态 }, }, }; </script> ``` 4. 调整云台控制逻辑：通常萤石云API会提供相应的接口来控制云台，你需要在这个`toggleTilt`方法中调用这个接口来实际执行云台的操作。 5. 启动云台服务（如果需要）：如果设备支持持续运行的云台控制服务，可能还需要额外的定时任务或事件监听来维持云台控制的状态。 6. 测试和调整：确保你在本地环境中测试视频播放和云台控制是否正常工作，可能需要根据萤石云的具体文档进行调整。