|
@@ -0,0 +1,645 @@
|
|
|
|
+
|
|
|
|
+<template>
|
|
|
|
+ <div v-loading="isLoading">
|
|
|
|
+ <div class="red-box-content" >
|
|
|
|
+ <!-- 直播名称和关注 -->
|
|
|
|
+<!-- <span>直播名称:</span>-->
|
|
|
|
+<!-- <span>关注:</span>-->
|
|
|
|
+ <el-button v-show="status" @click="createLive" class="live-console-btn">开启直播 </el-button>
|
|
|
|
+ <el-button v-show="!status" @click="showLivingUrl" class="live-console-btn">推流地址</el-button>
|
|
|
|
+ <el-button v-show="!status" @click="closeLiving" class="live-console-btn">关闭直播</el-button>
|
|
|
|
+<!-- <el-button v-show="true" @click="createLive" class="live-console-btn">开启直播 </el-button>-->
|
|
|
|
+<!-- <el-button v-show="true" @click="showLivingUrl" class="live-console-btn">推流地址</el-button>-->
|
|
|
|
+<!-- <el-button v-show="true" @click="closeLiving" class="live-console-btn">关闭直播</el-button>-->
|
|
|
|
+
|
|
|
|
+ <!-- 视频流和TAB区域 -->
|
|
|
|
+ <el-row :gutter="20" >
|
|
|
|
+ <el-col :span="4">
|
|
|
|
+ <!-- 用户列表 start -->
|
|
|
|
+ <el-col class="live-console-col" >
|
|
|
|
+ <el-tabs class="live-console-tab-left" v-model="tabLeft.activeName" @tab-click="handleClick" :stretch="true">
|
|
|
|
+ <el-tab-pane :label="onlineLabel" name="online">
|
|
|
|
+ <el-scrollbar ref="manageLeftRef_online" style="width: 100%;">
|
|
|
|
+ <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in onlineUserList">
|
|
|
|
+ <el-col :span="20">
|
|
|
|
+ <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" >
|
|
|
|
+ <el-popover
|
|
|
|
+ width="100"
|
|
|
|
+ trigger="click">
|
|
|
|
+ <a style="cursor: pointer;color: #ff0000;" @click="changeUserState(u)">{{ u.msgStatus === 1 ? '解禁' : '禁言' }}</a>
|
|
|
|
+ <i class="el-icon-more" slot="reference"></i>
|
|
|
|
+ </el-popover>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </el-scrollbar>
|
|
|
|
+ </el-tab-pane>
|
|
|
|
+ <el-tab-pane :label="offlineLabel" name="offline">
|
|
|
|
+ <el-scrollbar ref="manageLeftRef_offline" style="width: 100%;">
|
|
|
|
+ <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in offlineUserList">
|
|
|
|
+ <el-col :span="20">
|
|
|
|
+ <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" >
|
|
|
|
+ <el-popover
|
|
|
|
+ width="100"
|
|
|
|
+ trigger="click">
|
|
|
|
+ <a style="cursor: pointer;color: #ff0000;" @click="changeUserState(u)">{{ u.msgStatus === 1 ? '解禁' : '禁言' }}</a>
|
|
|
|
+ <i class="el-icon-more" slot="reference"></i>
|
|
|
|
+ </el-popover>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </el-scrollbar>
|
|
|
|
+ </el-tab-pane>
|
|
|
|
+ <el-tab-pane :label="silencedUserLabel" name="silenced">
|
|
|
|
+ <el-scrollbar ref="manageLeftRef_silenced" style=" width: 100%;">
|
|
|
|
+ <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in silencedUserList">
|
|
|
|
+ <el-col :span="20">
|
|
|
|
+ <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" >
|
|
|
|
+ <el-popover
|
|
|
|
+ width="100"
|
|
|
|
+ trigger="click">
|
|
|
|
+ <a style="cursor: pointer;color: #ff0000;" @click="changeUserState(u)">{{ u.msgStatus === 1 ? '解禁' : '禁言' }}</a>
|
|
|
|
+ <i class="el-icon-more" slot="reference"></i>
|
|
|
|
+ </el-popover>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </el-scrollbar>
|
|
|
|
+ </el-tab-pane>
|
|
|
|
+ </el-tabs>
|
|
|
|
+ </el-col>
|
|
|
|
+ <!-- 用户列表 end -->
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="12">
|
|
|
|
+ <div style="background: #000; border-radius: 5px; overflow: hidden; margin: 10px 5px;">
|
|
|
|
+ <div style="border-radius: 5px; overflow: hidden;">
|
|
|
|
+ <video
|
|
|
|
+ controls
|
|
|
|
+ ref="videoPlayer"
|
|
|
|
+ autoplay
|
|
|
|
+ width="100%"
|
|
|
|
+ style="display: block; background: #000;"
|
|
|
|
+ ></video>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col class="live-console-col" :span="8">
|
|
|
|
+ <el-tabs class="live-console-tab-right" v-model="tabRight.activeName" @tab-click="handleClick">
|
|
|
|
+ <el-tab-pane label="聊天" name="talk">
|
|
|
|
+ <el-scrollbar style="height: 500px; width: 100%;" ref="manageRightRef">
|
|
|
|
+ <el-row v-for="m in msgList" >
|
|
|
|
+ <el-row v-if="m.userId !== userId" style="margin-top: 5px" type="flex" align="top" >
|
|
|
|
+ <el-col :span="3" style="margin-left: 10px"><el-avatar :src="m.avatar"/></el-col>
|
|
|
|
+ <el-col :span="15">
|
|
|
|
+ <el-row style="margin-left: 10px">
|
|
|
|
+ <el-col><div style="font-size: 12px; color: #999; margin-bottom: 3px;">{{ m.nickName }}</div></el-col>
|
|
|
|
+ <el-col :span="24" style="max-width: 200px;">
|
|
|
|
+ <div style="white-space: normal; word-wrap: break-word;background-color: #f0f2f5; padding: 8px; border-radius: 5px;font-size: 14px;width: 100%;">
|
|
|
|
+ {{ m.msg }}
|
|
|
|
+ </div>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col>
|
|
|
|
+ <a style="cursor: pointer;color: #ff0000;padding: 8px 8px 0 0;font-size: 12px;" @click="changeUserState(m)">{{ m.msgStatus === 1 ? '解禁' : '禁言' }}</a>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ <el-row v-if="m.userId === userId" style="padding: 8px 0" type="flex" align="top" justify="end">
|
|
|
|
+ <div style="display: flex;justify-content: flex-end">
|
|
|
|
+ <div style="display: flex;justify-content: flex-end;flex-direction: column;max-width: 200px;align-items: flex-end">
|
|
|
|
+ <div style="font-size: 12px; color: #999; margin-bottom: 3px;">{{ m.nickName }}</div>
|
|
|
|
+ <div style="white-space: normal; word-wrap: break-word;width: 100%; background-color: #e6f7ff; padding: 8px; border-radius: 5px;font-size: 14px;">{{ m.msg }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <el-avatar :src="m.avatar" style="margin-left: 10px; margin-right: 10px;"/>
|
|
|
|
+ </div>
|
|
|
|
+ </el-row>
|
|
|
|
+ </el-row>
|
|
|
|
+ <!-- 底部留白 -->
|
|
|
|
+ <div style="height: 20px;"></div>
|
|
|
|
+ </el-scrollbar>
|
|
|
|
+
|
|
|
|
+ <!-- 消息输入区域 -->
|
|
|
|
+ <div style="padding: 10px; border-top: 1px solid #ebeef5; background-color: #fff; min-height: 120px;">
|
|
|
|
+ <el-input
|
|
|
|
+ type="textarea"
|
|
|
|
+ v-model="newMsg"
|
|
|
|
+ placeholder="请输入消息..."
|
|
|
|
+ :rows="8"
|
|
|
|
+ @keyup.enter.native="sendMessage"
|
|
|
|
+ clearable
|
|
|
|
+ resize="none"
|
|
|
|
+ style="flex: 1; margin-right: 10px;"
|
|
|
|
+ >
|
|
|
|
+ </el-input>
|
|
|
|
+ <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
|
|
|
|
+ <el-button plain @click="sendMessage">发送</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-tab-pane>
|
|
|
|
+ </el-tabs>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </div>
|
|
|
|
+ <el-dialog
|
|
|
|
+ title="提示"
|
|
|
|
+ :visible.sync="rtmpUrlVisible"
|
|
|
|
+ width="30%"
|
|
|
|
+ >
|
|
|
|
+ <div>服务器地址:{{serverName}}</div>
|
|
|
|
+ <div>推流码:{{livingCode}}</div>
|
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
|
+ <el-button type="primary" @click="rtmpUrlVisible = false">确 定</el-button>
|
|
|
|
+ </span>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { changeUserStatus, watchUserList } from '@/api/live/liveWatchUser'
|
|
|
|
+import { checkLive, createLive, closeLiving } from '@/api/live/talentLive'
|
|
|
|
+import { listLiveMsg } from '@/api/live/liveMsg'
|
|
|
|
+import { getLivingUrl } from '@/api/live/live'
|
|
|
|
+import { LiveWS } from '@/utils/liveWS'
|
|
|
|
+import Hls from 'hls.js';
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ name: "TalentLive",
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ isLoading: true,
|
|
|
|
+ tabLeft: {
|
|
|
|
+ activeName: "online",
|
|
|
|
+ },
|
|
|
|
+ tabRight: {
|
|
|
|
+ activeName: "talk",
|
|
|
|
+ },
|
|
|
|
+ liveWsUrl: process.env.VUE_APP_LIVE_WS_URL + '/app/webSocket',
|
|
|
|
+ liveList: [
|
|
|
|
+ ],
|
|
|
|
+ liveId: '',
|
|
|
|
+ socket: null,
|
|
|
|
+ status: true,
|
|
|
|
+ livingUrl: '',
|
|
|
|
+ rtmpUrl: '',
|
|
|
|
+ rtmpUrlVisible:false,
|
|
|
|
+ userList: [],
|
|
|
|
+ userParams:{
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ liveId: null
|
|
|
|
+ },
|
|
|
|
+ msgList: [],
|
|
|
|
+ msgParams: {
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ liveId: null
|
|
|
|
+ },
|
|
|
|
+ newMsg: '',
|
|
|
|
+ serverName: '',
|
|
|
|
+ livingCode:'',
|
|
|
|
+ hls: null,
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ userId() {
|
|
|
|
+ return this.$store.state.user.user.userId
|
|
|
|
+ },
|
|
|
|
+ companyId() {
|
|
|
|
+ return this.$store.state.user.user.companyId
|
|
|
|
+ },
|
|
|
|
+ onlineUserList() {
|
|
|
|
+ return this.userList.filter(u => u.online === 0)
|
|
|
|
+ },
|
|
|
|
+ onlineLabel() {
|
|
|
|
+ if (this.onlineUserList.length > 0) {
|
|
|
|
+ return '在线(' + this.onlineUserList.length + ')'
|
|
|
|
+ }
|
|
|
|
+ return '在线'
|
|
|
|
+ },
|
|
|
|
+ offlineUserList() {
|
|
|
|
+ return this.userList.filter(u => u.online === 1)
|
|
|
|
+ },
|
|
|
|
+ offlineLabel() {
|
|
|
|
+ if (this.offlineUserList.length > 0) {
|
|
|
|
+ return '离线(' + this.offlineUserList.length + ')'
|
|
|
|
+ }
|
|
|
|
+ return '离线'
|
|
|
|
+ },
|
|
|
|
+ silencedUserList() {
|
|
|
|
+ return this.userList.filter(u => u.msgStatus === 1)
|
|
|
|
+ },
|
|
|
|
+ silencedUserLabel() {
|
|
|
|
+ if (this.silencedUserList.length > 0) {
|
|
|
|
+ return '禁言(' + this.silencedUserList.length + ')'
|
|
|
|
+ }
|
|
|
|
+ return '禁言'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.checkLive()
|
|
|
|
+ this.isLoading = false
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.checkUserNetwork();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ connectWebSocket() {
|
|
|
|
+ let socket = new LiveWS(this.liveWsUrl, this.liveId, this.userId);
|
|
|
|
+ socket.onmessage = (event) => this.handleWsMessage(event)
|
|
|
|
+ this.socket = socket
|
|
|
|
+ },
|
|
|
|
+ getList() {
|
|
|
|
+ this.resetParams()
|
|
|
|
+ this.loadUserList()
|
|
|
|
+ this.loadMsgList()
|
|
|
|
+ },
|
|
|
|
+ resetParams() {
|
|
|
|
+ this.userList= []
|
|
|
|
+ this.userParams = {
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ liveId: this.liveId
|
|
|
|
+ }
|
|
|
|
+ this.msgList = []
|
|
|
|
+ this.msgParams = {
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ liveId: this.liveId
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handleClick(tab) {
|
|
|
|
+ console.log("click",tab.name)
|
|
|
|
+ console.log("liveId", this.liveId)
|
|
|
|
+ },
|
|
|
|
+ createLive(){
|
|
|
|
+ createLive({"liveId": this.liveId}).then(res => {
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
+ this.status = false;
|
|
|
|
+ this.rtmpUrl = res.rtmpUrl
|
|
|
|
+ this.serverName = this.rtmpUrl.slice(0,this.rtmpUrl.lastIndexOf('/') + 1)
|
|
|
|
+ this.livingCode = this.rtmpUrl.slice(this.rtmpUrl.lastIndexOf('/') + 1)
|
|
|
|
+ this.rtmpUrlVisible = true
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error(res.msg);
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ showLivingUrl(){
|
|
|
|
+ this.rtmpUrlVisible = true
|
|
|
|
+ },
|
|
|
|
+ checkLive() {
|
|
|
|
+ checkLive({"companyId":this.companyId,"userId":this.userId}).then(res => {
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
+ this.liveId = res.data.liveId
|
|
|
|
+ if(res.data.status === 2) {
|
|
|
|
+ this.rtmpUrl = res.data.rtmpUrl
|
|
|
|
+ this.status = false
|
|
|
|
+ this.serverName = this.rtmpUrl.slice(0,this.rtmpUrl.lastIndexOf('/') + 1)
|
|
|
|
+ this.livingCode = this.rtmpUrl.slice(this.rtmpUrl.lastIndexOf('/') + 1)
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error(res.data.msg)
|
|
|
|
+ }
|
|
|
|
+ // 获取确认正在直播之后开始连接直播
|
|
|
|
+ if (this.status === false) {
|
|
|
|
+ this.getLiveUrl()
|
|
|
|
+ }
|
|
|
|
+ this.connectWebSocket();
|
|
|
|
+ this.getList()
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getLiveUrl(){
|
|
|
|
+ getLivingUrl(this.liveId).then(res=>{
|
|
|
|
+ if(res.code === 200) {
|
|
|
|
+ this.livingUrl = res.livingUrl
|
|
|
|
+ if (res.liveStatus === 2) {
|
|
|
|
+ this.initPlayer();
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ this.msgError(res.msg);
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ closeLiving(){
|
|
|
|
+ closeLiving({"liveId": this.liveId}).then(res=>{
|
|
|
|
+ if(res.code === 200) {
|
|
|
|
+ this.status = true
|
|
|
|
+ // 1. 停止视频播放
|
|
|
|
+ const videoElement = this.$refs.videoPlayer;
|
|
|
|
+ if (videoElement) {
|
|
|
|
+ videoElement.pause();
|
|
|
|
+ videoElement.src = '';
|
|
|
|
+ }
|
|
|
|
+ this.hls.destroy();
|
|
|
|
+ this.hls = null; // 重置 hls 实例
|
|
|
|
+ } else {
|
|
|
|
+ this.msgError(res.msg)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ loadUserList() {
|
|
|
|
+ // 直播间用户
|
|
|
|
+ watchUserList({
|
|
|
|
+ liveId: this.liveId,
|
|
|
|
+ pageNum: this.userParams.pageNum,
|
|
|
|
+ pageSize: this.userParams.pageSize
|
|
|
|
+ }).then(response => {
|
|
|
|
+ let {code,rows,total} = response
|
|
|
|
+ if (code === 200) {
|
|
|
|
+ let totalPage = (total % this.userParams.pageSize == 0) ? Math.floor(total / this.userParams.pageSize) : Math.floor(total / this.userParams.pageSize + 1);
|
|
|
|
+ rows.forEach(row => {
|
|
|
|
+ if (!this.userList.some(u => u.userId === row.userId)) {
|
|
|
|
+ this.userList.push(row)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ // 没加载完继续加载
|
|
|
|
+ if (this.userParams.pageNum < totalPage) {
|
|
|
|
+ this.userParams.pageNum = parseInt(this.userParams.pageNum) + 1;
|
|
|
|
+ this.loadUserList()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ loadMsgList() {
|
|
|
|
+ // 直播间消息
|
|
|
|
+ listLiveMsg({
|
|
|
|
+ liveId:this.liveId,
|
|
|
|
+ pageNum: this.msgParams.pageNum,
|
|
|
|
+ pageSize: this.msgParams.pageSize
|
|
|
|
+ }).then(response => {
|
|
|
|
+ let {code, rows,total} = response;
|
|
|
|
+ if (code === 200) {
|
|
|
|
+ let totalPage = (total % this.msgParams.pageSize == 0) ? Math.floor(total / this.msgParams.pageSize) : Math.floor(total / this.msgParams.pageSize + 1);
|
|
|
|
+ rows.forEach(row => {
|
|
|
|
+ if (!this.msgList.some(m => m.msgId === row.msgId)) {
|
|
|
|
+
|
|
|
|
+ let user = this.userList.find(u => u.userId === row.userId)
|
|
|
|
+ if (user) {
|
|
|
|
+ row.msgStatus = user.msgStatus
|
|
|
|
+ } else {
|
|
|
|
+ row.msgStatus = 0
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.msgList.push(row)
|
|
|
|
+
|
|
|
|
+ // 移动到底部
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.$refs.manageRightRef.wrap.scrollTop = this.$refs.manageRightRef.wrap.scrollHeight - this.$refs.manageRightRef.wrap.clientHeight
|
|
|
|
+ }, 200)
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ // 没加载完继续加载
|
|
|
|
+ if (this.msgParams.pageNum < totalPage) {
|
|
|
|
+ this.msgParams.pageNum = parseInt(this.msgParams.pageNum) + 1;
|
|
|
|
+ this.loadMsgList()
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 同步更新消息列表中相同用户的状态
|
|
|
|
+ this.userList.forEach(u => {
|
|
|
|
+ this.msgList.filter(m => m.userId === u.userId).forEach(m => m.msgStatus = u.msgStatus)
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ // 添加滚动监听
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.$refs.manageRightRef.wrap.addEventListener("scroll", this.manageRightScroll)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ initPlayer(){
|
|
|
|
+ var isUrl = this.livingUrl === null || this.livingUrl.trim() === ''
|
|
|
|
+ if (Hls.isSupported() && !isUrl) {
|
|
|
|
+ const videoElement = this.$refs.videoPlayer
|
|
|
|
+ // ✅ 配置项在这里传入
|
|
|
|
+ const config = {
|
|
|
|
+ lowLatencyMode: true, // 启用低延迟模式
|
|
|
|
+ liveSyncDuration: 1, // 与直播流同步的时间(秒)
|
|
|
|
+ maxBufferLength: 1, // 控制最大缓冲时间(秒)
|
|
|
|
+ backBufferLength: 30, // 控制回放缓存大小(单位:秒)
|
|
|
|
+ maxBufferSize: 1 * 1024 * 1024, // 最大缓存大小(字节)
|
|
|
|
+ liveMaxLatencyDuration: 3, // 最大延迟容忍值(秒)
|
|
|
|
+ };
|
|
|
|
+ this.hls = new Hls(config);
|
|
|
|
+ this.hls.attachMedia(videoElement);
|
|
|
|
+ this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
|
|
|
|
+ this.hls.loadSource(this.livingUrl);
|
|
|
|
+ this.hls.on(Hls.Events.STREAM_LOADED, (event, data) => {
|
|
|
|
+ videoElement.play();
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ changeUserState(u) {
|
|
|
|
+ // 修改状态
|
|
|
|
+ changeUserStatus({liveId: u.liveId, userId: u.userId}).then(response => {
|
|
|
|
+ let { code } = response;
|
|
|
|
+ if (200 === code) {
|
|
|
|
+ u.msgStatus = u.msgStatus === 0 ? 1 : 0
|
|
|
|
+ // 同步更新消息列表中相同用户的状态
|
|
|
|
+ this.msgList.forEach(msg => {
|
|
|
|
+ if (msg.userId === u.userId) {
|
|
|
|
+ msg.msgStatus = u.msgStatus;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ this.userList.forEach(user => {
|
|
|
|
+ if (user.userId === u.userId) {
|
|
|
|
+ user.msgStatus = u.msgStatus;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ let msg = u.msgStatus === 0 ? "已解禁" : "已禁言"
|
|
|
|
+ this.msgSuccess(msg);
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ this.msgError("操作失败");
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ handleWsMessage(event) {
|
|
|
|
+ let { code, data } = JSON.parse(event.data)
|
|
|
|
+ if (code === 200) {
|
|
|
|
+ let { cmd } = data
|
|
|
|
+ if (cmd === 'sendMsg') {
|
|
|
|
+
|
|
|
|
+ let message = JSON.parse(data.data)
|
|
|
|
+
|
|
|
|
+ let user = this.userList.find(u => u.userId === message.userId)
|
|
|
|
+ if (user) {
|
|
|
|
+ message.msgStatus = user.msgStatus
|
|
|
|
+ } else {
|
|
|
|
+ message.msgStatus = 0
|
|
|
|
+ }
|
|
|
|
+ delete message.params
|
|
|
|
+ this.msgList.push(message)
|
|
|
|
+
|
|
|
|
+ // 移动到底部
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.$refs.manageRightRef.wrap.scrollTop = this.$refs.manageRightRef.wrap.scrollHeight - this.$refs.manageRightRef.wrap.clientHeight
|
|
|
|
+ }, 200)
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ else if (cmd === 'entry' || cmd === 'out') {
|
|
|
|
+
|
|
|
|
+ let user = data
|
|
|
|
+ if(this.userList.length > 0){
|
|
|
|
+ this.userList = this.userList.filter(u => u.userId !== user.userId)
|
|
|
|
+ }
|
|
|
|
+ this.userList.push(user)
|
|
|
|
+ }
|
|
|
|
+ else if (cmd === 'live_start') {
|
|
|
|
+ console.log(data)
|
|
|
|
+ this.getLiveUrl();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ sendMessage() {
|
|
|
|
+ // 发送前简单校验
|
|
|
|
+ if (this.newMsg.trim() === '') {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ let msg = {
|
|
|
|
+ msg: this.newMsg,
|
|
|
|
+ liveId: this.liveId,
|
|
|
|
+ userId: this.userId,
|
|
|
|
+ userType: 1,
|
|
|
|
+ cmd: 'sendMsg',
|
|
|
|
+ avatar: this.$store.state.user.user.avatar,
|
|
|
|
+ nickName: this.$store.state.user.user.nickName
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.socket.send(JSON.stringify(msg))
|
|
|
|
+
|
|
|
|
+ this.newMsg = '';
|
|
|
|
+ },
|
|
|
|
+ async checkWebRTCNetworkQuality(stunServer = 'http://192.168.172.137:8080') {
|
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
|
+ const pc = new RTCPeerConnection({ iceServers: [{ urls: stunServer }] });
|
|
|
|
+ const dc = pc.createDataChannel('network-test');
|
|
|
|
+
|
|
|
|
+ pc.onicecandidate = async (event) => {
|
|
|
|
+ if (event.candidate) return;
|
|
|
|
+
|
|
|
|
+ try {
|
|
|
|
+ await pc.setLocalDescription(await pc.createOffer());
|
|
|
|
+ const offer = pc.localDescription;
|
|
|
|
+ await pc.setRemoteDescription(await pc.createAnswer());
|
|
|
|
+
|
|
|
|
+ setTimeout(async () => {
|
|
|
|
+ const stats = await pc.getStats();
|
|
|
|
+ let rtt = null;
|
|
|
|
+ let packetsLost = null;
|
|
|
|
+
|
|
|
|
+ stats.forEach(report => {
|
|
|
|
+ if (report.type === 'candidate-pair' && report.nominated) {
|
|
|
|
+ rtt = report.currentRoundTripTime * 1000; // ms
|
|
|
|
+ packetsLost = report.packetsLost || 0;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ pc.close();
|
|
|
|
+ resolve({ rtt, packetsLost });
|
|
|
|
+ }, 2000);
|
|
|
|
+ } catch (e) {
|
|
|
|
+ pc.close();
|
|
|
|
+ reject(e);
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ pc.oniceconnectionstatechange = () => {
|
|
|
|
+ if (pc.iceConnectionState === 'failed') {
|
|
|
|
+ pc.close();
|
|
|
|
+ reject('ICE 连接失败');
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ pc.createOffer().then(offer => pc.setLocalDescription(offer));
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 检测服务器延迟(ping)
|
|
|
|
+ async pingServer(url) {
|
|
|
|
+ const start = Date.now();
|
|
|
|
+ try {
|
|
|
|
+ await fetch(url, { method: 'HEAD', cache: 'no-cache' });
|
|
|
|
+ const latency = Date.now() - start;
|
|
|
|
+ return latency;
|
|
|
|
+ } catch (e) {
|
|
|
|
+ console.error('无法连接服务器', e);
|
|
|
|
+ return null;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 综合检测并提示用户
|
|
|
|
+ async checkUserNetwork() {
|
|
|
|
+ //TODO 暂时写死
|
|
|
|
+ const serverPingUrl = 'http://192.168.172.137:8080'; // 替换为你的 SRS 服务器地址或后端接口
|
|
|
|
+
|
|
|
|
+ try {
|
|
|
|
+ // const webrtcResult = await this.checkWebRTCNetworkQuality();
|
|
|
|
+ const latency = await this.pingServer(serverPingUrl);
|
|
|
|
+
|
|
|
|
+ // const { rtt, packetsLost } = webrtcResult;
|
|
|
|
+
|
|
|
|
+ // const isRttOk = rtt < 200;
|
|
|
|
+ // const isLossOk = packetsLost < 5;
|
|
|
|
+ const isLatencyOk = latency < 300;
|
|
|
|
+
|
|
|
|
+ // const isNetworkOk = isRttOk && isLossOk && isLatencyOk;
|
|
|
|
+ const isNetworkOk = isLatencyOk;
|
|
|
|
+
|
|
|
|
+ let msg = `
|
|
|
|
+ 服务器延迟(Ping): ${latency} ms,
|
|
|
|
+ 检测结果:${isNetworkOk ? '当前网络适合直播' : '网络不稳定,建议更换网络环境'}
|
|
|
|
+ `;
|
|
|
|
+
|
|
|
|
+ this.$alert(msg, '网络检测', {
|
|
|
|
+ confirmButtonText: '确定'
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ return isNetworkOk;
|
|
|
|
+ } catch (e) {
|
|
|
|
+ this.$alert(`<p style="color:red;">网络检测失败: ${e.message}</p>`, '网络检测', {
|
|
|
|
+ confirmButtonText: '确定'
|
|
|
|
+ });
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ destroyed() {
|
|
|
|
+ this.socket?.close()
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+<style scoped>
|
|
|
|
+
|
|
|
|
+.live-console-btn{
|
|
|
|
+ text-align: right;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+</style>
|