elementUI接入萤石云,实现视频监控、对讲、转向、放大缩小

1,056 阅读2分钟

携手创作,共同成长!开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第2天,点击查看活动详情

1. 如何接入萤石云?

    进入萤石云官网,注册成为开发者。创建应用。萤石设备具体逻辑如下:

account.aba9a1f8.jpg

2. 如何接入萤石云视频流模式?

2.1 目前萤石支持以下两种设备接入

2.2 视频取流模式

  • 便捷开发

CtwQEmMWuMaAUZoDAAB0niG0ae0538.png

  • 移动端开发

  1. 移动端安卓应用openSDK
  2. 移动端IOS应用openSDK
  • PC端应用开发

  1. PC端应用openSDK
  • web端页面开发

  1. web端页面源代码SDK
  2. 便捷版开发web端页面SDK
  • 微信小程序开发

  1. 微信小程序SDK
  2. 开发指南SDK

3.web接入萤石云摄像头

3.1 萤石云案例模板

3.1.1 案例模板下载地址

3.2 接入萤石云实时视频

3.2.1 进入萤石云控制面板下轻应用模块,选择web直播模板

image.png

3.2.2 复制模板内容,自定义模板控件,获取模板id

image.png

3.2.3 复制轻应用案例,生成html文件试运行,接下来在集成本摄像头的url,accessToken

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>Document</title>
  <script src="./ezuikit.js"></script>
</head>

<body>
  <div className="demo">
    <h2>视频模式使用示例:</h2>
    <div id="video-container" style="width:600px;">
    </div>
  </div>
  <script>
    var playr = new EZUIKit.EZUIKitPlayer({
		id: 'video-container', // 视频容器ID
		accessToken: "你的accessToken",
		url: '你的url',
		template: "你的模板",                   
		width: 600,
		height: 400,
    });
      
  </script>
</body>

</html>

3.2.4 通过接口文档获取实时流地址url,以及accessToken (accessToken记得做缓存,不需要一直请求萤石云接口)

image.png

3.2.5 也可以通过HTTP接口定制开发摄像头

3.2.6 切换视频流时,可使用以下方法,不需要重复开启摄像头

  // 本账号下设备
  player.stop()
  .then(()=>{
    player.play('ezopen://open.ys7.com/{其他设备}/{其他通道}.live');
  });
 // 其他账号下设备
  player.stop()
  .then(()=>{
    player.play({url:'ezopen://open.ys7.com/{其他设备}/{其他通道}.live',accessToken: 'xxxx'});
  });

3.2 接入萤石云历史视频

3.2.1 萤石云存储方法

  • 云存储
  • SD卡存储

3.2.1 萤石云查看历史视频

  • 通过接口查看历史视频

image.png

  • 通过萤石云播放器获取回放流(回放流通过接口获取)播放

image.png

image.png