简单使用萤石云，实时直播，监控回放

最新推荐文章于 2023-06-09 20:34:48 发布
最新推荐文章于 2023-06-09 20:34:48 发布
阅读量9.6k 收藏 10
点赞数 2
分类专栏： vue cordova 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42877655/article/details/106788941
版权
本文介绍了如何使用萤石云进行实时直播和监控回放。通过视频播放标签加载直播地址实现实时直播，并提供了监控回放的代码示例，强调在不同设备上的播放差异，以及在Vue应用中如何集成这些功能。
摘要由CSDN通过智能技术生成

实时直播

这个我直接使用的视频播放标签

用直播地址
ps：高清好像要转码，后端搞得我不清楚

<video
        id="1234567"
        src="地址"
        autoplay
        controls
        playsInline
        webkit-playsinline
      >
      </video>

如果不可以用可以试着执行下面这个命令再试试

npm install ezuikit

cordova + vue 时使用的

ps : 浏览器调试时用可能不能播放，但手机h5却可以

监控回放

最低0.47元/天 解锁文章
BUG先行者
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
摄像头视频直播方案比较之方案一：萤石云
weixin_55958693的博客
03-15 6415
摄像头视频直播方案比较之方案一：萤石云 这几年，摄像头视频直播应用越来越广泛，比如学校食堂、智慧工地、新零售、家居老幼监护、智慧园区、明厨亮灶、森林防火等，实时视频上手机已经是非常普遍的需求。实时直播有多种方案，从今天起，小编为大家一一介绍。 方案一萤石云，萤石云是海康提供的为住宅、办公室、商铺、学校、酒店等智能化产品提供互联互通开放平台，提供视频的云平台服务功能。靠着海康的硬件品牌覆盖能力，萤石云为海康系产品提供了灵活的接入云端，并二次开发集成的能力。很多小微企业的首选技术路线。 萤石云的接入很简单，今天
vue使用萤石云监控视频/录像回放功能踩坑记录
最新发布
m0_57121248的博客
05-17 1027
vue使用萤石云监控视频/录像回放功能踩坑记录
萤石云摄像头直播带云台控制代码
12-14
非常完整的萤石云直播加纯前端云台控制代码,不依赖任何后端技术,纯js,大部分的资源都是需要安装exe的,我这个不需要,可以直接js直播加控制,完美代码,绝对优质资源,绝对不骗人,教程在https://blog.csdn.net/m0_37609579/article/details/85010224
萤石云监控直播 android studio可用library 可直接跳到里面界面
08-28
最好的使用方法就是自己项目能跳转到demo，萤石云目前是eclipse结构，必须以子module的形式导入，且换掉所有id 讲manifest注册到你的主module。 经过整理只需要全局搜索"包名"替换你的即可。 manifest 某个点路径的service换成 该library包名路径 so文件在 主module中加载
萤石云播放海康摄像头
12-12
最近做了一个工地上监控，远程查看监控，用了萤石云播放海康的监控摄像具体使用https://blog.csdn.net/qq_29099209/article/details/84969885
萤石云电脑版
10-29
电脑版 EzvizStudioSetups.exe
对接萤石平台调用播放
u011799016的博客
12-09 1294
萤石api 管理 · 萤石开放平台API文档 httpclient pom <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactId> <version>4.5.2</version> </dependency> package com.ruoyi...
萤石云监控地址视频播放
xiaowu_1997的博客
06-16 4534
html代码 <iframe src="https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/你的设备序列号/1.live&autoplay=1&accessToken=你的accesstoken&begin=开始时间&end=结束时间" width="600" height="400" id="ysOpenDevice" allowfullscreen &gt
java调用萤石文档视频监控
ghd1234567890的博客
02-13 696
java调用萤石视频监控
萤石云视频ezopen
m0_61103773的博客
06-09 437
【代码】萤石云视频ezopen。
萤石云前端页面demo
07-06
萤石云前端页面demo，EZUIKit是基于萤石开放平台OpenSDK封装的UI组件，使用过程中不必学习专业的业务概念，更不用调用繁琐的接口，能够以极简的嵌入方式，快速在您的应用中集成视频功能。 详细了解EZOpen协议 EZUIKit是给客户端用户本地安装使用的，是一个exe执行文件。可以提供一个下载地址让用户下载安装.
萤石摄像头实现web端监控预览以及录像回放
热门推荐
weixin_44117635的博客
07-10 1万+
文章目录前言一、在萤石云平台上注册账号并添加设备二、利用云平台的api获取到前端展示需要的相关信息三、前端页面展示内容总结 前言 前段时间对接了萤石摄像头，在此做一次总结，总体思路是：把萤石摄像头绑定到萤石云平台上，利用云平台的api来获取到access_token等信息，最终拼接成一个url，放在一个iframe标签中即可。 提示：以下是本篇文章正文内容，案例可供参考 一、在萤石云平台上注册账号并添加设备 萤石云平台 PC客户端下载 在萤石云平台上进行账号注册和登录。 在PC客户端中登录已经注册的账号
2021-08-02
jiumenchuqi的博客
08-02 250
萤石云播放地址处理（iframe引用播放） 根据设备生成的accessToken通过官方文档获取播放url 官方文档 返回的数据格式如下： { “msg”: “Operation succeeded”, “code”: “200”, “data”: { “id”: null, “url”: “ezopen://open.ys7.com/F02781600/1.hd.live”, “expireTime”: null } } iframe 路径拼接 https://open.ys7.com/ezope
萤石云配置及其使用
大枣的博客
11-03 9143
官方文档：https://open.ys7.com/ 一： 创建我的应用 获取appkey。 下载官方app或者pc端 点击添加设备 输入验证码和设备号 解密摄像头，调用官方api接口，输入验证码，设备号和token，及关闭接口。 点击ezopen协议：里边有appkey，token,ezopen的url协议（高清和普通） 二： 环境配置 https://open.ys7.c...
前端JS、Vue实现海康萤石直播预览、回放、云台控制功能
weixin_46607967的博客
03-21 1万+
前端JS、Vue实现海康萤石直播预览、回放、云台控制功能
萤石云视频EZOpenSDK集成(实现播放，视频放大功能)
weixin_33739646的博客
09-27 1348
推荐阅读:SurfaceView+MediaPlayer封装之路 Android学习资源分享合集(1) 去年在项目中用到了萤石云视频，它的项目源码很多，找到有用的代码很费时间，所以今天写成文章把集成步骤，预览功能，双击放大，手势放大功能以及注意事项等分享给大家。效果图如下: 萤石开发平台地址:open.ys7.com/ 点击"文档"进入萤石云开发平台开发文档使用。 一.集成步骤: 1. 创建应...
前端React项目中实现萤石云ezuikit摄像头的播放与控制
weixin_45777997的博客
10-13 8445
最近要在react项目中使用萤石云提供的ezuikit库来接入萤石云摄像头，实现远程播放、控制移动、放大缩小等功能，首先百度搜类似的需求，搜不到，只能自己采坑，登萤石云官网，看对应文档。 一、登录萤石云开放平台，下载demo并运行 在萤石云开放平台官网(https://open.ys7.com)的导航栏中，点击下载按钮 页面下方，分别有对应JavaScript、Android、IOS的demo，这里，我们下载JavaScript 下载的demo中，会有对应的原生js摄像头案例，以及用vue、react框
前端接入萤石云
努力赚大钱的博客
09-18 3474
萤石云有两个方法使用： npm引入 非npm引入 两个方法中的js内容不同，所以容器初始化方法也不同 详情可到github查看：https://github.com/Hikvision-Ezviz ①npm引入： 步骤一：首先通过npn下载 npm install ezuikit-js 步骤二：项目中引入 import EZUIKit from 'ezuikit-js'; // 或者下面原生script引入，二选一即可 <script src="./ezuikit.js"></s
生成VUE2 中使用萤石云监控直播的代码
05-25
你好，以下是在 Vue2 中使用萤石云监控直播的代码： 1. 首先，在你的 Vue2 项目中安装萤石云的 SDK： ``` npm install ezopen-uniapp-sdk --save ``` 2. 在需要使用萤石云的组件中引入 SDK： ```javascript import EZUIKit from 'ezopen-uniapp-sdk'; // 设置 APPKey 和 AccessToken EZUIKit.setAccessToken('your_access_token'); EZUIKit.setGlobalConfig({ appKey: 'your_app_key' }); ``` 3. 在组件中定义萤石云的播放器： ```html <template> <div> <div ref="player" style="width: 100%; height: 400px;"></div> </div> </template> ``` 4. 在组件的 `mounted` 钩子函数中初始化播放器并播放： ```javascript mounted() { // 初始化播放器 const player = new EZUIKit.EZUIPlayer({ id: this.$refs.player, // 播放器所在的 DOM 元素 url: 'your_monitor_url', // 监控画面的 URL autoplay: true, // 是否自动播放 accessToken: 'your_access_token', // AccessToken width: '100%', height: '100%' }); // 播放监控 player.play(); }, ``` 注意：需要将 `your_monitor_url` 替换为你自己的监控画面 URL。另外，如果你的监控画面是需要密码才能观看的，还需要在初始化播放器时设置密码： ```javascript const player = new EZUIKit.EZUIPlayer({ id: this.$refs.player, url: 'your_monitor_url', autoplay: true, accessToken: 'your_access_token', width: '100%', height: '100%', pwd: 'your_monitor_pwd' // 监控画面的密码 }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值