|
|
@@ -1,646 +0,0 @@
|
|
|
-
|
|
|
-<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()
|
|
|
- this.hls?.destroy()
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style scoped>
|
|
|
-
|
|
|
-.live-console-btn{
|
|
|
- text-align: right;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-</style>
|