aiot-app/wx-h5/src/components/video-ctl/index.vue

<template>
  <view class="video-ctl-content">
    <view class="video-content">
      <video id="myVideo" src="https://wvp.wenhq.top:40001/rtp/34020000001320000103_34020000001320000001.live.mp4"
             controls muted autoplay ref="videoPlay"></video>
    </view>
    <view class="video-compass-content">
      <view class="compass">
        <view class="compass-btn"></view>
        <view class="compass-btn clickable">
          <up-icon size="40" color="#fefefe" name="arrow-up" @click="()=> onCommand('up')"></up-icon>
        </view>
        <view class="compass-btn"></view>
        <view class="compass-btn clickable">
          <up-icon size="40" color="#fefefe" name="arrow-left" @click="()=> onCommand('left')"></up-icon>
        </view>
        <view class="compass-btn"></view>
        <view class="compass-btn clickable">
          <up-icon size="40" color="#fefefe" name="arrow-right" @click="()=> onCommand('right')"></up-icon>
        </view>
        <view class="compass-btn"></view>
        <view class="compass-btn clickable">
          <up-icon size="40" color="#fefefe" name="arrow-down" @click="()=> onCommand('down')"></up-icon>
        </view>
        <view class="compass-btn"></view>
      </view>
    </view>
  </view>

</template>

<script setup lang="ts">
import {ref, watchEffect} from 'vue'
import {videoCommand} from "@/api/device.js";

const props = defineProps({
  stream: {
    type: String,
    default: ""
  }
})
const videoPlay = ref(null)
const playStream = ref(null)
const onCommand = (command) => {
  videoCommand({
    deviceNo: "34020000001320000103",
    tunnel: "34020000001320000001",
    command
  })
}
watchEffect(() => {
  playStream.value = props.stream
})
</script>

<script lang="ts">
export default {
  options: {
    styleIsolation: 'shared',
    name: 'video-ctl'
  }
}

</script>
<style scoped lang="scss">
.video-ctl-content {
  width: 100%;

  .video-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-compass-content {
    margin-top: 20rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .compass {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;


      .compass-btn {
        width: 100rpx;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        &.clickable {
          background: #3c9cff;
        }
      }
    }
  }
}
</style>