shangyun/Web/src/components/deviceLive/index.vue

<template>
  <div class="deviceLive">
    <div class="deviceLive-frames">
      <LivePlayer :text="state.playerText" :url="state.playerUrl" />
    </div>
    <div class="deviceLive-operation">
      <a-select style="width:150px;margin-right: 13px;" placeholder="摄像头" v-model:value="state.cameraValue">
        <a-select-option v-for="item in state.cameraList" :key="item.value" :value="item.value"
          @click="onCameraSelect(item)">
          {{ item.label }}
        </a-select-option>
      </a-select>
      <a-select style="width:150px;margin-right: 13px;" placeholder="清晰度" v-model:value="state.clarityValue"
        @select="onClaritySelect">
        <a-select-option v-for="item in clarityList" :key="item.value" :value="item.value">
          {{ item.label }}
        </a-select-option>
      </a-select>
      <a-button style="margin-right: 13px;" type="primary" large @click="onStart">播放</a-button>
      <a-button type="primary" large @click="onStop">停止</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import LivePlayer from '/@/components/livePlayer/index.vue';
import { CURRENT_CONFIG as config } from '/@/api/http/config';
import { getLiveCapacity, startLivestream, stopLivestream } from '/@/api/manage';

interface Props {
  sn: string,
};

const props = withDefaults(defineProps<Props>(), {

});

interface SelectOption {
  value: any,
  label: string,
  more?: any
}

const clarityList: SelectOption[] = [
  {
    value: 0,
    label: '自适应'
  },
  {
    value: 1,
    label: '流畅'
  },
  {
    value: 2,
    label: '标清'
  },
  {
    value: 3,
    label: '高清'
  },
  {
    value: 4,
    label: '超清'
  }
]

interface State {
  cameraList: SelectOption[],
  cameraValue?: string,
  videoList: SelectOption[],
  videoValue?: string,
  clarityValue: number,
  videoId: string,
  playerText: string,
  playerUrl: string,
}

const state: State = reactive({
  cameraList: [],
  cameraValue: undefined,
  videoList: [],
  videoValue: undefined,
  clarityValue: 0,
  videoId: '',
  playerText: '',
  playerUrl: '',
})

const fetchLiveCapacity = async () => {
  try {
    const res = await getLiveCapacity({});
    if (res.code === 0) {
      const deviceInfo = res.data.filter((item: any) => item.sn === props.sn)[0];
      const cameras_list = deviceInfo.cameras_list || [];
      const cameraList = cameras_list.map((item: any) => {
        return {
          label: item.name,
          value: item.index,
          more: item.videos_list
        }
      })
      state.cameraList = cameraList;
    }
  } catch (e: any) {
    console.error(e);
  }
}

onMounted(async () => {
  await fetchLiveCapacity()
})

const onCameraSelect = (record: SelectOption) => {
  state.cameraValue = record.value;
  if (!record.more) {
    return
  }
  const videoList = record.more.map((ele: any) => {
    return {
      label: ele.type,
      value: ele.index,
      more: ele.switch_video_types
    }
  })
  state.videoList = videoList;
  if (videoList.length === 0) {
    return;
  }
  const firstVideo: SelectOption = videoList[0];
  state.videoValue = firstVideo.value;
}

const onClaritySelect = (value: any) => {
  state.clarityValue = value;
}

const onStart = async () => {
  const { cameraValue, videoValue } = state;
  if (!cameraValue) {
    return message.warn('请选择摄像头');
  }
  const videoId = `${props.sn}/${cameraValue}/${videoValue || 'normal-0'}`;
  state.videoId = videoId;
  const liveURL = config.rtmpURL;
  try {
    const res = await startLivestream({
      url: liveURL,
      video_id: videoId,
      url_type: 1,// RTMP 
      video_quality: state.clarityValue
    });
    if (res.code !== 0) {
      state.playerText = res.message;
    } else {
      const playerUrl = res.data.url;
      state.playerText = '';
      state.playerUrl = playerUrl;
      message.success('已开启直播');
    }
  } catch (e: any) {
    console.error(e);
  }
}

const onStop = async () => {
  const { cameraValue, videoValue } = state;
  if (!cameraValue) {
    return message.warn('请选择摄像头');
  }
  const videoId = `${props.sn}/${cameraValue}/${videoValue || 'normal-0'}`;
  const res = await stopLivestream({
    video_id: videoId,
  });
  if (res.code === 0) {
    state.videoId = '';
    state.playerUrl = '';
    message.success('已停止直播');
  }
}
</script>

<style lang="scss" scoped>
.deviceLive {
  width: 100%;

  &-frames {
    width: 100%;
    height: 270px;
  }

  &-operation {
    margin-top: 20px;
  }
}
</style>