乐橙云监控视频ImouPlayer + vite + vue

 一，接入前准备

        1.appId（控制台-我的应用）

        2.appSecret（控制台-我的应用）

        3.乐橙云轻应用开发指南（快速跳转）

        4.资源包下载（快速跳转）

二， 简单讲一下我这个项目

        是根据乐橙云轻应用组件二次封装开发的，是可以通过链接直接查看监控视频的一个小项目，就是为了满足公司有多个平台需要给接入查看监控视频的一个需求。因为还是刚开发调试阶段，还有很多不是很合理的地方需要调整，但是现在提供出来的代码是完全可以运行成功的。直接访问链接例如：

http://localhost:5173/?deviceId='AA06CC1XXXXXXXX'&width='600'&height='100'

三，直接上代码

        1.使用vite脚手架，初始化一个项目vue项目，将下载的资源文件中的imou-player.css和imou-player.js拖入到项目中并在index.html中引入。

        2.该项目有用到axios和crypto-js依赖，可使用npm install axios 和 npm install crypto-js下载。

        3.创建index.vue文件，初始化这个文件。

        4.根据开发文档来看，重点是怎么获取accessToken和kitToken，话不多说直接上代码。

5.当获取到了kitToken就简单了，根据开发文档写就可以。由于kitToken有效期为两个小时，代码中使用了一个定时器每隔一个小时重新获取一下kitToken，这里使用了一个监听，当kitToken变化时重新加载监控视频。

四，源码

<script setup>
import { ref, onMounted, onBeforeMount, onBeforeUnmount, watch } from 'vue'
import axios from 'axios'
import CryptoJS from 'crypto-js'

const kitToken = ref('')
const accessToken = ref('')
const timerKit = ref(null)
const timerAccess = ref(null)
const deviceId = ref('xxxxxxx')
const channelId = ref('0')
const width = ref(window.clientWidth || window.innerWidth )
const height = ref(window.clientHeight-20 || window.innerHeight-20 )
const videoId = ref('v-main')

onBeforeMount(() => {
  deviceId.value = getUrlParam('deviceId') || 'xxxxxxx'
  channelId.value = getUrlParam('channelId') || '0'
  width.value = getUrlParam('width') || window.clientWidth || window.innerWidth
  height.value = getUrlParam('height') || window.clientHeight -20 || window.innerHeight -20
  videoId.value = getUrlParam('videoId') || 'v-main'
  if(isMobile()){
    // h5模式
  }else{
    // pc模式
  }
})

watch(kitToken, (newValue) => {
  let player = new imouPlayer({
    id: videoId.value || 'v-main',
    width: width.value,
    height: height.value,
    // 设备序列号
    deviceId: deviceId.value || '0',
    token: newValue || '0',
    channelId: channelId.value || 0,
    // 1 直播  2 录播
    type: 1,
    // 直播 0 高清  1 标清  默认
    streamId: 0,
    // 录播 云录像 1 本地录像 localRecord 默认 云录像
    recordType: 'localRecord',
    // 如果设备设置了自定义音视频加密秘钥，则输入此秘钥；
    // 如果设备只设置了设备密码，则输入设备密码；其他情况默认设备序列号。
    code: deviceId.value,
  })
  player.play()
})

onMounted(() => {
  if (accessToken.value) {
    if (kitToken.value) {
      let player = new imouPlayer({
        id: videoId.value || 'v-main',
        width: width.value,
        height: height.value,
        // 设备序列号
        deviceId: deviceId.value,
        token: kitToken.value,
        channelId: props.channelId,
        // 1 直播  2 录播
        type: 1,
        // 直播 0 高清  1 标清  默认
        streamId: 0,
        // 录播 云录像 1 本地录像 localRecord 默认 云录像
        recordType: 'localRecord',
        // 如果设备设置了自定义音视频加密秘钥，则输入此秘钥；
        // 如果设备只设置了设备密码，则输入设备密码；其他情况默认设备序列号。
        code: deviceId.value,
      })
      player.play()
    } else {
      getToken(accessToken.value)
    }
  } else {
    getAccessToken()
  }
})

onBeforeUnmount(() => {
  clearInterval(timerAccess)
  clearInterval(timerKit)
  timerAccess.value = null
  timerKit.value = null
})

function getToken(token) {
  const time = getTime()
  const nonce = Math.random().toString(36).substr(2)
  const appSecret = 'xxxxxxx'
  const sign = calcSign(time, nonce, appSecret)
  const id = Math.floor(Math.random() * (50 - 1 + 1) + 1)
  let params = {
    system: {
      ver: '1.0',
      appId: 'xxxxxxx',
      sign: sign,
      time: time,
      nonce: nonce,
    },
    id: id,
    params: {
      token: token,
      deviceId: deviceId.value,
      channelId: channelId.value,
      type: '0',
    },
  }
  //写法一
  axios.post('/api/openapi/getKitToken', params).then((res) => {
    //执行成功后代码处理
    kitToken.value = res.data.result.data.kitToken
    if (res.data.result.data.kitToken) {
      timerKit.value = setInterval(() => {
        getToken()
      }, 3600000)
    }
  })
}

function getAccessToken() {
  const time = getTime()
  const nonce = Math.random().toString(36).substr(2)
  const appSecret = 'xxxxxxx'
  const sign = calcSign(time, nonce, appSecret)
  const id = Math.floor(Math.random() * (50 - 1 + 1) + 1)
  let params = {
    system: {
      ver: '1.0',
      appId: 'xxxxxxx',
      sign: sign,
      time: time,
      nonce: nonce,
    },
    id: id,
    params: {},
  }
  axios.post('/api/openapi/accessToken', params).then((res) => {
    if(res.data.result.code == 0){
      accessToken.value = res.data.result.data.accessToken
      if (res.data.result.data.accessToken) {
        timerAccess.value = setInterval(() => {
          getAccessToken()
        }, 3600000 * 48)
      }
      getToken(res.data.result.data.accessToken)
    }else{
      alert(res.data.result.msg)
    }
  })
}

function getTime() {
  var timestamp = Math.round(new Date().getTime() / 1000)
  return timestamp
}

function calcSign(timestamp, nonce, appSecret) {
  var str = 'time:' + timestamp + ',nonce:' + nonce + ',appSecret:' + appSecret
  var sign = CryptoJS.MD5(str).toString()
  return sign
}

function getUrlParam(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  var r = window.location.search.substr(1).match(reg)
  if (r != null) {
    return decodeURI(r[2])
      .replace(/'/g, '') // 去掉单引号
      .replace(/"/g, '') // 去掉双引号
      .replace(/\s/g, '')
  }
  return null
}
function isMobile() {
    const userAgentInfo = navigator.userAgent;
    const mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
     const mobileFlag = mobileAgents.some((mobileAgent) => {
       return userAgentInfo.indexOf(mobileAgent) > 0;
      });
    return mobileFlag;
}
</script>

<template>
  <div :id="videoId || 'v-main'" class="v-main"></div>
</template>

<style scoped>
.v-main {
  width: 100%;
  height: 100%;
}
</style>