直播demo汉化

Web/src/components/GMap.vue

@@ -1195,7 +1195,7 @@ export default defineComponent({
   top: 10px;
   text-align: center;
   width: 800px;
-  height: 720px;
+  height: 660px;
   background: #232323;
 }
 </style>

Web/src/components/livestream-others.vue

@@ -1,66 +1,29 @@
 <template>
   <div class="flex-column flex-justify-start flex-align-center">
-    <video
-      :style="{ width: '720px', height: '480px' }"
-      id="video-webrtc"
-      ref="videowebrtc"
-      controls
-      autoplay
-      class="mt20"
-    ></video>
-    <p class="fz24">Live streaming source selection</p>
-
-    <div class="flex-row flex-justify-center flex-align-center mt10">
+    <video :style="{ width: '720px', height: '480px' }" id="video-webrtc" ref="videowebrtc" controls autoplay
+      class="mt20"></video>
+    <div class="flex-row flex-justify-center flex-align-center mt20">
       <template v-if="liveState && isDockLive">
         <span class="mr10">Lens:</span>
         <a-radio-group v-model:value="lensSelected" button-style="solid">
-          <a-radio-button v-for="lens in lensList" :key="lens" :value="lens">{{lens}}</a-radio-button>
+          <a-radio-button v-for="lens in lensList" :key="lens" :value="lens">{{ lens }}</a-radio-button>
         </a-radio-group>
       </template>
       <template v-else>
-      <a-select
-        style="width: 150px"
-        placeholder="Select Live Type"
-        @select="onLiveTypeSelect"
-        v-model:value="livetypeSelected"
-      >
-        <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"
-        v-model:value="droneSelected"
-      >
-        <a-select-option
-          v-for="item in droneList"
-          :key="item.value"
-          :value="item.value"
-          @click="onDroneSelect(item)"
-          >{{ item.label }}</a-select-option
-        >
-      </a-select>
-      <a-select
-        class="ml10"
-        style="width:150px"
-        placeholder="Select Camera"
-        v-model:value="cameraSelected"
-      >
-        <a-select-option
-          v-for="item in cameraList"
-          :key="item.value"
-          :value="item.value"
-          @click="onCameraSelect(item)"
-          >{{ item.label }}</a-select-option
-        >
-      </a-select>
-      <!-- <a-select
+        <a-select style="width: 150px" placeholder="选择直播类型" @select="onLiveTypeSelect" v-model:value="livetypeSelected">
+          <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="选择无人机" v-model:value="droneSelected">
+          <a-select-option v-for="item in droneList" :key="item.value" :value="item.value"
+            @click="onDroneSelect(item)">{{ item.label }}</a-select-option>
+        </a-select>
+        <a-select class="ml10" style="width:150px" placeholder="选择摄像头" v-model:value="cameraSelected">
+          <a-select-option v-for="item in cameraList" :key="item.value" :value="item.value"
+            @click="onCameraSelect(item)">{{ item.label }}</a-select-option>
+        </a-select>
+        <!-- <a-select
         class="ml10"
         style="width:150px"
         placeholder="Select Lens"
@@ -75,41 +38,30 @@
         >
       </a-select> -->
       </template>
-      <a-select
-        class="ml10"
-        style="width:150px"
-        placeholder="Select Clarity"
-        @select="onClaritySelect"
-        v-model:value="claritySelected"
-      >
-        <a-select-option
-          v-for="item in clarityList"
-          :key="item.value"
-          :value="item.value"
-          >{{ item.label }}</a-select-option
-        >
+      <a-select class="ml10" style="width:150px" placeholder="选择清晰度" @select="onClaritySelect"
+        v-model:value="claritySelected">
+        <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">
+    <div class="mt10">
       <p class="fz10" v-if="livetypeSelected == 2">
-        Please use VLC media player to play the RTSP livestream !!!
+        请使用VLC媒体播放器播放RTSP直播 !!!
       </p>
       <p class="fz10" v-if="livetypeSelected == 2">
-        RTSP Parameter:{{ rtspData }}
+        RTSP 参数:{{ rtspData }}
       </p>
     </div>
     <div class="mt10 flex-row flex-justify-center flex-align-center">
       <a-button v-if="liveState && isDockLive" type="primary" large @click="onSwitch">Switch Lens</a-button>
-      <a-button v-else 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="onUpdateQuality"
-        >Update Clarity</a-button
-      >
-      <a-button v-if="!liveState || !isDockLive" class="ml20" type="primary" large @click="onRefresh"
-        >Refresh Live Capacity</a-button
-      >
+      <a-button v-else type="primary" large @click="onStart">播放</a-button>
+      <a-button class="ml20" type="primary" large @click="onStop">停止</a-button>
+      <a-button class="ml20" type="primary" large @click="onUpdateQuality">
+        刷新清晰度
+      </a-button>
+      <a-button v-if="!liveState || !isDockLive" class="ml20" type="primary" large @click="onRefresh">
+        刷新直播
+      </a-button>
     </div>
   </div>
 </template>
@@ -203,13 +155,11 @@ const onRefresh = async () => {
       console.log(res)
       if (res.code === 0) {
         if (res.data === null) {
-          console.warn('warning: get live capacity is null!!!')
+          console.warn('警告:获取直播容量为空!!')
           return
         }
         const resData: Array<[]> = res.data
-        console.log('live_capacity:', resData)
         livestreamSource.value = resData
-
         const temp: Array<SelectOption> = []
         if (livestreamSource.value) {
           livestreamSource.value.forEach((ele: any) => {
@@ -244,7 +194,7 @@ const onStart = async () => {
     cameraSelected.value == null ||
     claritySelected.value == null
   ) {
-    message.warn('waring: not select live para!!!')
+    message.warn('警告:请完善直播参数!!')
     return
   }
   videoId.value =
@@ -270,7 +220,7 @@ const onStart = async () => {
       break
     }
     default:
-      console.warn('warning: live type is not correct!!!')
+      console.warn('警告:直播类型不正确!!')
       break
   }
   await startLivestream({
@@ -290,7 +240,7 @@ const onStart = async () => {
         message.loading({
           content: 'Loding...',
           duration: 4,
-          onClose () {
+          onClose() {
             const player = new jswebrtc.Player(url, {
               video: videoElement,
               autoplay: true,
@@ -337,14 +287,13 @@ const onStop = () => {
       message.success(res.message)
       liveState.value = false
       lensSelected.value = undefined
-      console.log('stop play livestream')
     }
   })
 }
 
 const onUpdateQuality = () => {
   if (!liveState.value) {
-    message.info('Please turn on the livestream first.')
+    message.info('请先打开直播')
     return
   }
   setLivestreamQuality({