qq27800734/taoyao
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[+] Web端P2P监控

Browse Source
This commit is contained in:
acgist
2023-04-01 23:21:16 +08:00
parent ed66875a47
commit 1d79de3ef7
27 changed files with 922 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
taoyao-client-web/src/App.vue
View File

@@ -31,10 +31,10 @@
<el-dialog center width="30%" title="房间设置" :show-close="false" v-model="roomVisible" @open="loadList">
<el-form ref="RoomSetting">
<el-tabs v-model="roomActive">
<el-tab-pane label="进入房间" name="enter">
<el-form-item label="房间标识">
<el-select v-model="room.roomId" placeholder="房间标识">
<el-option v-for="value in rooms" :key="value.roomId" :label="value.name || value.roomId" :value="value.roomId" />
<el-tab-pane label="监控终端" name="call">
<el-form-item label="终端标识">
<el-select v-model="room.callClientId" placeholder="终端标识">
<el-option v-for="value in clients" :key="value.clientId" :label="value.name || value.clientId" :value="value.clientId" />
</el-select>
</el-form-item>
</el-tab-pane>
@@ -48,6 +48,13 @@
<el-input v-model="room.name" placeholder="房间名称" />
</el-form-item>
</el-tab-pane>
<el-tab-pane label="选择房间" name="enter">
<el-form-item label="房间标识">
<el-select v-model="room.roomId" placeholder="房间标识">
<el-option v-for="value in rooms" :key="value.roomId" :label="value.name || value.roomId" :value="value.roomId" />
</el-select>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="邀请终端" name="invite">
<el-form-item label="终端标识">
<el-select v-model="room.inviteClientId" placeholder="终端标识">
@@ -56,13 +63,14 @@
</el-form-item>
</el-tab-pane>
</el-tabs>
<el-form-item label="房间密码">
<el-form-item label="房间密码" v-if="roomActive !== 'call'">
<el-input v-model="room.password" placeholder="房间密码" />
</el-form-item>
</el-form>
<template #footer>
<el-button type="primary" @click="roomEnter" v-if="roomActive === 'enter'">进入</el-button>
<el-button type="primary" @click="sessionCall" v-if="roomActive === 'call'">监控</el-button>
<el-button type="primary" @click="roomCreate" v-if="roomActive === 'create'">创建</el-button>
<el-button type="primary" @click="roomEnter" v-if="roomActive === 'enter'">进入</el-button>
<el-button type="primary" @click="roomInvite" v-if="roomActive === 'invite'">邀请</el-button>
</template>
</el-dialog>
@@ -70,8 +78,9 @@
<!-- 菜单 -->
<div class="menus">
<el-button @click="signalVisible = true" type="primary" :disabled="taoyao && taoyao.connect">连接信令</el-button>
<el-button @click="roomActive = 'enter'; roomVisible = true;" type="primary" :disabled="!taoyao">选择房间</el-button>
<el-button @click="roomActive = 'call'; roomVisible = true;" :disabled="!taoyao">监控终端</el-button>
<el-button @click="roomActive = 'create'; roomVisible = true;" type="primary" :disabled="!taoyao">创建房间</el-button>
<el-button @click="roomActive = 'enter'; roomVisible = true;" type="primary" :disabled="!taoyao">选择房间</el-button>
<el-button @click="roomActive = 'invite'; roomVisible = true;" :disabled="!taoyao || !taoyao.roomId">邀请终端</el-button>
<el-button @click="roomLeave" :disabled="!taoyao || !taoyao.roomId">离开房间</el-button>
<el-button @click="roomClose" :disabled="!taoyao || !taoyao.roomId" type="danger">关闭房间</el-button>
@@ -83,6 +92,8 @@
<LocalClient v-if="taoyao && taoyao.roomId" ref="local-client" :client="taoyao" :taoyao="taoyao"></LocalClient>
<!-- 远程终端 -->
<RemoteClient v-for="(kv, index) in remoteClients" :key="index" :ref="'remote-client-' + kv[0]" :client="kv[1]" :taoyao="taoyao"></RemoteClient>
<!-- 远程会话 -->
<SessionClient v-for="(kv, index) in sessionClients" :key="index" :ref="'session-client-' + kv[0]" :client="kv[1]" :taoyao="taoyao"></SessionClient>
</div>
</div>
</template>
@@ -92,6 +103,7 @@ import { ElMessage } from 'element-plus'
import { Taoyao } from "./components/Taoyao.js";
import LocalClient from './components/LocalClient.vue';
import RemoteClient from './components/RemoteClient.vue';
import SessionClient from './components/SessionClient.vue';
export default {
name: "Taoyao",
@@ -110,10 +122,11 @@ export default {
password: "taoyao",
},
taoyao: null,
roomActive: "enter",
roomActive: "call",
roomVisible: false,
signalVisible: false,
remoteClients: new Map(),
sessionClients: new Map(),
};
},
mounted() {
@@ -131,6 +144,7 @@ export default {
await me.taoyao.connectSignal(me.callback);
me.signalVisible = false;
me.remoteClients = me.taoyao.remoteClients;
me.sessionClients = me.taoyao.sessionClients;
// 全局绑定
window.taoyao = me.taoyao;
},
@@ -145,9 +159,8 @@ export default {
async roomClose() {
this.taoyao.roomClose();
},
async roomEnter() {
await this.taoyao.roomEnter(this.room.roomId, this.room.password);
await this.taoyao.produceMedia();
async sessionCall() {
this.taoyao.sessionCall(this.room.callClientId);
this.roomVisible = false;
},
async roomCreate() {
@@ -155,6 +168,11 @@ export default {
this.room.roomId = room.roomId;
await this.roomEnter();
},
async roomEnter() {
await this.taoyao.roomEnter(this.room.roomId, this.room.password);
await this.taoyao.produceMedia();
this.roomVisible = false;
},
async roomInvite() {
this.taoyao.roomInvite(this.room.inviteClientId);
this.roomVisible = false;
@@ -190,7 +208,8 @@ export default {
},
components: {
LocalClient,
RemoteClient
RemoteClient,
SessionClient,
},
};
</script>

98
taoyao-client-web/src/components/SessionClient.vue Normal file
View File

@@ -0,0 +1,98 @@
<!-- 会话终端 -->
<template>
<div class="client">
<audio ref="audio"></audio>
<video ref="video"></video>
<p class="title">{{ client?.name || "" }}</p>
<div class="buttons">
<el-button @click="taoyao.mediaConsumerResume(audioConsumer.id)" v-show="stream" type="primary" title="打开麦克风" :icon="Microphone" circle />
<el-button @click="taoyao.mediaConsumerPause(audioConsumer.id)" v-show="stream" type="danger" title="关闭麦克风" :icon="Mute" circle />
<el-button @click="taoyao.mediaConsumerResume(videoConsumer.id)" v-show="stream" type="primary" title="打开摄像头" :icon="VideoPlay" circle />
<el-button @click="taoyao.mediaConsumerPause(videoConsumer.id)" v-show="stream" type="danger" title="关闭摄像头" :icon="VideoPause" circle />
<el-button title="拍照" :icon="Camera" circle />
<el-button title="录像" :icon="VideoCamera" circle />
<el-button @click="close" title="踢出" :icon="CircleClose" circle />
</div>
</div>
</template>
<script>
import {
Mute,
Camera,
Refresh,
VideoPlay,
VideoPause,
InfoFilled,
Microphone,
VideoCamera,
CircleClose,
} from "@element-plus/icons";
export default {
name: "SessionClient",
setup() {
return {
Mute,
Camera,
Refresh,
VideoPlay,
VideoPause,
InfoFilled,
Microphone,
VideoCamera,
CircleClose,
};
},
data() {
return {
audio: null,
video: null,
stream: null,
audioStream: null,
videoStream: null,
};
},
mounted() {
this.audio = this.$refs.audio;
this.video = this.$refs.video;
this.client.proxy = this;
},
props: {
"client": {
type: Object
},
"taoyao": {
type: Object
}
},
methods: {
close() {
this.taoyao.sessionClose(this.client.id);
},
media(track) {
console.log(track);
if(track.kind === 'audio') {
if (this.audioStream) {
// TODO：资源释放
} else {
this.audioStream = new MediaStream();
this.audioStream.addTrack(track);
this.audio.srcObject = this.audioStream;
}
this.audio.play().catch((error) => console.warn("视频播放失败", error));
} else if(track.kind === 'video') {
if (this.videoStream) {
// TODO：资源释放
} else {
this.videoStream = new MediaStream();
this.videoStream.addTrack(track);
this.video.srcObject = this.videoStream;
}
this.video.play().catch((error) => console.warn("视频播放失败", error));
} else {
}
}
}
};
</script>

201
taoyao-client-web/src/components/Taoyao.js
View File

@@ -226,6 +226,40 @@ const signalChannel = {
},
};
/**
* 会话
*/
class Session {
// 会话ID
id;
// 远程终端名称
name;
// 远程终端ID
clientId;
// 本地音频
localAudioTrack;
// 本地视频
localVideoTrack;
// 远程音频
remoteAudioTrack;
// 远程视频
remoteVideoTrack;
// PeerConnection
peerConnection;
constructor({
id,
name,
clientId
}) {
this.id = id;
this.name = name;
this.clientId = clientId;
}
}
/**
* 远程终端
*/
@@ -339,6 +373,8 @@ class Taoyao extends RemoteClient {
dataConsumers = new Map();
// 远程终端
remoteClients = new Map();
// 会话终端
sessionClients = new Map();
constructor({
name,
@@ -560,6 +596,15 @@ class Taoyao extends RemoteClient {
case "media::video::orientation::change":
me.defaultMediaVideoOrientationChange(message);
break;
case "session::call":
me.defaultSessionCall(message);
break;
case "session::close":
me.defaultSessionClose(message);
break;
case "session::exchange":
me.defaultSessionExchange(message);
break;
case "room::client::list":
me.defaultRoomClientList(message);
break;
@@ -596,6 +641,37 @@ class Taoyao extends RemoteClient {
return null;
}
}
async getStream() {
let stream;
const self = this;
if (self.videoSource === "file") {
// TODO：实现文件分享
// const stream = await this._getExternalVideoStream();
// track = stream.getVideoTracks()[0].clone();
} else if (self.videoSource === "camera") {
console.debug("enableWebcam() | calling getUserMedia()");
// TODO：参数
stream = await navigator.mediaDevices.getUserMedia({
audio: self.audioConfig,
video: self.videoConfig,
});
} else if (self.videoSource === "screen") {
stream = await navigator.mediaDevices.getDisplayMedia({
audio: self.audioConfig,
video: {
cursor: true,
width: { max: 1920 },
height: { max: 1080 },
frameRate: { max: 30 },
logicalSurface: true,
displaySurface: "monitor",
},
});
} else {
// TODO：异常
}
return stream;
}
async getVideoTrack() {
let track;
const self = this;
@@ -1696,7 +1772,7 @@ class Taoyao extends RemoteClient {
});
const tracks = stream.getAudioTracks();
if (tracks.length > 1) {
console.log("多个音频轨道");
console.warn("多个音频轨道");
}
track = tracks[0];
// TODO：验证修改API audioTrack.applyCapabilities
@@ -2006,6 +2082,129 @@ class Taoyao extends RemoteClient {
}
}
/**
* 发起会话
*
* @param {*} clientId 接收者ID
*/
async sessionCall(clientId) {
const me = this;
if (!clientId) {
this.callbackError("无效终端");
return;
}
const response = await me.request(
protocol.buildMessage("session::call", {
clientId
})
);
const { name, sessionId } = response.body;
const session = new Session(name, response.body.clientId, sessionId);
this.sessionClients.set(sessionId, session);
session.peerConnection = await me.buildPeerConnection(session, sessionId);
const localStream = await me.getStream();
session.localAudioTrack = localStream.getAudioTracks()[0];
session.localVideoTrack = localStream.getVideoTracks()[0];
session.peerConnection.addTrack(session.localAudioTrack, localStream);
session.peerConnection.addTrack(session.localVideoTrack, localStream);
}
async defaultSessionCall(message) {
const me = this;
const { name, clientId, sessionId } = message.body;
const session = new Session(name, clientId, sessionId);
this.sessionClients.set(sessionId, session);
session.peerConnection = await me.buildPeerConnection(session, sessionId);
const localStream = await me.getStream();
session.localAudioTrack = localStream.getAudioTracks()[0];
session.localVideoTrack = localStream.getVideoTracks()[0];
session.peerConnection.addTrack(session.localAudioTrack, localStream);
session.peerConnection.addTrack(session.localVideoTrack, localStream);
session.peerConnection.createOffer().then(async description => {
await session.peerConnection.setLocalDescription(description);
me.push(
protocol.buildMessage("session::exchange", {
sdp : description.sdp,
type : description.type,
sessionId: sessionId
})
);
});
}
async sessionClose() {
}
async defaultSessionClose(message) {
}
async defaultSessionExchange(message) {
const me = this;
const { type, candidate, sessionId } = message.body;
const session = this.sessionClients.get(sessionId);
if (type === "offer") {
session.peerConnection.setRemoteDescription(new RTCSessionDescription(message.body));
session.peerConnection.createAnswer().then(async description => {
await session.peerConnection.setLocalDescription(description);
me.push(
protocol.buildMessage("session::exchange", {
sdp : description.sdp,
type : description.type,
sessionId: sessionId
})
);
});
} else if (type === "answer") {
await session.peerConnection.setRemoteDescription(new RTCSessionDescription(message.body));
} else if (type === "candidate") {
if(candidate) {
await session.peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
}
}
}
async buildPeerConnection(session, sessionId) {
const me = this;
const peerConnection = new RTCPeerConnection({"iceServers" : [{"url" : "stun:stun1.l.google.com:19302"}]});
peerConnection.ontrack = event => {
console.debug("buildPeerConnection ontrack", event);
const track = event.track;
if(track.kind === 'audio') {
session.remoteAudioTrack = track;
} else if(track.kind === 'video') {
session.remoteVideoTrack = track;
} else {
}
if(session.proxy && session.proxy.media) {
session.proxy.media(track);
}
};
peerConnection.onicecandidate = event => {
console.debug("buildPeerConnection onicecandidate", event);
me.push(
protocol.buildMessage("session::exchange", {
type : "candidate",
sessionId : sessionId,
candidate : event.candidate
})
);
};
peerConnection.onnegotiationneeded = event => {
console.debug("buildPeerConnection onnegotiationneeded", event);
session.peerConnection.createOffer().then(async description => {
await session.peerConnection.setLocalDescription(description);
me.push(
protocol.buildMessage("session::exchange", {
sdp : description.sdp,
type : description.type,
sessionId: sessionId
})
);
});
}
return peerConnection;
}
/**
* 关闭媒体
*/