提交 8ef5074d 编写于 作者: haochangdi's avatar haochangdi

优化视频聊天

上级 83334354
......@@ -29,7 +29,19 @@ export const countDown = (endtime) => {
} else {
return '时间已到'
}
}
export const laseTime = (endtime) => {
let nowtime = new Date(); //获取当前时间
let time = endtime - nowtime.getTime(); //距离结束时间的毫秒数
let lefth = Math.floor(time / (1000 * 60 * 60) % 24); //计算小时数
let leftm = Math.floor(time / (1000 * 60) % 60); //计算分钟数
let lefts = Math.floor(time / 1000 % 60); //计算秒数
return {
lefth,
leftm,
lefts
}
}
function listCompare(property, way) {
......
......@@ -30,6 +30,7 @@ class RtcClient {
this.handleEvents();
} catch (error) {
console.log('创建client失败', error)
this.vueInstance.reloadfn()
}
}
......@@ -56,6 +57,7 @@ class RtcClient {
this.startRTC()
} catch (e) {
console.error('加入房间失败 ' + e);
this.vueInstance.reloadfn()
}
}
......@@ -127,6 +129,7 @@ class RtcClient {
}).catch(error => {
console.log('本地流发布失败')
this.isPublished_ = false;
this.vueInstance.reloadfn()
});
}
......@@ -267,9 +270,6 @@ class RtcClient {
// 在订阅远程流时触发
this.client_.on('stream-subscribed', evt => {
console.log('==============evt======================');
console.log(evt);
console.log('====================================');
const remoteStream = evt.stream;
const id = remoteStream.getId();
const uid = remoteStream.userId_;
......@@ -304,6 +304,15 @@ class RtcClient {
this.vueInstance.addNewMember(uid)
setTimeout(() => {
// 避免其他乱入视频
let index = this.viewslist.findIndex((item => {
return item.userId == uid
}))
if (index < 0) {
return
}
// 播放视频
remoteStream.play(id);
if (!remoteStream.hasVideo()) {
this.changeView(id, 'mask', true)
......@@ -403,7 +412,7 @@ class RtcClient {
add(id, uid, isMask) {
this.vueInstance.memberList.forEach((ele,index) => {
if (ele.id == uid) {
if (ele.accId == uid) {
this.viewslist[index] = { id: id, userId: uid, nick: uid, mask: isMask, vioce: true }
}
});
......
......@@ -5,8 +5,8 @@
<h1 class="title">{{title}}</h1>
<div class="time-message">
<p>设定时长: 30分钟</p>
<p>总时长: {{useTime}}</p>
<p>剩余时长: {{loseTime}}</p>
<p v-if="startTime && endTime">总时长: {{useTime}}</p>
<p v-if="startTime && endTime">剩余时长: {{loseTime}}</p>
</div>
</div>
<div class="top-right">
......@@ -15,9 +15,10 @@
</div>
</div>
<div class="main">
<div class="viedo-wrapper" v-for="(item,index) of memberList" :key="item.id">
<div class="viedo-wrapper" v-for="(item,index) of memberList" :key="index">
<div class="text">
<p>{{item.role == 1 ? '问诊医生' : '接诊医生'}} {{item.name}}</p>
<p>{{item.name}}</p>
<p>{{item.role == 1 ? '问诊医生' : '接诊医生'}}:</p>
</div>
<div class="viedo">
<div :id="rtc.viewslist[index].id" v-if="rtc && rtc.viewslist[index]">
......@@ -45,7 +46,7 @@
</template>
<script>
import RtcClient from '@/utils/live/rtc-client.js'
import { getLiveTimeText, countDown, getBroswer } from '@/utils/live'
import { getLiveTimeText, countDown, getBroswer, laseTime } from '@/utils/live'
import { openLoading, closeLoading } from "@/utils/utils";
import alert from '@/components/common/alert.vue'
export default {
......@@ -62,10 +63,10 @@ export default {
noCameraImg: require('../../../assets/image/live/no-camera.png'),
roleAnchor: 'anchor', // 主播
rtc: null,
roomId: 100000437,
roomId: '',
sdkAppId: '',
userSig: "",
userId: "1000000018-1-1-100000437",
userId: "",
viedoParams: null,
isMicOn: false,
askTime: 0, // 问诊医生接入时长
......@@ -77,28 +78,9 @@ export default {
useTimeFn:null,
loseTimeFn:null,
type: 2, // 1: 语音 2: 视频
startTime: 1617784742,
endTime: 1617791942000,
memberList: [
{
accId: '',
avatarImageUrl: '',
id: '1000005449-1-2-100000436',
name: '',
role: 1, //在当前群组中的角色 1: 问诊医生 2: 接诊医生 3: 居民 4: 其他
type: '',
status: 1, //等待连接还是已经下麦 1为等待 2为进行中 3为下麦
},
{
accId: '',
avatarImageUrl: '',
id: '1000005449-1-2-100000437',
name: '',
role: 2, //在当前群组中的角色 1: 问诊医生 2: 接诊医生 3: 居民 4: 其他
type: '',
status: 1
}
],
startTime: 0,
endTime: 0,
memberList: [],
tid: '', // 群id
diagnoseLogId: '' //问诊id
}
......@@ -145,12 +127,14 @@ export default {
if (liveInfo) {
this.startTime = liveInfo.startTimestamp
this.endTime = liveInfo.endTimestamp
this.roomId = liveInfo.roomId
this.roomId = Number(liveInfo.roomId)
this.type = liveInfo.liveType
}
if (memberList) {
if (memberList && memberList.length) {
memberList.forEach((item) => {
if (item.role == 1) {
//在当前群组中的角色 1: 问诊医生 2: 接诊医生 3: 居民 4: 其他
if (item.role == 1) {
//等待连接还是已经下麦 1为等待 2为进行中 3为下麦
this.memberList[0] = Object.assign(item,{status: 1})
}
if (item.role == 2) {
......@@ -311,7 +295,7 @@ export default {
// 用户上线
addNewMember(id) {
this.memberList.forEach(item => {
if (item.id == id) {
if (item.accId == id) {
item.status = 2
this.setTime(item.role)
}
......@@ -320,7 +304,7 @@ export default {
// 用户下线
removeMember(id) {
this.memberList.forEach(item => {
if (item.id == id) {
if (item.accId == id) {
item.status = 3
}
})
......@@ -357,6 +341,19 @@ export default {
this.setTime(3)
this.loseTimeFn = setInterval(() => {
this.loseTime = countDown(this.endTime)
let timeObj = laseTime(this.endTime)
if ((timeObj.leftm == 5 || timeObj.leftm == 3 || timeObj.leftm == 1) && timeObj.lefts == 0 && timeObj.lefth == 0) {
this.$nextTick(() => {
this.$refs.alert.init({
confirmTxt: '我知道了',
title: `距离会诊结束还剩不足${timeObj.leftm}分钟`
})
.then(() => {
})
.catch((err) => {
})
})
}
}, 1000);
} else if (new Date() < this.startTime){
let t = setInterval(() => {
......@@ -421,6 +418,20 @@ export default {
this.$router.go(-1)
})
})
},
reloadfn(msg) {
this.$nextTick(() => {
this.$refs.alert.init({
confirmTxt: '我知道了',
title: `加入房间失败,重新加入`
})
.then(() => {
location.reload();
})
.catch((err) => {
location.reload();
})
})
}
},
destroyed() {
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册