销售直播代码 直播间连接rtmp服务器拉取直播页面

package.json

@@ -67,6 +67,7 @@
     "echarts": "4.2.1",
     "element-ui": "2.15.5",
     "file-saver": "2.0.1",
+    "flv.js": "^1.6.2",
     "form-making": "^1.2.9",
     "fuse.js": "^3.4.4",
     "js-beautify": "1.10.2",

src/api/live/live.js

@@ -66,3 +66,10 @@ export function selectCompanyTalent(query) {
     method: 'get'
   })
 }
+
+export function getLivingUrl(liveId) {
+  return request({
+    url: '/live/live/living/' + liveId,
+    method: 'get'
+  })
+}

src/api/live/liveGoods.js

@@ -53,9 +53,10 @@ export function exportLiveGoods(query) {
 }
 
 // 导出直播商品
-export function listStoreProduct() {
+export function listStoreProduct(data) {
   return request({
     url: '/store/storeProduct/list',
-    method: 'get'
+    method: 'get',
+    params: data
   })
 }

src/views/live/gift/index.vue

@@ -179,7 +179,7 @@ export default {
         description: null,
         status: null
       },
-      statusOptions:{},
+      statusOptions:[],
       // 表单参数
       form: {},
       // 表单校验

src/views/live/liveConfig/index.vue

@@ -333,7 +333,6 @@
             <div v-if="marketItem.name == 'goods'">
 
               <el-button type="primary" icon="el-icon-plus" style="margin: 20px 0;" @click="handleAddLiveGoods">添加商品</el-button>
-              <!-- 试题列表表格 -->
               <el-table
                 :data="goodsLiveList"
                 style="width: 100%"
@@ -346,17 +345,36 @@
                   show-overflow-tooltip
                 ></el-table-column>
 
-                <!-- 题型列：显示是单选还是多选 -->
                 <el-table-column
-                  prop="storeId"
-                  label="店铺id"
+                  label="商品图片"
                 >
+                  <template slot-scope="scope">
+                    <img
+                      :src="scope.row.imgUrl"
+                      style="display: block; max-width: 100%; width: 100px; height: 100px"
+                    />
+                  </template>
+
                 </el-table-column>
 
-                <!-- 创建时间列：显示试题创建的时间 -->
                 <el-table-column
-                  prop="productId"
-                  label="商品id"
+                  prop="productName"
+                  label="商品名称"
+                ></el-table-column>
+
+                <el-table-column
+                  prop="price"
+                  label="价格"
+                ></el-table-column>
+
+                <el-table-column
+                  prop="stock"
+                  label="库存"
+                ></el-table-column>
+
+                <el-table-column
+                  prop="sales"
+                  label="销量"
                 ></el-table-column>
 
                 <!-- 操作列：包含编辑和删除按钮 -->
@@ -366,7 +384,6 @@
                   fixed="right"
                 >
                   <template slot-scope="scope">
-                    <!-- 删除按钮：用于移除试题 -->
                     <el-button
                       type="text"
                       size="small"
@@ -414,13 +431,11 @@
                     @row-click="handleGoodsRowClick"
                     row-key="id"
                   >
-                    <!-- 复选框列：用于多选试题 -->
                     <el-table-column
                       type="selection"
                       width="55"
                     >
                     </el-table-column>
-                    <!-- 题干列：显示试题的主要内容 -->
                     <el-table-column
                       prop="storeName"
                       label="商铺名称"
@@ -484,7 +499,7 @@ import {
   addConfig,
   updateConfig
 } from '@/api/live/liveQuestionLive'
-import {listLiveGoods, delLiveGoods, listStoreProduct} from '@/api/live/liveGoods'
+import {listLiveGoods, delLiveGoods, listStoreProduct,addLiveGoods} from '@/api/live/liveGoods'
 export default {
   name: 'LiveConfig',
   data() {
@@ -667,7 +682,7 @@ export default {
     },
     getLiveGoodsList() {
       this.loading = true
-      listLiveGoods().then(response => {
+      listLiveGoods({liveId: this.liveId}).then(response => {
         this.goodsLiveList = response.rows
         this.goodsLiveTotal = response.total
         this.loading = false
@@ -743,7 +758,7 @@ export default {
       }
       addLiveGoods({
         liveId: this.liveId,
-        goodsIds: this.selectedGoods.map(item => item.goodsId).join(',')
+        productsId: this.selectedGoods.map(item => item.productId).join(',')
       }).then(response => {
         this.goodsDialogVisible = false
         this.getLiveGoodsList()
@@ -822,7 +837,7 @@ export default {
 
     },
     getStoreProductLists() {
-      listStoreProduct().then(response => {
+      listStoreProduct({liveId:this.liveId}).then(response => {
         this.goodsList = response.rows
         this.goodsTotal = response.total
         this.loading = false

src/views/live/liveConsole/index.vue

@@ -12,6 +12,7 @@
                 <el-row type="flex" align="middle">
                   <el-col :span="4" style="padding-left: 10px;"><el-avatar :src="u.avatar"></el-avatar></el-col>
                   <el-col :span="19" :offset="1">{{ u.nickName }}</el-col>
+                  <el-col :span="19" :offset="1">{{ u.userId }}</el-col>
                 </el-row>
               </el-col>
               <el-col :span="4" >
@@ -32,6 +33,7 @@
                 <el-row type="flex" align="middle">
                   <el-col :span="4" style="padding-left: 10px;"><el-avatar :src="u.avatar"></el-avatar></el-col>
                   <el-col :span="19" :offset="1">{{ u.nickName }}</el-col>
+                  <el-col :span="19" :offset="1">{{ u.userId }}</el-col>
                 </el-row>
               </el-col>
               <el-col :span="4" >
@@ -52,6 +54,7 @@
                 <el-row type="flex" align="middle">
                   <el-col :span="4" style="padding-left: 10px;"><el-avatar :src="u.avatar"></el-avatar></el-col>
                   <el-col :span="19" :offset="1">{{ u.nickName }}</el-col>
+                  <el-col :span="19" :offset="1">{{ u.userId }}</el-col>
                 </el-row>
               </el-col>
               <el-col :span="4" >
@@ -75,40 +78,40 @@
         <div style="border-radius: 5px; overflow: hidden;">
           <video
             controls
+            ref="videoPlayer"
             autoplay
-            :src="this.liveVideo.videoUrl"
             width="100%"
             style="display: block; background: #000;"
           ></video>
         </div>
       </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>
-            <span style="font-size: 12px; margin-top: 4px;">语音</span>
-          </div>
-          <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">
-            <i class="el-icon-video-camera" 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;">
-            <i class="el-icon-share" 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;">
-            <i class="el-icon-message" 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;">
-            <i class="el-icon-goods" 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;">
-            <i class="el-icon-menu" style="font-size: 20px;"></i>
-            <span style="font-size: 12px; margin-top: 4px;">工具箱</span>
-          </div>
-        </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>-->
+<!--            <span style="font-size: 12px; margin-top: 4px;">语音</span>-->
+<!--          </div>-->
+<!--          <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">-->
+<!--            <i class="el-icon-video-camera" 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;">-->
+<!--            <i class="el-icon-share" 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;">-->
+<!--            <i class="el-icon-message" 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;">-->
+<!--            <i class="el-icon-goods" 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;">-->
+<!--            <i class="el-icon-menu" style="font-size: 20px;"></i>-->
+<!--            <span style="font-size: 12px; margin-top: 4px;">工具箱</span>-->
+<!--          </div>-->
+<!--        </div>-->
     </el-col>
     <!-- 直播/视频 end -->
 
@@ -176,8 +179,10 @@
 <script>
 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';
 
 export default {
   name: "LiveConsole",
@@ -189,6 +194,7 @@ export default {
       tabRight: {
         activeName: "talk",
       },
+      livingUrl:"",
       liveVideo: {},
       socket: null,
       liveWsUrl: process.env.VUE_APP_LIVE_WS_URL + '/app/webSocket',
@@ -209,8 +215,9 @@ export default {
   },
   created() {
     // this.getLiveVideo()
-    // this.getList()
+    this.getList()
     this.connectWebSocket()
+    this.getLiveUrl()
   },
   computed: {
     liveId() {
@@ -251,6 +258,32 @@ export default {
     }
   },
   methods: {
+    getLiveUrl(){
+      getLivingUrl(this.liveId).then(res=>{
+        if(res.code === 200){
+          this.livingUrl = res.livingUrl
+          this.initPlayer()
+        }
+      })
+    },
+    initPlayer(){
+      if (flvjs.isSupported()) {
+        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
+        });
+        flvPlayer.attachMediaElement(videoElement);
+        flvPlayer.load();
+        flvPlayer.play();
+      }
+    },
     handleClick(tab) {
       console.log("click",tab.name)
       console.log("liveId", this.liveId)
@@ -385,7 +418,6 @@ export default {
       })
     },
     connectWebSocket() {
-      console.log(this.liveWsUrl)
       let socket = new LiveWS(this.liveWsUrl, this.liveId, this.userId);
       socket.onmessage = (event) => this.handleWsMessage(event)
       this.socket = socket
@@ -414,14 +446,16 @@ export default {
           })
         }
         else if (cmd === 'entry' || cmd === 'out') {
-          let user = JSON.parse(data.data)
-          this.userList = this.userList.filter(u => u.userId !== user.userId)
+
+          let user = data
+          if(this.userList.length > 0){
+            this.userList = this.userList.filter(u => u.userId !== user.userId)
+          }
           this.userList.push(user)
         }
       }
     },
     sendMessage() {
-      console.log(this.newMsg);
       // 发送前简单校验
       if (this.newMsg.trim() === '') {
         return;