La123123.
/
im-backed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

视频聊天功能-开发中

master
xie.bx 3 years ago
parent
198acdbaf5
commit
31d2d12522
1 changed files with 41 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 86
      im-ui/src/components/chat/ChatPrivateVideo.vue

86
im-ui/src/components/chat/ChatPrivateVideo.vue
View File

@ -2,10 +2,7 @@
<el-dialog :title="title" :visible.sync="visible" width="800px" :before-close="handleClose"> <el-dialog :title="title" :visible.sync="visible" width="800px" :before-close="handleClose">
<div class="chat-video"> <div class="chat-video">
<div class="chat-video-box"> <div class="chat-video-box">
<div class="chat-video-friend" <div class="chat-video-friend" v-loading="loading" element-loading-text="等待对方接听..." element-loading-spinner="el-icon-loading"
v-loading="loading"
element-loading-text="等待对方接听..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.9)"> element-loading-background="rgba(0, 0, 0, 0.9)">
<video ref="friendVideo" autoplay=""></video> <video ref="friendVideo" autoplay=""></video>
</div> </div>
@ -15,8 +12,10 @@
</div> </div>
<div class="chat-video-controllbar"> <div class="chat-video-controllbar">
<div v-show="state=='CONNECTING'" title="取消呼叫" class="icon iconfont icon-phone-reject reject" style="color: red;" @click="cancel()"></div> <div v-show="state=='CONNECTING'" title="取消呼叫" class="icon iconfont icon-phone-reject reject" style="color: red;"
<div v-show="state=='CONNECTED'" title="挂断" class="icon iconfont icon-phone-reject reject" style="color: red;" @click="handup()"></div> @click="cancel()"></div>
<div v-show="state=='CONNECTED'" title="挂断" class="icon iconfont icon-phone-reject reject" style="color: red;"
@click="handup()"></div>
</div> </div>
</div> </div>
@ -50,30 +49,10 @@
candidates: [], candidates: [],
configuration: { configuration: {
iceServers: [{ iceServers: [{
"urls": navigator.mozGetUserMedia ? "stun:stun.services.mozilla.com" : navigator.webkitGetUserMedia ? 'urls': 'turn:www.boxim.online:3478',
"stun:stun.l.google.com:19302" : "stun:23.21.150.121" 'credential': "admin",
}, 'username': "admin123"
{urls: "stun:stun.l.google.com:19302"}, }]
{urls: "stun:stun1.l.google.com:19302"},
{urls: "stun:stun2.l.google.com:19302"},
{urls: "stun:stun3.l.google.com:19302"},
{urls: "stun:stun4.l.google.com:19302"},
{urls: "stun:23.21.150.121"},
{urls: "stun:stun01.sipphone.com"},
{urls: "stun:stun.ekiga.net"},
{urls: "stun:stun.fwdnet.net"},
{urls: "stun:stun.ideasip.com"},
{urls: "stun:stun.iptel.org"},
{urls: "stun:stun.rixtelecom.se"},
{urls: "stun:stun.schlund.de"},
{urls: "stun:stunserver.org"},
{urls: "stun:stun.softjoys.com"},
{urls: "stun:stun.voiparound.com"},
{urls: "stun:stun.voipbuster.com"},
{urls: "stun:stun.voipstunt.com"},
{urls: "stun:stun.voxgratia.org"},
{urls: "stun:stun.xten.com"}
]
} }
} }
}, },
@ -100,9 +79,9 @@
} }
this.timerx && clearInterval(this.timerx); this.timerx && clearInterval(this.timerx);
this.timerx = setInterval(()=>{ this.timerx = setInterval(() => {
console.log(this.peerConnection.iceConnectionState); console.log(this.peerConnection.iceConnectionState);
},3000) }, 3000)
}); });
}, },
@ -122,14 +101,14 @@
callback() callback()
}); });
}, },
closeCamera(){ closeCamera() {
if(this.stream){ if (this.stream) {
this.stream.getVideoTracks().forEach((track) =>{ this.stream.getVideoTracks().forEach((track) => {
track.stop(); track.stop();
}); });
this.$refs.mineVideo.srcObject = null; this.$refs.mineVideo.srcObject = null;
this.stream = null; this.stream = null;
} }
}, },
@ -141,20 +120,21 @@
}; };
this.peerConnection.onicecandidate = (event) => { this.peerConnection.onicecandidate = (event) => {
if (event.candidate) { if (event.candidate) {
if(this.state == 'CONNECTED'){ if (this.state == 'CONNECTED') {
// 已连接,直接发送 // 已连接,直接发送
this.sendCandidate(event.candidate); this.sendCandidate(event.candidate);
}else{ } else {
// 未连接,缓存起来，连接后再发送 // 未连接,缓存起来，连接后再发送
this.candidates.push(event.candidate) this.candidates.push(event.candidate)
} }
} }
} }
if (stream) { if (stream) {
stream.getTracks().forEach((track)=>{ stream.getTracks().forEach((track) => {
this.peerConnection.addTrack(track, stream); this.peerConnection.addTrack(track, stream);
}); });
} }
this.peerConnection.IceConnectionStateChange
}, },
handleMessage(msg) { handleMessage(msg) {
if (msg.type == this.$enums.MESSAGE_TYPE.RTC_ACCEPT) { if (msg.type == this.$enums.MESSAGE_TYPE.RTC_ACCEPT) {
@ -198,7 +178,7 @@
url: `/webrtc/private/call?uid=${this.friend.id}`, url: `/webrtc/private/call?uid=${this.friend.id}`,
method: 'post', method: 'post',
data: offer data: offer
}).then(()=>{ }).then(() => {
this.loading = true; this.loading = true;
this.state = 'CONNECTING'; this.state = 'CONNECTING';
}); });
@ -217,7 +197,7 @@
method: 'post', method: 'post',
data: answer data: answer
}) })
this.state='CONNECTED'; this.state = 'CONNECTED';
}, },
(error) => { (error) => {
this.$message.error(error); this.$message.error(error);
@ -232,7 +212,7 @@
this.close(); this.close();
this.$message.success("已挂断视频通话") this.$message.success("已挂断视频通话")
}, },
cancel(){ cancel() {
this.$http({ this.$http({
url: `/webrtc/private/cancel?uid=${this.friend.id}`, url: `/webrtc/private/cancel?uid=${this.friend.id}`,
method: 'post' method: 'post'
@ -259,19 +239,19 @@
this.loading = false; this.loading = false;
this.state = 'NOT_CONNECTED'; this.state = 'NOT_CONNECTED';
this.candidates = []; this.candidates = [];
this.$store.commit("setUserState",this.$enums.USER_STATE.FREE); this.$store.commit("setUserState", this.$enums.USER_STATE.FREE);
this.$refs.friendVideo.srcObject = null; this.$refs.friendVideo.srcObject = null;
this.peerConnection.close(); this.peerConnection.close();
this.peerConnection.onicecandidate = null; this.peerConnection.onicecandidate = null;
this.peerConnection.onaddstream = null; this.peerConnection.onaddstream = null;
}, },
handleClose(){ handleClose() {
if(this.state=='CONNECTED'){ if (this.state == 'CONNECTED') {
this.handup() this.handup()
}else if(this.state == 'CONNECTING'){ } else if (this.state == 'CONNECTING') {
this.cancel(); this.cancel();
}else{ } else {
this.close(); this.close();
} }
}, },
@ -293,7 +273,7 @@
if (newValue) { if (newValue) {
this.init(); this.init();
// 用户忙状态 // 用户忙状态
this.$store.commit("setUserState",this.$enums.USER_STATE.BUSY); this.$store.commit("setUserState", this.$enums.USER_STATE.BUSY);
console.log(this.$store.state.userStore.state) console.log(this.$store.state.userStore.state)
} }
} }
@ -317,6 +297,7 @@
.chat-video-friend { .chat-video-friend {
height: 600px; height: 600px;
video { video {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -340,6 +321,7 @@
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
padding: 10px; padding: 10px;
.icon { .icon {
font-size: 50px; font-size: 50px;
cursor: pointer; cursor: pointer;

Write Preview
Loading…
Cancel
Save