From 440fb1d3478b76c023fcf20344b0602d712d1700 Mon Sep 17 00:00:00 2001
From: sean.zhou <sean.zhou@dji.com>
Date: Mon, 01 Aug 2022 10:17:33 +0800
Subject: [PATCH] delete
---
/dev/null | 351 ----------------------------------------------------------
1 files changed, 0 insertions(+), 351 deletions(-)
diff --git a/src/pages/project-app/projects/livestream-agora.vue b/src/pages/project-app/projects/livestream-agora.vue
deleted file mode 100644
index cad4c24..0000000
--- a/src/pages/project-app/projects/livestream-agora.vue
+++ /dev/null
@@ -1,327 +0,0 @@
-<template>
- <div class="flex-column flex-justify-start flex-align-center">
- <p class="fz24">Live streaming source selection</p>
- <div class="flex-row flex-justify-center flex-align-center mt10">
- <a-select
- style="width:150px"
- placeholder="Select Drone"
- @select="onDroneSelect"
- >
- <a-select-option
- v-for="item in dronePara.droneList"
- :key="item.value"
- :value="item.value"
- >{{ item.label }}</a-select-option
- >
- </a-select>
- <a-select
- class="ml10"
- style="width:150px"
- placeholder="Select Camera"
- @select="onCameraSelect"
- >
- <a-select-option
- v-for="item in dronePara.cameraList"
- :key="item.value"
- :value="item.value"
- >{{ item.label }}</a-select-option
- >
- </a-select>
- <a-select
- class="ml10"
- style="width:150px"
- placeholder="Select Lens"
- @select="onVideoSelect"
- >
- <a-select-option
- class="ml10"
- v-for="item in dronePara.videoList"
- :key="item.value"
- :value="item.value"
- >{{ item.label }}</a-select-option
- >
- </a-select>
- <a-select
- class="ml10"
- style="width:150px"
- placeholder="Select Clarity"
- @select="onClaritySelect"
- >
- <a-select-option
- v-for="item in clarityList"
- :key="item.value"
- :value="item.value"
- >{{ item.label }}</a-select-option
- >
- </a-select>
- </div>
- <p class="fz24 mt10">Agora Parameter</p>
- <p class="fz16">
- Note: Obtain The Following Parameters From https://console.agora.io
- </p>
- <div class="flex-row flex-justify-center flex-align-center">
- <a-input v-model:value="agoraPara.appid" placeholder="APP ID"></a-input>
- <a-input
- class="ml10"
- v-model:value="agoraPara.token"
- placeholder="Token"
- ></a-input>
- <a-input
- class="ml10"
- v-model:value="agoraPara.channel"
- placeholder="Channel"
- ></a-input>
- </div>
- <div class="mt20">
- <p class="fz20">
- Livestate:{{ livePara.liveState == false ? 'Stop' : 'Playing' }}
- </p>
- </div>
- <div class="mt10 flex-row flex-justify-center flex-align-center">
- <a-button type="primary" large @click="onStart">Play</a-button>
- <a-button class="ml20" type="primary" large @click="onStop"
- >Stop</a-button
- >
- <a-button class="ml20" type="primary" large @click="onRefresh"
- >Refresh Live Capacity</a-button
- >
- </div>
- <div id="player"></div>
- </div>
-</template>
-
-<script lang="ts" setup>
-import AgoraRTC from 'agora-rtc-sdk-ng'
-import { onMounted, reactive } from 'vue'
-import { CURRENT_CONFIG as config } from '/@/api/http/config'
-import { getLiveCapacity, startLivestream, stopLivestream } from '/@/api/manage'
-import { getRoot } from '/@/root'
-
-const root = getRoot()
-
-const clarityList = [
- {
- value: 0,
- label: 'Adaptive'
- },
- {
- value: 1,
- label: 'Smooth'
- },
- {
- value: 2,
- label: 'Standard'
- },
- {
- value: 3,
- label: 'HD'
- },
- {
- value: 4,
- label: 'Super Clear'
- }
-]
-
-let agoraClient = {} as any
-const agoraPara = reactive({
- appid: config.agoraAPPID,
- token: config.agoraToken,
- channel: config.agoraChannel,
- uid: null,
- stream: {}
-})
-const dronePara = reactive({
- livestreamSource: [],
- droneList: [],
- cameraList: [],
- videoList: [],
- droneSelected: '',
- cameraSelected: '',
- videoSelected: '',
- claritySelected: ''
-})
-const livePara = reactive({
- url: '',
- webrtc: {} as any,
- videoId: '',
- liveState: false
-})
-
-const onRefresh = async () => {
- await getLiveCapacity({})
- .then(res => {
- console.log(res)
- if (res.code === 0) {
- if (res.data === null) {
- console.warn('warning: get live capacity is null!!!')
- return
- }
- dronePara.livestreamSource = res.data
- dronePara.droneList = []
-
- console.log('live_capacity:', dronePara.livestreamSource)
-
- if (dronePara.livestreamSource) {
- dronePara.livestreamSource.forEach((ele: any) => {
- dronePara.droneList.push({ label: ele.sn, value: ele.sn })
- })
- console.log(dronePara.droneList)
- }
- }
- })
- .catch(error => {
- console.error(error)
- })
-}
-
-onMounted(() => {
- onRefresh()
- agoraClient = AgoraRTC.createClient({ mode: 'live', codec: 'h264' })
- agoraClient.setClientRole('audience')
-
- // Subscribe when a remote user publishes a stream
- agoraClient.on('user-published', async (user: any, mediaType: string) => {
- await agoraClient.subscribe(user, mediaType)
- if (mediaType === 'video') {
- console.log('subscribe success')
- // Get `RemoteVideoTrack` in the `user` object.
- const remoteVideoTrack = user.videoTrack
- // Dynamically create a container in the form of a DIV element for playing the remote video track.
- const remotePlayerContainer: any = document.getElementById('player')
- // Specify the ID of the DIV container. You can use the `uid` of the remote user.
- remotePlayerContainer.id = agoraPara.uid
- remotePlayerContainer.textContent = 'uid: ' + agoraPara.uid
- remotePlayerContainer.style.width = '640px'
- remotePlayerContainer.style.height = '480px'
- remoteVideoTrack.play(remotePlayerContainer)
- }
- })
- agoraClient.on('user-unpublished', async (user: any) => {
- console.log('unpublish live:', user)
- await agoraClient.leave()
- })
-})
-
-const handleError = (err: any) => {
- console.error(err)
-}
-const handleJoinChannel = (uid: any) => {
- agoraPara.uid = uid
-}
-
-const onStart = async () => {
- const that = this
- console.log(
- 'drone parameter：',
- dronePara.droneSelected,
- dronePara.cameraSelected,
- dronePara.videoSelected,
- dronePara.claritySelected
- )
- const timestamp = new Date().getTime().toString()
- const liveTimestamp = timestamp
- if (
- dronePara.droneSelected == null ||
- dronePara.cameraSelected == null ||
- dronePara.videoSelected == null ||
- dronePara.claritySelected == null
- ) {
- console.warn('waring: not select live para!!!')
- }
- livePara.videoId =
- dronePara.droneSelected +
- '/' +
- dronePara.cameraSelected +
- '/' +
- dronePara.videoSelected
- console.log(agoraPara)
- await agoraClient
- .join(agoraPara.appid, agoraPara.channel, agoraPara.token, null)
- .then((res: any) => {
- console.log('agora uid:', res)
- agoraPara.uid = res
- })
- console.log(agoraPara.token)
- agoraPara.token = encodeURIComponent(agoraPara.token)
- console.log('agoraToken:', agoraPara.token)
- livePara.url =
- 'channel=' +
- agoraPara.channel +
- '&sn=' +
- dronePara.droneSelected +
- '&token=' +
- agoraPara.token +
- '&uid=' +
- agoraPara.uid
-
- await startLivestream({
- url: livePara.url,
- video_id: livePara.videoId,
- url_type: 0,
- video_quality: dronePara.claritySelected
- })
- .then(res => {
- livePara.liveState = true
- })
- .catch(err => {
- console.error(err)
- })
-}
-const onStop = async () => {
- stopLivestream({
- video_id: livePara.videoId
- }).then(res => {
- livePara.liveState = false
- console.log('stop play livestream')
- })
-}
-const onDroneSelect = (val: any) => {
- dronePara.droneSelected = val
- if (dronePara.droneSelected) {
- const droneTemp = dronePara.livestreamSource
- droneTemp.forEach(ele => {
- const drone = ele
- if (drone.sn === dronePara.droneSelected) {
- const cameraListTemp = drone.cameras_list
- dronePara.cameraList = []
- cameraListTemp.forEach((ele: any) => {
- dronePara.cameraList.push({ label: ele.name, value: ele.index })
- })
- }
- })
- }
-}
-const onCameraSelect = (val: any) => {
- dronePara.cameraSelected = val
-
- if (dronePara.cameraSelected) {
- const droneTemp = dronePara.livestreamSource
- droneTemp.forEach(ele => {
- const drone = ele
- if (drone.sn === dronePara.droneSelected) {
- const cameraListTemp = drone.cameras_list
- cameraListTemp.forEach((ele: any) => {
- const camera = ele
- if (camera.index === dronePara.cameraSelected) {
- const videoListTemp = camera.videos_list
- dronePara.videoList = []
- videoListTemp.forEach((ele: any) => {
- dronePara.videoList.push({ label: ele.type, value: ele.index })
- })
- }
- })
- }
- })
- }
-}
-const onVideoSelect = (val: any) => {
- dronePara.videoSelected = val
-}
-const onClaritySelect = (val: any) => {
- dronePara.claritySelected = val
-}
-</script>
-
-<style lang="scss" scoped>
-@import '/@/styles/index.scss';
-</style>
diff --git a/src/pages/project-app/projects/livestream-others.vue b/src/pages/project-app/projects/livestream-others.vue
deleted file mode 100644
index 0eeaba2..0000000
--- a/src/pages/project-app/projects/livestream-others.vue
+++ /dev/null
@@ -1,351 +0,0 @@
-<template>
- <div class="flex-column flex-justify-start flex-align-center">
- <video
- :style="{ width: '720px', height: '480px' }"
- id="video-webrtc"
- ref="videowebrtc"
- controls
- class="mt20"
- ></video>
- <p class="fz24">Live streaming source selection</p>
- <div class="flex-row flex-justify-center flex-align-center mt10">
- <a-select
- style="width: 150px"
- placeholder="Select Live Type"
- @select="onLiveTypeSelect"
- >
- <a-select-option
- v-for="item in liveTypeList"
- :key="item.label"
- :value="item.value"
- >
- {{ item.label }}
- </a-select-option>
- </a-select>
- <a-select
- class="ml10"
- style="width:150px"
- placeholder="Select Drone"
- @select="onDroneSelect"
- >
- <a-select-option
- v-for="item in droneList"
- :key="item.value"
- :value="item.value"
- >{{ item.label }}</a-select-option
- >
- </a-select>
- <a-select
- class="ml10"
- style="width:150px"
- placeholder="Select Camera"
- @select="onCameraSelect"
- >
- <a-select-option
- v-for="item in cameraList"
- :key="item.value"
- :value="item.value"
- >{{ item.label }}</a-select-option
- >
- </a-select>
- <a-select
- class="ml10"
- style="width:150px"
- placeholder="Select Lens"
- @select="onVideoSelect"
- >
- <a-select-option
- class="ml10"
- v-for="item in videoList"
- :key="item.value"
- :value="item.value"
- >{{ item.label }}</a-select-option
- >
- </a-select>
- <a-select
- class="ml10"
- style="width:150px"
- placeholder="Select Clarity"
- @select="onClaritySelect"
- >
- <a-select-option
- v-for="item in clarityList"
- :key="item.value"
- :value="item.value"
- >{{ item.label }}</a-select-option
- >
- </a-select>
- </div>
- <div class="mt20">
- <p class="fz20">Livestate:{{ liveState == 0 ? 'Stop' : 'Playing' }}</p>
- <p class="fz10" v-if="livetypeSelected == 2">
- Please use VLC media player to play the RTSP livestream !!!
- </p>
- <p class="fz10" v-if="livetypeSelected == 2">
- RTSP Parameter:{{ rtspData }}
- </p>
- </div>
- <div class="mt10 flex-row flex-justify-center flex-align-center">
- <a-button type="primary" large @click="onStart">Play</a-button>
- <a-button class="ml20" type="primary" large @click="onStop"
- >Stop</a-button
- >
- <a-button class="ml20" type="primary" large @click="onRefresh"
- >Refresh Live Capacity</a-button
- >
- </div>
- </div>
-</template>
-
-<script lang="ts" setup>
-import { message } from 'ant-design-vue'
-import { onMounted, ref } from 'vue'
-import { CURRENT_CONFIG as config } from '/@/api/http/config'
-import { getLiveCapacity, startLivestream, stopLivestream } from '/@/api/manage'
-import { getRoot } from '/@/root'
-import jswebrtc from '/@/vendors/jswebrtc.min.js'
-const root = getRoot()
-
-const liveTypeList = [
- {
- value: 1,
- label: 'RTMP'
- },
- {
- value: 2,
- label: 'RTSP'
- },
- {
- value: 3,
- label: 'GB28181'
- }
-]
-const clarityList = [
- {
- value: 0,
- label: 'Adaptive'
- },
- {
- value: 1,
- label: 'Smooth'
- },
- {
- value: 2,
- label: 'Standard'
- },
- {
- value: 3,
- label: 'HD'
- },
- {
- value: 4,
- label: 'Super Clear'
- }
-]
-
-const videowebrtc = ref(null)
-const livestreamSource = ref()
-const droneList = ref()
-const cameraList = ref()
-const videoList = ref()
-const droneSelected = ref()
-const cameraSelected = ref()
-const videoSeleted = ref()
-const claritySeleted = ref()
-const videoId = ref()
-const liveState = ref(0)
-const livetypeSelected = ref()
-const rtspData = ref()
-
-const onRefresh = async () => {
- await getLiveCapacity({})
- .then(res => {
- console.log(res)
- if (res.code === 0) {
- if (res.data === null) {
- console.warn('warning: get live capacity is null!!!')
- return
- }
- const resData: Array<[]> = res.data
- console.log('live_capacity:', resData)
- livestreamSource.value = resData
- console.log(livestreamSource)
-
- const temp: Array<{}> = []
- if (livestreamSource.value) {
- livestreamSource.value.forEach(ele => {
- temp.push({ label: ele.sn, value: ele.sn })
- })
- console.log(temp)
- droneList.value = temp
- console.log(droneList.value)
- }
- }
- })
- .catch(error => {
- console.error(error)
- })
-}
-
-onMounted(() => {
- onRefresh()
-})
-const onStart = async () => {
- const that = this
- console.log(
- '直播参数：',
- livetypeSelected.value,
- droneSelected.value,
- cameraSelected.value,
- videoSeleted.value,
- claritySeleted.value
- )
- const timestamp = new Date().getTime().toString()
- const liveTimestamp = timestamp
- if (
- livetypeSelected.value == null ||
- droneSelected.value == null ||
- cameraSelected.value == null ||
- videoSeleted.value == null ||
- claritySeleted.value == null
- ) {
- console.warn('waring: not select live para!!!')
- return
- }
- videoId.value =
- droneSelected.value + '/' + cameraSelected.value + '/' + videoSeleted.value
- let liveURL = ''
- switch (livetypeSelected.value) {
- case 1: {
- // RTMP
- liveURL = config.rtmpURL + timestamp
- break
- }
- case 2: {
- // RTSP
- liveURL = config.rtspPara
- break
- }
- case 3: {
- // GB28181
- liveURL = config.gb28181Para
- break
- }
- default:
- console.warn('warning: live type is not correct!!!')
- break
- }
- await startLivestream({
- url: liveURL,
- video_id: videoId.value,
- url_type: livetypeSelected.value,
- video_quality: claritySeleted.value
- })
- .then(res => {
- if (livetypeSelected.value === 3) {
- const url = res.data.url
- const videoElement = videowebrtc.value
- // gb28181,it will fail if not wait.
- message.loading({
- content: '直播等待中。。。',
- duration: 4,
- onClose () {
- const player = new jswebrtc.Player(url, {
- video: videoElement,
- autoplay: true,
- onPlay: obj => {
- console.log('start play livestream')
- }
- })
- liveState.value = 1
- }
- })
- } else if (livetypeSelected.value === 2) {
- console.log(res)
- rtspData.value =
- 'url:' +
- res.data.url +
- '&username:' +
- res.data.username +
- '&password:' +
- res.data.password
- } else if (livetypeSelected.value === 1) {
- const url = res.data.url
- const videoElement = videowebrtc.value
- console.log('start live:', url)
- const player = new jswebrtc.Player(url, {
- video: videoElement,
- autoplay: true,
- onPlay: obj => {
- console.log('start play livestream')
- liveState.value = 1
- }
- })
- }
- })
- .catch(err => {
- console.error(err)
- })
-}
-const onStop = () => {
- stopLivestream({
- video_id: videoId.value
- }).then(res => {
- liveState.value = 0
- console.log('stop play livestream')
- })
-}
-const onLiveTypeSelect = (val: any) => {
- livetypeSelected.value = val
-}
-const onDroneSelect = (val: any) => {
- droneSelected.value = val
- const temp: Array<{}> = []
- if (droneSelected.value) {
- const droneTemp = livestreamSource.value
- droneTemp.forEach(ele => {
- const drone = ele
- if (drone.sn === droneSelected.value) {
- const cameraListTemp = drone.cameras_list
- cameraListTemp.forEach(ele => {
- temp.push({ label: ele.name, value: ele.index })
- })
- cameraList.value = temp
- }
- })
- }
-}
-const onCameraSelect = (val: any) => {
- cameraSelected.value = val
- const result: Array<{}> = []
- if (cameraSelected.value) {
- const droneTemp = livestreamSource.value
- droneTemp.forEach(ele => {
- const drone = ele
- if (drone.sn === droneSelected.value) {
- const cameraListTemp = drone.cameras_list
- cameraListTemp.forEach(ele => {
- const camera = ele
- if (camera.index === cameraSelected.value) {
- const videoListTemp = camera.videos_list
- videoListTemp.forEach(ele => {
- result.push({ label: ele.type, value: ele.index })
- })
- videoList.value = result
- }
- })
- }
- })
- }
-}
-const onVideoSelect = (val: any) => {
- videoSeleted.value = val
-}
-const onClaritySelect = (val: any) => {
- claritySeleted.value = val
-}
-</script>
-
-<style lang="scss" scoped>
-@import '/@/styles/index.scss';
-</style>
--
Gitblit v1.9.3