总台直播代码提交

package.json

@@ -65,9 +65,9 @@
     "element-ui": "2.15.5",
     "esdk-obs-browserjs": "^3.24.3",
     "file-saver": "2.0.4",
-    "flv.js": "^1.6.2",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
+    "hls.js": "^1.6.7",
     "image-conversion": "^2.1.1",
     "js-beautify": "1.13.0",
     "js-cookie": "2.2.1",

src/store/index.js

@@ -6,6 +6,7 @@ import tagsView from './modules/tagsView'
 import permission from './modules/permission'
 import settings from './modules/settings'
 import getters from './getters'
+import {LiveWS} from "@/utils/liveWS";
 
 Vue.use(Vuex)
 
@@ -17,7 +18,21 @@ const store = new Vuex.Store({
     permission,
     settings
   },
-  getters
+  getters,
+  state: {
+    liveWs: null
+  },
+  mutations: {
+    setLiveWs(state, ws) {
+      state.liveWs = ws
+    },
+  },
+  actions: {
+    initLiveWs({ commit }, { liveWsUrl, liveId, userId }) {
+      const ws = new LiveWS(liveWsUrl, liveId, userId)
+      commit('setLiveWs', ws)
+    }
+  }
 })
 
 export default store

src/utils/liveWS.js

@@ -12,7 +12,7 @@ export class LiveWS {
     let timestamp = new Date().getTime()
     let userType = 1
     let signature = CryptoJS.HmacSHA256(
-      CryptoJS.enc.Utf8.parse(liveId + userId + userType + timestamp), 
+      CryptoJS.enc.Utf8.parse(liveId + userId + userType + timestamp),
       CryptoJS.enc.Utf8.parse(timestamp)).toString(CryptoJS.enc.Hex)
     this.url = url + `?liveId=${liveId}&userId=${userId}&userType=${userType}&timestamp=${timestamp}&signature=${signature}`;
     this.liveId = liveId;
@@ -108,4 +108,9 @@ export class LiveWS {
       console.error("WebSocket is not open. Message not sent.");
     }
   }
+
+  sendWs( cmd,msg,id,liveId){
+    let entity = JSON.stringify({'cmd':cmd,'msg':msg, 'liveId': liveId, 'userId': id});
+    this.ws.send(entity);
+  }
 }

src/views/live/liveConsole/index.vue

@@ -87,12 +87,12 @@
       </div>
       <!-- 底部导航栏 -->
       <div style="display: flex; justify-content: space-around; padding: 15px 0; background: #fff; border-top: 1px solid #f0f0f0;">
-        <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">
-          <i class="el-icon-microphone" style="font-size: 20px;"></i>
+        <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="handleClickRed">
+          <i class="el-icon-money" style="font-size: 20px;"></i>
           <span style="font-size: 12px; margin-top: 4px;">红包配置</span>
         </div>
         <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="handleClickLottery">
-          <i class="el-icon-microphone" style="font-size: 20px;"></i>
+          <i class="el-icon-present" style="font-size: 20px;"></i>
           <span style="font-size: 12px; margin-top: 4px;">抽奖配置</span>
         </div>
         <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">
@@ -189,13 +189,13 @@ import { changeUserStatus, watchUserList } from '@/api/live/liveWatchUser'
 import { getLiveVideoByLiveId } from '@/api/live/liveVideo'
 import { getLivingUrl } from '@/api/live/live'
 import { listLiveMsg } from '@/api/live/liveMsg'
-import { LiveWS } from '@/utils/liveWS'
-import flvjs from 'flv.js';
+import Hls from 'hls.js';
 import LiveLotteryConf from '@/views/live/liveLotteryConf/index.vue'
