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-10-13 08:32:43 +08:00
parent cff7bca9fc
commit 8fefa9f5a7
4 changed files with 72 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,8 +19,8 @@
<el-button>视频质量</el-button>
</template>
<el-table @cell-click="chooseRatio" :data="taoyao.options">
<el-table-column width="100" property="value" label="标识" />
<el-table-column width="100" property="label" label="名称" />
<el-table-column width="100" property="label" label="标识" />
<el-table-column width="100" property="value" label="高宽" />
</el-table>
</el-popover>
</div>
@@ -84,7 +84,7 @@ export default {
},
methods: {
chooseRatio(row) {
const { value, label } = row;
const { label, value } = row;
this.taoyao.setLocalVideoConfig(label);
},
media(track, producer) {

6
taoyao-client-web/src/components/RemoteClient.vue
View File

@@ -21,8 +21,8 @@
<el-button>视频质量</el-button>
</template>
<el-table @row-click="chooseRatio" :data="taoyao.options">
<el-table-column width="100" property="value" label="标识" />
<el-table-column width="100" property="label" label="名称" />
<el-table-column width="100" property="label" label="标识" />
<el-table-column width="100" property="value" label="宽高" />
</el-table>
</el-popover>
<el-button @click="taoyao.roomExpel(client.clientId)" title="踢出" :icon="CircleClose" circle />
@@ -91,7 +91,7 @@ export default {
},
methods: {
chooseRatio(row) {
const { value, label } = row;
const { label, value } = row;
this.taoyao.setVideoConfig(this.client.clientId, label);
},
media(track, consumer) {

6
taoyao-client-web/src/components/SessionClient.vue
View File

@@ -20,8 +20,8 @@
<el-button>视频质量</el-button>
</template>
<el-table @row-click="chooseRatio" :data="taoyao.options">
<el-table-column width="100" property="value" label="标识" />
<el-table-column width="100" property="label" label="名称" />
<el-table-column width="100" property="label" label="标识" />
<el-table-column width="100" property="value" label="宽高" />
</el-table>
</el-popover>
<el-button @click="taoyao.sessionClose(client.id)" title="踢出" :icon="CircleClose" circle />
@@ -89,7 +89,7 @@ export default {
},
methods: {
chooseRatio(row) {
const { value, label } = row;
const { label, value } = row;
this.taoyao.setVideoConfig(this.client.clientId, label);
},
media(track) {

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

@@ -263,10 +263,14 @@ class Session {
videoEnabled;
// 本地音频
localAudioTrack;
// 本地音频发送者
localAudioSender;
// 本地音频是否可用（暂停关闭）
localAudioEnabled;
// 本地视频
localVideoTrack;
// 本地视频发送者
localVideoSender;
// 本地视频是否可用（暂停关闭）
localVideoEnabled;
// 远程音频
@@ -1203,9 +1207,10 @@ class Taoyao extends RemoteClient {
ideal: video.frameRate,
max : media.maxFrameRate,
};
me.options = Object.keys(media.videos).map(key => ({
value: key,
label: media.videos[key].resolution
me.options = Object.keys(media.videos).map(key => ({
...media.videos[key],
label: key,
value: media.videos[key].resolution,
}));
me.mediaConfig = media;
me.webrtcConfig = webrtc;
@@ -1411,8 +1416,8 @@ class Taoyao extends RemoteClient {
* @param {*} clientId 终端ID
* @param {*} config 视频配置
*/
controlConfigVideo(clientId, config) {
this.request(protocol.buildMessage("control::config::video", {
async controlConfigVideo(clientId, config) {
return await this.request(protocol.buildMessage("control::config::video", {
...config,
to: clientId
}));
@@ -1425,9 +1430,24 @@ class Taoyao extends RemoteClient {
* @param {*} body 消息主体
*/
defaultControlConfigVideo(message, body) {
console.debug("配置视频", message);
const {
width,
height,
frameRate,
} = body;
if(width) {
this.videoConfig.width.ideal = width;
}
if(height) {
this.videoConfig.height.ideal = height;
}
if(frameRate) {
this.videoConfig.frameRate.ideal = frameRate;
}
console.debug("配置视频", body, this.videoConfig);
this.push(message);
// TODO：配置本地视频
// 更新本地视频
this.setLocalVideoConfig();
}
/**
@@ -2341,6 +2361,10 @@ class Taoyao extends RemoteClient {
* @param {*} 更新视频轨道
*/
async updateVideoProducer(videoTrack) {
if(!this.videoProducer) {
console.debug("没有发布视频忽略更新");
return;
}
const track = videoTrack || await this.getVideoTrack();
await this.videoProducer.replaceTrack({
track
@@ -2353,6 +2377,22 @@ class Taoyao extends RemoteClient {
}
}
/**
* 更新视频轨道
*
* @param {*} videoTrack 更新视频轨道
*/
async updateVideoSession(videoTrack) {
this.sessionClients.forEach(async (v, k) => {
const localStream = await this.getStream();
// TODO：更新音频
if(v.localVideoEnabled) {
v.localVideoTrack = videoTrack || localStream.getVideoTracks()[0];
v.localVideoSender.replaceTrack(v.localVideoTrack);
}
});
}
/**
* 验证设备
*/
@@ -3469,7 +3509,7 @@ class Taoyao extends RemoteClient {
session.localAudioTrack = localStream.getAudioTracks()[0];
if(session.localAudioTrack) {
session.localAudioEnabled = true;
await session.peerConnection.addTrack(session.localAudioTrack, localStream);
session.localAudioSender = await session.peerConnection.addTrack(session.localAudioTrack, localStream);
} else {
session.localAudioEnabled = false;
}
@@ -3480,7 +3520,7 @@ class Taoyao extends RemoteClient {
session.localVideoTrack = localStream.getVideoTracks()[0];
if(session.localVideoTrack) {
session.localVideoEnabled = true;
await session.peerConnection.addTrack(session.localVideoTrack, localStream);
session.localVideoSender = await session.peerConnection.addTrack(session.localVideoTrack, localStream);
} else {
session.localVideoEnabled = false;
}
@@ -3596,8 +3636,11 @@ class Taoyao extends RemoteClient {
*/
setLocalVideoConfig(label) {
const me = this;
// TODO：设置本地配置
if(label) {
// TODO：设置本地配置
}
me.updateVideoProducer();
me.updateVideoSession();
}
/**
@@ -3609,8 +3652,18 @@ class Taoyao extends RemoteClient {
const me = this;
if(clientId === me.clientId) {
me.setLocalVideoConfig(label);
return;
}
// TODO：更新远程配置
const option = this.options.find(v => v.label === label);
if(!option) {
console.warn("不支持的视频配置", label, this.options);
return;
}
this.controlConfigVideo(
clientId,
option,
);
}
/**