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

[*] 本地录像

Browse Source
This commit is contained in:
acgist
2023-06-02 07:17:10 +08:00
parent a06f6a251f
commit becc68b05f
19 changed files with 404 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
taoyao-client-web/src/components/LocalClient.vue
View File

@@ -9,10 +9,11 @@
<el-button @click="taoyao.mediaProducerPause(audioProducer.id)" v-show="audioProducer && !audioProducer.paused" type="primary" title="关闭麦克风" :icon="Microphone" circle class="mic" :style="{'--volume': client.volume}" />
<el-button @click="taoyao.mediaProducerResume(videoProducer.id)" v-show="videoProducer && videoProducer.paused" type="danger" title="打开摄像头" :icon="VideoPlay" circle />
<el-button @click="taoyao.mediaProducerPause(videoProducer.id)" v-show="videoProducer && !videoProducer.paused" type="primary" title="关闭摄像头" :icon="VideoPause" circle />
<el-button @click="exchangeVideoSource" :icon="Refresh" circle title="交换媒体" />
<el-button :icon="Camera" circle title="拍照" />
<el-button :icon="VideoCamera" circle title="录像" />
<el-button @click="taoyao.mediaProducerStatus()" :icon="InfoFilled" circle title="媒体信息" />
<el-button @click="exchangeVideoSource" :icon="Refresh" circle title="交换媒体" />
<el-button @onclick="localPhotograph" :icon="Camera" circle title="拍照" />
<el-button @onclick="localClientRecord" :icon="VideoCamera" circle title="录像" :type="clientRecord ? 'danger' : ''" />
<el-button @click="taoyao.controlServerRecord(client.clientId, (serverRecord = !serverRecord))" :icon="MostlyCloudy" circle title="录像" :type="serverRecord ? 'danger' : ''" />
<el-button @click="taoyao.mediaProducerStatus()" :icon="InfoFilled" circle title="媒体信息" />
<el-popover placement="top" :width="240" trigger="hover">
<template #reference>
<el-button>视频质量</el-button>
@@ -37,6 +38,7 @@ import {
Microphone,
VideoCamera,
CircleClose,
MostlyCloudy,
} from "@element-plus/icons-vue";
export default {
name: "LocalClient",
@@ -51,12 +53,15 @@ export default {
Microphone,
VideoCamera,
CircleClose,
MostlyCloudy,
};
},
data() {
return {
audio: null,
video: null,
clientRecord: false,
serverRecord: false,
audioStream: null,
videoStream: null,
dataProducer: null,
@@ -78,6 +83,13 @@ export default {
}
},
methods: {
localPhotograph() {
this.taoyao.localPhotograph(this.video);
},
localClientRecord() {
this.clientRecord = !this.clientRecord;
this.taoyao.localClientRecord(this.audioStream, this.videoStream, this.clientRecord);
},
exchangeVideoSource() {
// TODO：文件支持
this.taoyao.videoSource = this.taoyao.videoSource === "camera" ? "screen" : "camera";
@@ -85,8 +97,16 @@ export default {
},
media(track, producer) {
if(track.kind === "audio") {
// 不用加载音频
this.audioProducer = producer;
if (this.audioStream) {
this.audioStream.getAudioTracks().forEach(oldTrack => {
console.debug("关闭旧的媒体：", oldTrack);
oldTrack.stop();
});
}
this.audioStream = new MediaStream();
this.audioStream.addTrack(track);
// 不用加载音频
} else if (track.kind === "video") {
this.videoProducer = producer;
if (this.videoStream) {