feat:
This commit is contained in:
Eleanor Mao
@ -1,54 +1,64 @@
|
||||
<template>
|
||||
<div class="m-room-wrapper">
|
||||
<div class="can-support-rtc" v-if="canSupportVideo">
|
||||
<div class="form-area" v-if="showFormArea">
|
||||
<el-form
|
||||
:model="roomForm"
|
||||
:rules="rules"
|
||||
ref="roomForm"
|
||||
label-width="100px"
|
||||
class="room-form"
|
||||
>
|
||||
<el-form-item label="房间ID" prop="roomId">
|
||||
<el-input v-model.trim="roomForm.roomId" :disabled="!canClickBtn"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="userName">
|
||||
<el-input v-model.trim="roomForm.userName" :disabled="!canClickBtn"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm" :disabled="!canClickBtn">加入房间</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="list-area" v-if="!showFormArea">
|
||||
<h2>当前房间id: {{ roomForm.roomId }} </h2>
|
||||
<h2>在线人数: {{ roomUsers.length }} </h2>
|
||||
<el-card class="box-card">
|
||||
<div v-for="item in roomUsers" :key="item.sockId" class="item">
|
||||
{{ item.userName }}
|
||||
</div>
|
||||
</el-card>
|
||||
<el-button type="primary" v-if="roomUsers.length > 1 && sockId" @click="toSendVideo">
|
||||
发起视频
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="m-room-wrapper">
|
||||
<div class="can-support-rtc" v-if="canSupportVideo">
|
||||
<div class="form-area" v-if="showFormArea">
|
||||
<el-form
|
||||
:model="roomForm"
|
||||
:rules="rules"
|
||||
ref="roomForm"
|
||||
label-width="100px"
|
||||
class="room-form"
|
||||
>
|
||||
<el-form-item label="房间ID" prop="roomId">
|
||||
<el-input v-model.trim="roomForm.roomId" :disabled="!canClickBtn"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="userName">
|
||||
<el-input v-model.trim="roomForm.userName" :disabled="!canClickBtn"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm" :disabled="!canClickBtn">加入房间</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1>当前域名的浏览器不支持WebRTC！</h1>
|
||||
<div class="list-area" v-if="!showFormArea">
|
||||
<h2>当前房间id: {{ roomForm.roomId }} </h2>
|
||||
<h2>在线人数: {{ roomUsers.length }} </h2>
|
||||
<el-card class="box-card">
|
||||
<div v-for="item in roomUsers" :key="item.sockId" class="item">
|
||||
{{ item.userName }}
|
||||
</div>
|
||||
</el-card>
|
||||
<el-button type="primary" v-if="roomUsers.length > 1 && sockId" @click="toSendVideo">
|
||||
发起视频
|
||||
</el-button>
|
||||
</div>
|
||||
<Video
|
||||
:showStartVideoByReceiver="showStartVideoByReceiver"
|
||||
:showStartVideoBySender="showStartVideoBySender"
|
||||
:showVideo="showVideo"
|
||||
@cancelSendVideo="cancelSendVideo"
|
||||
@cancelReceiveVideo="cancelReceiveVideo"
|
||||
@hangupVideo="hangUpVideo"
|
||||
@answerVideo="answerVideo"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1>当前域名的浏览器不支持WebRTC！</h1>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import socket from '../utils/socket.js';
|
||||
import Video, { setRemoteSteam, setLocalStream } from '@/pages/Video';
|
||||
|
||||
export default {
|
||||
name: 'Room',
|
||||
components: { Video },
|
||||
created () {
|
||||
if (this.canSupportWebRTC()) {
|
||||
this.initSocketEvents();
|
||||
this.initVIDEO_VIEWSdk();
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@ -68,6 +78,10 @@ export default {
|
||||
};
|
||||
return {
|
||||
showFormArea: true,
|
||||
showVideo: false,
|
||||
showStartVideoByReceiver: null,
|
||||
showStartVideoBySender: null,
|
||||
remoteStream: null,
|
||||
roomForm: {
|
||||
roomId: '',
|
||||
userName: ''
|
||||
@ -137,7 +151,7 @@ export default {
|
||||
async getDevices () {
|
||||
try {
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
VIDEO_VIEW.showDevicesNameByDevices(devices);
|
||||
console.log('devices', devices);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
const msg = `getDevices error: ${error.name} : ${error.message}`;
|
||||
@ -206,7 +220,7 @@ export default {
|
||||
}
|
||||
});
|
||||
// TODO: 挂断视频 0-0
|
||||
VIDEO_VIEW.hideAllVideoModal();
|
||||
this.hideAllVideoModal();
|
||||
});
|
||||
socket.on('disconnect', (message) => {
|
||||
this.showFormArea = true;
|
||||
@ -214,7 +228,7 @@ export default {
|
||||
console.log('client sock disconnect:', message);
|
||||
socket.emit('userLeave', this.user);
|
||||
// TODO: 挂断视频 0-0
|
||||
VIDEO_VIEW.hideAllVideoModal();
|
||||
this.hideAllVideoModal();
|
||||
});
|
||||
// ================== 视频相关 =====================
|
||||
|
||||
@ -222,31 +236,41 @@ export default {
|
||||
socket.on('cancelSendVideo', (user) => {
|
||||
const infoTips = user.sockId === this.sockId ? '您取消了发送视频' : '对方取消了发送视频';
|
||||
this.$message.info(infoTips);
|
||||
VIDEO_VIEW.hideAllVideoModal();
|
||||
this.hideAllVideoModal();
|
||||
});
|
||||
// 接收视频邀请
|
||||
socket.on('receiveVideo', (sender) => {
|
||||
if (this.user.sockId === sender.sockId) return false;
|
||||
VIDEO_VIEW.showReceiveVideoModalBySender(sender);
|
||||
this.showStartVideoBySender = sender;
|
||||
});
|
||||
// 拒绝接收视频
|
||||
socket.on('rejectReceiveVideo', (user) => {
|
||||
const infoTips = user.sockId === this.sockId ? '您拒绝了接收视频' : '对方拒绝了接收视频';
|
||||
this.$message.info(infoTips);
|
||||
VIDEO_VIEW.hideAllVideoModal();
|
||||
this.hideAllVideoModal();
|
||||
});
|
||||
// 接听视频
|
||||
socket.on('answerVideo', async (user) => {
|
||||
VIDEO_VIEW.showInvideoModal();
|
||||
this.showVideo = true;
|
||||
// 创建本地视频流信息
|
||||
this.localStream = await this.createLocalVideoStream();
|
||||
document.querySelector('#echat-local').srcObject = this.localStream;
|
||||
setLocalStream(this.localStream);
|
||||
// Link: https://developer.mozilla.org/zh-CN/docs/Web/API/RTCPeerConnection
|
||||
// RTCPeerConnection 接口代表一个由本地计算机到远端的 WebRTC 连接
|
||||
// 呼叫方发送一个 offer(请求)，被呼叫方发出一个 answer（应答）来回答请求
|
||||
this.peer = new RTCPeerConnection();
|
||||
console.log(this.peer);
|
||||
this.initPeerListen();
|
||||
this.peer.onicecandidate = (event) => {
|
||||
if (event.candidate) {
|
||||
socket.emit('addIceCandidate', { candidate: event.candidate, user: this.user });
|
||||
}
|
||||
};
|
||||
this.peer.onaddstream = (event) => {
|
||||
// 拿到对方的视频流
|
||||
setRemoteSteam(event.stream);
|
||||
};
|
||||
this.peer.onclose = () => {
|
||||
};
|
||||
// Adding a local stream won't trigger the onaddstream callback
|
||||
this.peer.addStream(this.localStream);
|
||||
if (user.sockId === this.sockId) {
|
||||
@ -266,9 +290,9 @@ export default {
|
||||
this.$message.info(infoTips);
|
||||
this.peer.close();
|
||||
this.peer = null;
|
||||
VIDEO_VIEW.hideAllVideoModal();
|
||||
document.querySelector('#echat-remote-1').srcObject = null;
|
||||
document.querySelector('#echat-local').srcObject = null;
|
||||
this.hideAllVideoModal();
|
||||
setRemoteSteam(null);
|
||||
setLocalStream(null);
|
||||
});
|
||||
//
|
||||
socket.on('addIceCandidate', async (candidate) => {
|
||||
@ -294,7 +318,7 @@ export default {
|
||||
}
|
||||
this.$refs.roomForm.validate((valid) => {
|
||||
if (valid) {
|
||||
// 检查该房间人数
|
||||
// 检查该房间人数
|
||||
this.canClickBtn = false;
|
||||
socket.emit('checkRoom', {
|
||||
roomId: this.roomForm.roomId,
|
||||
@ -314,50 +338,26 @@ export default {
|
||||
// 发送视频
|
||||
toSendVideo () {
|
||||
socket.emit('toSendVideo', this.user);
|
||||
VIDEO_VIEW.showStartVideoModalByReceiver(this.receiveUser);
|
||||
this.showStartVideoByReceiver = this.receiveUser;
|
||||
},
|
||||
initVIDEO_VIEWSdk () {
|
||||
const configOptios = {
|
||||
startVideoCancelCb: this.startVideoCancelCb,
|
||||
receiveVideoCancelCb: this.receiveVideoCancelCb,
|
||||
receiveVideoAnswerCb: this.receiveVideoAnswerCb,
|
||||
hangUpVideoCb: this.hangUpVideoCb,
|
||||
openMikeCb: this.openMikeCb,
|
||||
closeMikeCb: this.closeMikeCb,
|
||||
openCammerCb: this.openCammerCb,
|
||||
closeCammerCb: this.closeCammerCb,
|
||||
toScreenCb: this.toScreenCb,
|
||||
};
|
||||
VIDEO_VIEW.configCallBack(configOptios);
|
||||
hideAllVideoModal () {
|
||||
this.showVideo = false;
|
||||
this.showStartVideoByReceiver = null;
|
||||
this.showStartVideoBySender = null;
|
||||
},
|
||||
startVideoCancelCb () {
|
||||
cancelSendVideo () {
|
||||
socket.emit('cancelSendVideo', this.user);
|
||||
VIDEO_VIEW.hideAllVideoModal();
|
||||
this.hideAllVideoModal();
|
||||
},
|
||||
receiveVideoCancelCb () {
|
||||
cancelReceiveVideo () {
|
||||
socket.emit('rejectReceiveVideo', this.user);
|
||||
VIDEO_VIEW.hideAllVideoModal();
|
||||
this.hideAllVideoModal();
|
||||
},
|
||||
receiveVideoAnswerCb () {
|
||||
answerVideo () {
|
||||
socket.emit('answerVideo', this.user);
|
||||
},
|
||||
hangUpVideoCb () {
|
||||
hangUpVideo () {
|
||||
socket.emit('hangupVideo', this.user);
|
||||
},
|
||||
openMikeCb () {
|
||||
|
||||
},
|
||||
closeMikeCb () {
|
||||
|
||||
},
|
||||
openCammerCb () {
|
||||
|
||||
},
|
||||
closeCammerCb () {
|
||||
|
||||
},
|
||||
toScreenCb () {
|
||||
|
||||
},
|
||||
async createLocalVideoStream () {
|
||||
const constraints = { audio: true, video: true };
|
||||
@ -366,29 +366,20 @@ export default {
|
||||
console.log('localStream:', localStream);
|
||||
return localStream;
|
||||
},
|
||||
initPeerListen () {
|
||||
this.peer.onicecandidate = (event) => {
|
||||
if (event.candidate) { socket.emit('addIceCandidate', { candidate: event.candidate, user: this.user }); }
|
||||
};
|
||||
this.peer.onaddstream = (event) => {
|
||||
// 拿到对方的视频流
|
||||
document.querySelector('#echat-remote-1').srcObject = event.stream;
|
||||
};
|
||||
this.peer.onclose = () => {
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.m-room-wrapper{
|
||||
margin-top: 20px;
|
||||
.m-room-wrapper {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.m-room-wrapper .box-card {
|
||||
width: 480px;
|
||||
width: 480px;
|
||||
}
|
||||
.m-room-wrapper .box-card .item{
|
||||
padding: 18px 0;
|
||||
|
||||
.m-room-wrapper .box-card .item {
|
||||
padding: 18px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user