【uniApp 接入萤石云】

本文介绍了如何在uniApp中通过web-view属性实现与萤石云EZUIKit的交互,包括设置页面布局、动态加载URL参数和基本操作如播放、停止等。展示了HTML和Vue脚本的配合使用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

uniApp 接入萤石云 小记


uniApp 不支持直接接入 萤石云相关的 ezuikit.js 所以要用其uniApp支持的 web-view 属性

vue页面

<template>
  <view class="hello-ezuikit-js">
    <web-view :src="webViewUrl" id="video-container"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      allInfo: undefined,
      webViewUrl:""
    };
  },
  onLoad(option) {
    this.allInfo = JSON.parse(decodeURIComponent(option.config));
    console.log(this.allInfo);
    uni.setNavigationBarTitle({
      title: this.allInfo.row.deviceName,
    });
    this.webViewUrl =
      "/hybrid/html/mobileLive.html?url=" +
      this.allInfo.monitorUrl +  // 萤石云访问的路径
      "&accessToken=" +
      this.allInfo.row.accessToken +   // 对应的tokeng
      "&title=" + 
      this.allInfo.row.deviceName;
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
#video-container {
  width: 100%;
  height: 400px;
}
</style>

html页面

(一定要放在 /hybrid/html/ 文件下 JS 也放在对应的模块)
在这里插入图片描述

<!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></title>
  <script src="./js/ezuikit.js"></script>
</head>
<style>
  body{
    margin: 0;
    padding: 0;
  }
</style>
<body>
  <div className="demo">
    <!-- <h2>视频模式使用示例:</h2> -->
    <div id="video-container">
    </div>
    <!-- <div>
      <button onClick="play()">play</button>
      <button onClick="stop()">stop</button>
      <button onClick="getOSDTime()">getOSDTime</button>
      <button onClick="getOSDTime2()">getOSDTime2</button>
      <button onClick="capturePicture()">capturePicture</button>
      <button onClick="openSound()">openSound</button>
      <button onClick="closeSound()">closeSound</button>
      <button onClick="startSave()">startSave</button>
      <button onClick="stopSave()">stopSave</button>
      <button onClick="ezopenStartTalk()">开始对讲</button>
      <button onClick="ezopenStopTalk()">结束对讲</button>
      <button onClick="fullScreen()">全屏</button>
    </div> -->
    <!-- <p style="font-style: italic;">播放多个视频,可初始化多个实例,参考:/demos/base-demo/multi-demo</p> -->
  </div>
  <script>
    //取url中的参数值
    function getQuery(name) {
      // 正则:[找寻'&' + 'url参数名字' = '值' + '&']('&'可以不存在)
      let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      let r = window.location.search.substr(1).match(reg);
      console.log(r);
      if (r != null) {
        // 对参数值进行解码
        return decodeURIComponent(r[2]);
      }
      return null;
    }
    var url = getQuery('url')
    var accessToken = getQuery('accessToken')
    var title = getQuery('title')
    document.title = title
    var playr;
    // fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
    //   .then(response => response.json())
    //   .then(res => {
    //     var accessToken = res.data.accessToken;
    // 这里我自己是有传 accessToken和 url 所以不调用他原来的方法
    playr = new EZUIKit.EZUIKitPlayer({
      id: 'video-container', // 视频容器ID
      accessToken: accessToken,
      url: url,
      template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题;
      // plugin: ['talk'],
      footer: ["hd", "fullScreen"],
      // width: window.screen.availWidth,
      // height: 0.75 * window.screen.availWidth,
    });
    // });
    function fullScreen() {
      var playPromise = playr.fullScreen();
      playPromise.then((data) => {
        console.log("promise 获取 数据", data)
      })
    }
    function play() {
      var playPromise = playr.play();
      playPromise.then((data) => {
        console.log("promise 获取 数据", data)
      })
    }
    function stop() {
      var stopPromise = playr.stop();
      stopPromise.then((data) => {
        console.log("promise 获取 数据", data)
      })
    }
    function getOSDTime() {
      var getOSDTimePromise = playr.getOSDTime();
      getOSDTimePromise.then((data) => {
        console.log("promise 获取 数据", data)
      })
    }
    function getOSDTime2() {
      var getOSDTimePromise = playr2.getOSDTime();
      getOSDTimePromise.then((data) => {
        console.log("promise 获取 数据", data)
      })
    }
    function capturePicture() {
      var capturePicturePromise = playr.capturePicture();
      capturePicturePromise.then((data) => {
        console.log("promise 获取 数据", data)
      })
    }
    function openSound() {
      var openSoundPromise = playr.openSound();
      openSoundPromise.then((data) => {
        console.log("promise 获取 数据", data)
      })
    }
    function closeSound() {
      var closeSoundPromise = playr.closeSound();
      closeSoundPromise.then((data) => {
        console.log("promise 获取 数据", data)
      })
    }
    function startSave() {
      var startSavePromise = playr.startSave();
      startSavePromise.then((data) => {
        console.log("promise 获取 数据", data)
      })
    }
    function stopSave() {
      var stopSavePromise = playr.stopSave();
      stopSavePromise.then((data) => {
        console.log("promise 获取 数据", data)
      })
    }
    function ezopenStartTalk() {
      playr.startTalk();
    }
    function ezopenStopTalk() {
      playr.stopTalk();
    }
  </script>
</body>

</html>
要在 uniapp 微信小程序中接入萤石,您需要完成以下步骤: 1.注册并登录萤石开发者平台,创建应用并获取 AppKey 和 AppSecret。 2.uniapp 项目中安装并引入微信小程序官方提供的“微信小程序 API”插件。 3.uniapp 项目中安装并引入“uni-axios”插件,用于发送 HTTP 请求。 4.编写代码实现用户授权登录并获取 AccessToken。 5.编写代码实现调用萤石提供的 API,例如获取设备列表、打开直播预览等。 下面是一个简单的示例代码: ```javascript // 引入 axios 模块 import axios from 'uni-axios' // 用户授权登录并获取 AccessToken async function login() { const res = await axios.post('https://open.ys7.com/api/lapp/token/get', { appKey: 'your_app_key', appSecret: 'your_app_secret' }) return res.data.data.accessToken } // 获取设备列表 async function getDeviceList(accessToken) { const res = await axios.get('https://open.ys7.com/api/lapp/device/list', { headers: { Authorization: `Bearer ${accessToken}` } }) return res.data.data.deviceList } // 打开直播预览 async function openLivePreview(accessToken, deviceSerial, channelNo) { const res = await axios.post('https://open.ys7.com/api/lapp/live/address/get', { accessToken, deviceSerial, channelNo }) return res.data.data.url } // 调用示例 async function main() { // 用户授权登录并获取 AccessToken const accessToken = await login() // 获取设备列表 const deviceList = await getDeviceList(accessToken) // 打开直播预览 const livePreviewUrl = await openLivePreview(accessToken, deviceList[0].deviceSerial, 1) console.log(livePreviewUrl) } main() ``` 请注意,以上代码仅供参考,实际应用中还需要考虑错误处理、用户体验等方面的问题。
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值