完成sip的广播播放和试听

languages/en.js

@@ -682,8 +682,9 @@ module.exports = {
     stop: 'Stop',
     playManually: 'Play manually',
     audition: 'Audition',
-    playbackSuccessful: 'Playback successful',
     auditionEnd: 'End of audition',
+    playing: 'Playing ===> ',
+    playbackSuccessful: 'Playback successful',
     playOrder: 'Play order',
     playOrderMsg: 'Playing order is required',
     broadcastFrameGroup: 'Broadcast area',

languages/es.js

@@ -682,8 +682,9 @@ module.exports = {
     stop: 'para',
     playManually: 'Reproducir manualmente',
     audition: 'Audición',
-    playbackSuccessful: 'Reproducción exitosa',
     auditionEnd: 'Fin de la audición',
+    playing: 'Se está reproduciendo ===> ',
+    playbackSuccessful: 'Reproducción exitosa',
     playOrder: 'Orden de reproducción',
     playOrderMsg: 'Se requiere orden de reproducción',
     broadcastFrameGroup: 'Área de transmisión',

languages/ru-RU.js

@@ -678,8 +678,9 @@ module.exports = {
     stop: 'Стоп',
     playManually: 'Воспроизвести вручную',
     audition: 'Прослушивание',
-    playingSuccessful: 'Воспроизведение успешно',
     auditionEnd: 'Конец прослушивания',
+    playing: 'Включается. ===> ',
+    playingSuccessful: 'Воспроизведение успешно',
     playOrder: 'Порядок воспроизведения',
     playOrderMsg: 'Требуется порядок воспроизведения',
     broadcastFrameGroup: 'Область трансляции',

languages/zh-CN.js

@@ -683,6 +683,7 @@ module.exports = {
     playManually: '手动播放',
     audition: '试听',
     auditionEnd: '试听结束',
+    playing: '正在播放 ===> ',
     playbackSuccessful: '播放成功',
     playOrder: '播放顺序',
     playOrderMsg: '播放顺序必填',

src/api/calling-broadcast.js

@@ -148,3 +148,24 @@ export function auditionStop(part_id) {
     url: `/streaming/audition_stop/${part_id}`
   })
 }
+
+export function playAudio(id, part_id) {
+  return request({
+    method: 'get',
+    url: `/ncs/broadcast/play_audio/${id}/${part_id}`
+  })
+}
+
+export function stopAudio(id, part_id) {
+  return request({
+    method: 'get',
+    url: `/ncs/broadcast/stop_audio/${id}/${part_id}`
+  })
+}
+
+export function getBroadcastFileList(id) {
+  return request({
+    method: 'get',
+    url: `/ncs/broadcast/get_broadcast_file_list/${id}`
+  })
+}

src/views/ncs-broadcast/index.vue

@@ -78,6 +78,30 @@
       </span>
     </el-dialog>
 
+    <el-dialog :title="this.$t('broadcast.audition')" width="300" :visible="auditionPlay" :show-close="false">
+      <el-row>
+        <el-col v-if="audioName.length > 0" :span="24" >
+          {{  this.$t('broadcast.playing') + audioName[audioIndex] }}
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-progress :show-text="false" :text-inside="true" :stroke-width="30" :percentage="auditionPositionPercent" status="success"></el-progress>
+      </el-row>
+      <div v-if="audioList.length > 0">
+        <audio
+            :src="audioList[audioIndex]"
+            autoplay="autoplay"
+            ref="audios"
+            style="width: 300px;height:100px;"
+            @ended="audioFinished"
+        >
+        </audio>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="streamingStop(true)">{{ this.$t('broadcast.stop') }}</el-button>
+      </span>
+    </el-dialog>
+
     <!-- 新建广播弹窗 -->
     <el-dialog :title.sync="formtitle" :visible.sync="formshow" width="55%">
       <div>
@@ -212,6 +236,7 @@ import ListFilter from '@/components/AgGridCustomFilter/ListFilter'
 import RadioFilter from '@/components/AgGridCustomFilter/RadioFilter'
 import { Janus } from 'janus-gateway'
 import * as API_BroadcastFiles from '@/api/calling-broadcastFiles'
+import {playAudio, stopAudio} from "@/api/calling-broadcast";
 const serverUrl = domain.serverUrl
 const DeviceUrl = domain.DeviceUrl
 
@@ -245,6 +270,13 @@ export default {
       manulPlay: false,
       currentRow: null,
 
+      audioTotalTime: 0,
+      audioTime: 0,
+      audioList: [],
+      audioIndex: 0,
+      auditionPlay: false,
+      audioName: [],
+
       tableData: [],
       /** 列表参数 */
       params: {
@@ -310,7 +342,8 @@ export default {
         { key: this.$t('broadcast.scheduledPlay'), value: 2 }
       ],
       websocket: null,
-      scheduledIds: []
+      scheduledIds: [],
+      serverInfo: []
     }
   },
   computed: {
@@ -402,6 +435,12 @@ export default {
                 buttonType: 'danger',
                 buttonSize: 'mini'
               },
+              // {
+              //     onClick: this.playAudio,
+              //     label: this.$t('broadcast.play'),
+              //     buttonType: 'primary',
+              //     buttonSize: 'mini'
+              // } ,
               {
                 onClick: () => {
                   param.data.playing ? this.stopBroadcast(param.data) : this.playBroadcast(param.data)
@@ -410,7 +449,8 @@ export default {
                 buttonType: param.data.playing ? 'danger' : 'primary',
                 buttonSize: 'mini',
                 disabled: param.data.broadcast_mode !== 1 || !param.data.status
-              },{
+              },
+              {
                 label: this.$t('broadcast.audition'),
                 buttonSize: 'mini',
                 buttonType: 'success',
@@ -459,9 +499,7 @@ export default {
       ]
     })
     this.getAllFrameGroups()
-    if (this.rtcServer === null || this.rtcServer === "") {
-      this.getRtcServer()
-    }
+    this.getServerInfo()
 
     this.initAuditionWebSocket()
     // Janus.init({
@@ -476,18 +514,22 @@ export default {
 
     const _this = this
     //每分钟检查一次websocket状态，如果掉线，则重连
-    setInterval(function() {
-      if (_this.janus === null) {
-        if (_this.rtcServer !== null && _this.rtcServer !== "") {
-          _this.connect(this.rtcServer)
-        } else {
-          this.getRtcServer()
+    if (this.serverInfo.voice_type === "rtc") {
+      setInterval(function () {
+        if (_this.janus === null) {
+          if (_this.rtcServer !== null && _this.rtcServer !== "") {
+            _this.connect(this.rtcServer)
+          } else {
+            this.getRtcServer()
+          }
         }
-      }
-      if (_this.websock === null) {
-        _this.initAuditionWebSocket()
-      }
-    }, 60000)
+        if (_this.websock === null) {
+          _this.initAuditionWebSocket()
+        }
+      }, 60000)
+    }
+
+    this.Time()
   },
   methods: {
     windowResize() {
@@ -525,31 +567,55 @@ export default {
       this.deleteStreaming(row.id)
     },
     playBroadcast(row) {
-      API_Broadcast.manulStart(row.id).then(res=>{
-        const result = res.data
-        if (!result.success){
-          this.$message({
-            type: 'error',
-            message: result.message
-          })
-        } else {
-          this.$message({
-            type: 'success',
-            message: this.$t('broadcast.playbackSuccessful')
-          })
-          row.playing = true
-          this.gridApi.redrawRows()
-          this.manulPlay = true
-          this.currentRow = row
-        }
-      })
+      console.log(row)
+      if (this.serverInfo.voice_type === "rtc") {
+        API_Broadcast.manulStart(row.id).then(res => {
+          const result = res.data
+          if (!result.success) {
+            this.$message({
+              type: 'error',
+              message: result.message
+            })
+          } else {
+            this.$message({
+              type: 'success',
+              message: this.$t('broadcast.playbackSuccessful')
+            })
+            row.playing = true
+            this.gridApi.redrawRows()
+            this.manulPlay = true
+            this.currentRow = row
+          }
+        })
+      }
+      else {
+        this.audioTotalTime = 0
+        API_Broadcast.playAudio(row.id, this.$store.getters.partId).then(res => {
+          this.audioTotalTime = res
+        })
+        row.playing = true
+        this.manulPlay = true
+        this.currentRow = row
+      }
     },
     stopBroadcast(row) {
-      row.playing = false
-      this.gridApi.redrawRows()
-      this.manulPlay = false
-      this.currentRow = null
-      API_Broadcast.manulStop(this.$store.getters.partId, row.id)
+      console.log(row)
+      if (this.serverInfo.voice_type === "rtc") {
+        row.playing = false
+        this.gridApi.redrawRows()
+        this.manulPlay = false
+        this.currentRow = null
+        API_Broadcast.manulStop(this.$store.getters.partId, row.id)
+      }
+      else {
+        row.playing = false
+        this.manulPlay = false
+        this.currentRow = null
+        this.audioTime = 0
+        this.audioTotalTime = 0
+
+        API_Broadcast.stopAudio(row.id, this.$store.getters.partId)
+      }
     },
     /**
      * 创建广播
@@ -707,14 +773,16 @@ export default {
           delete this.formmodel.id
           this.formmodel.part_id = this.$store.getters.partId
           //判断 janus 是否连接状态
-          if (this.janus === null) {
-            if (this.rtcServer === null || this.rtcServer === ""){
-              this.getRtcServer()
-            } else {
-              this.connect(this.rtcServer)
+          if (this.serverInfo.voice_type === "rtc") {
+            if (this.janus === null) {
+              if (this.rtcServer === null || this.rtcServer === "") {
+                this.getRtcServer()
+              } else {
+                this.connect(this.rtcServer)
+              }
+              this.$message.error(this.$t('action.saveAgain'))
+              return
             }
-            this.$message.error(this.$t('action.saveAgain'))
-            return
           }
 
           API_Broadcast.add(this.formmodel).then(result => {
@@ -1017,47 +1085,107 @@ export default {
       }})
     },
     streamingStart(id) {
-      API_Broadcast.auditionStart(id).then(res=>{
-        const result = res.data
-        if (!result.success){
-          this.$message({
-            type: 'error',
-            message: result.message
-          })
-        } else {
-          this.pluginHandle.send({ message: { request: "watch", id: id } })
-        }
-      })
+      if (this.serverInfo.voice_type === "rtc") {
+        API_Broadcast.auditionStart(id).then(res => {
+          const result = res.data
+          if (!result.success) {
+            this.$message({
+              type: 'error',
+              message: result.message
+            })
+          } else {
+            this.pluginHandle.send({message: {request: "watch", id: id}})
+          }
+        })
+      } else {
+        API_Broadcast.getBroadcastFileList(id).then(res => {
+          const filesUri = res.files_uri
+          for (let i = 0; i < filesUri.length; i++) {
+            this.audioList.push(DeviceUrl + filesUri[i])
+          }
+
+          const broadcastFiles = res.broadcast_files
+          for (let i = 0; i < broadcastFiles.length; i++) {
+            this.audioName.push(broadcastFiles[i].file_name)
+          }
+
+          this.auditionPlay = true
+         })
+      }
+    },
+    audioFinished() {
+      if (this.audioIndex < this.audioList.length - 1) {
+        this.audioIndex++
+      } else {
+        this.streamingStop("")
+      }
     },
     streamingStop(personClose) {
-      this.pluginHandle.send({ message: { request: "stop" } })
-      this.pluginHandle.hangup()
-      this.onCleanup()
-      if (personClose) {
-        API_Broadcast.auditionStop(this.$store.getters.partId)
+      if (this.serverInfo.voice_type === "rtc") {
+        this.pluginHandle.send({message: {request: "stop"}})
+        this.pluginHandle.hangup()
+        this.onCleanup()
+        if (personClose) {
+          API_Broadcast.auditionStop(this.$store.getters.partId)
+        }
+        this.auditionMsg = null
+      } else {
+        this.$refs.audios.pause()
+        this.auditionPlay = false
+        this.audioIndex = 0
+        this.audioList = []
+        this.audioTotalTime = 0
+        this.audioTime = 0
       }
-      this.auditionMsg = null
     },
     onCleanup() {
       this.stream = null
     },
     getRtcServer() {
-      API_ServiceInfo.getServiceInfo().then(r => {
-        const result = r
-        console.log("result", result)
-        this.rtcServer = "ws://" +  r.rtc_public_ip + ":" + r.rtc_port + "/janus"
+      this.rtcServer = "ws://" +  this.serverInfo.rtc_public_ip + ":" + this.serverInfo.rtc_port + "/janus"
 
-        Janus.init({
-          debug: false,
-          dependencies: Janus.useDefaultDependencies(),
-          callback: () => {
-            if (this.rtcServer !== null && this.rtcServer !== "") {
-              this.connect(this.rtcServer)
-            }
+      Janus.init({
+        debug: false,
+        dependencies: Janus.useDefaultDependencies(),
+        callback: () => {
+          if (this.rtcServer !== null && this.rtcServer !== "") {
+            this.connect(this.rtcServer)
           }
-        })
+        }
       })
-    }
+    },
+    getServerInfo() {
+      API_ServiceInfo.getServiceInfo().then(response => {
+        this.serverInfo = response;
+        console.log("response", response)
+
+        if (response.voice_type === "rtc") {
+          if (this.rtcServer === null || this.rtcServer === "") {
+            this.getRtcServer()
+          }
+        }
+      })
+    },
+    playAudio(row) {
+      API_Broadcast.playAudio(row.id, this.$store.getters.partId).then(res => {
+        this.audioTotalTime = res
+      })
+    },
+    Time() {
+      setInterval(() => {
+        if (this.audioList.length > 0) {
+          this.audioTotalTime = this.$refs.audios.duration
+        }
+        if (this.audioTotalTime !== 0 && !isNaN(this.audioTotalTime)) {
+          this.audioTime += 1
+          this.auditionPositionPercent = this.audioTime / this.audioTotalTime * 100
+          if (this.audioTime >= Math.floor(this.audioTotalTime) || isNaN(this.audioTotalTime)) {
+            this.audioTime = 0
+            this.audioTotalTime = 0
+          }
+        }
+      }, 1000)
+    },
   }
 }
 </script>