项目中需要接入一些视频,如果用自己的流媒体服务工作量很大,于是接入到萤石云上,支持直播回放等

准备工作

注册账号 萤石开官网,登录萤石云的官网 萤石开放平台 下载所需的SDK

解压后有三个文件夹

如果使用HTML,可参考demos => base-demo

如果使用react,可参考demos => react-demo 

如果使用vue,可参考demos => vue-demo

基本使用

 html的方式

<script src="./ezuikit.js"></script>

vue

安装 ezuikit-js

$ npm install ezuikit-js

引入 ezuikit-js 

import  EZUIKit from 'ezuikit-js';

 基本使用

创建DOM

<div id="video-container"></div>

初始化

var player = new EZUIKit.EZUIKitPlayer({
      id: 'video-container', // 视频容器ID
      accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
      url: 'ezopen://open.ys7.com/203751922/1.live',
    })

方法调用

示例: 停止播放

  1. player.stop();

  2. player.stop()
  .then(()=>{
    console.log("执行播放成功后其他动作");
  });

示例: 执行播放(自动播放为false,自定义触发播放/切换播放地址)

  player.play();
  // 切换播放地址场景(注意先执行stop方法停止上次取流)
  player.play({
   url: 'ezopen://open.ys7.com/203751922/1.rec?begin=202001000000&end=202001235959'
  });

切换地址播放(注意需要先执行stop方法停止上次取流)

  player.stop()
  .then(()=>{
    player.play('ezopen://open.ys7.com/{其他设备}/{其他通道}.live');
  });

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

 用了官网的地址,展示效果

下篇写后端接口的获取数据  AccessToken,视频连接,通道,设备编号等

Logo

前往低代码交流专区

更多推荐