+import LiveRedConf from '@/views/live/liveRedConf/index.vue'
 
 export default {
   name: "LiveConsole",
-  components: { LiveLotteryConf },
+  components: { LiveLotteryConf,LiveRedConf },
   data() {
     return {
       tabLeft: {
@@ -206,7 +206,6 @@ export default {
       },
       livingUrl:"",
       liveVideo: {},
-      socket: null,
       liveWsUrl: process.env.VUE_APP_LIVE_WS_URL + '/app/webSocket',
       userParams:{
         pageNum: 1,
@@ -230,6 +229,9 @@ export default {
     this.getLiveUrl()
   },
   computed: {
+    socket(){
+      return this.$store.state.liveWs
+    },
     liveId() {
       return this.$route.params.liveId;
     },
@@ -269,7 +271,6 @@ export default {
   },
   methods: {
     handleClickLottery(){
-      //this.$router.push('/live/liveLotteryConf/'+this.liveId);
       this.$router.push({
         name: 'LiveLotteryConf',
         query: {
@@ -277,6 +278,14 @@ export default {
         }
       })
     },
+    handleClickRed(){
+      this.$router.push({
+        name: 'LiveRedConf',
+        query: {
+          liveId: this.liveId
+        }
+      })
+    },
     getLiveUrl(){
       getLivingUrl(this.liveId).then(res=>{
         if(res.code === 200){
@@ -287,21 +296,16 @@ export default {
     },
     initPlayer(){
       var isUrl = this.livingUrl === null || this.livingUrl.trim() === ''
-      if (flvjs.isSupported() && !isUrl) {
+      if (Hls.isSupported() && !isUrl) {
         const videoElement = this.$refs.videoPlayer
-        var flvPlayer = flvjs.createPlayer({
-          type: 'flv',
-          // qfedu 是推流的时候的路径名称
-          // dixon 是stream 自定义的名称
-          url: this.livingUrl,
-          enableWorker: true,
-          enableStashBuffer: false, // 禁用内部缓冲区
-          stashInitialSize: 128,   // 减小初始缓冲大小
-          autoCleanupSourceBuffer: true
+        const hls = new Hls();
+        hls.attachMedia(videoElement);
+        hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+          hls.loadSource(this.livingUrl);
+          hls.on(Hls.Events.STREAM_LOADED, (event, data) => {
+            videoElement.play();
+          });
         });
-        flvPlayer.attachMediaElement(videoElement);
-        flvPlayer.load();
-        flvPlayer.play();
       }
     },
     handleClick(tab) {
@@ -438,9 +442,12 @@ export default {
       })
     },
     connectWebSocket() {
-      let socket = new LiveWS(this.liveWsUrl, this.liveId, this.userId);
-      socket.onmessage = (event) => this.handleWsMessage(event)
-      this.socket = socket
+      this.$store.dispatch('initLiveWs', {
+        liveWsUrl: this.liveWsUrl,
+        liveId: this.liveId,
+        userId: this.userId
+      })
+      this.socket.onmessage = (event) => this.handleWsMessage(event)
     },
     handleWsMessage(event) {
       let { code, data } = JSON.parse(event.data)

src/views/live/liveLotteryConf/index.vue

@@ -693,7 +693,7 @@ export default {
       };
       updateLiveLotteryConf(doLotteryParam).then(response => {
         if(response.code === 200){
-          sendWs("lottery",response.msg, row.lotteryId,this.liveId);
+          this.$store.state.liveWs.sendWs("lottery",response.msg, row.lotteryId,this.liveId);
           this.msgSuccess("修改成功");
         }else{
           this.msgError(response.msg);

src/views/live/liveRedConf/index.vue

@@ -207,7 +207,7 @@ export default {
       redTypeOptions: [],
       canLiveId:false,
       //parentLiveId
-      parentLiveId : this.liveId,
+      parentLiveId : null,
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -271,6 +271,7 @@ export default {
     this.getDicts("sys_live_red_type").then(response => {
       this.redTypeOptions = response.data;
     });
+    this.parentLiveId = this.liveId;
     this.queryParams.liveId = this.parentLiveId;
     if(this.queryParams.liveId){
       this.form.liveId = this.parentLiveId;
@@ -322,7 +323,7 @@ export default {
       };
       updateLiveRedConf(doRedParam).then(response => {
         if(response.code === 200){
-          sendWs("red",response.msg, row.redId,this.liveId);
+          this.$store.state.liveWs.sendWs("red",response.msg, row.redId,this.liveId);
           this.msgSuccess("修改成功");
         }else{
           this.msgError(response.msg);