纯音频连麦(更换采集参数)
在某些场景比如在线通话中,并不需要视频的参与,这里我们就推荐使用纯音频连麦。注意这里的纯音频是一个采集上的概念,也就是在采集端只采集麦克风不采集摄像头。而不是同时采集摄像头和麦克风,只在发送的时候将视频 mute 掉(纯音频的错误用法)。
所以纯音频连麦就是一个更换采集参数的过程,参见我们 getLocalStream 的说明, 只要不传入 video
字段或者将 video
字段的 enabled
设置为 false
就能不采集摄像头,下面让我们用代码实现吧。
体验上应该让用户先在主页 (index.html) 选择是否开启纯音频连麦,加入房间后再在 room 页面配置相应的采集参数。所以在这里我们需要将主页的用户选择带入 room 页面,使用和之前 roomToken 一样的方法。
<!-- index.html -->
<form id="rtcroom">
<input id="userid" type="text" placeholder="请输入用户名" required />
<input id="roomname" type="text" placeholder="请输入房间号" required />
<!-- 在表单中加入是否使用纯音频连麦的选项 -->
<select id="record_option">
<option value="audioonly">纯音频连麦</option>
<option value="normal" selected>正常连麦</option>
</select>
</form>
// js/index.js
// 修改 joinRoom 函数,加入采集选项的参数,并通过地址 query 传入 room 页面
function joinRoom(e) {
e.preventDefault();
const userId = document.getElementById('userid').value;
const roomName = document.getElementById('roomname').value;
// 获取用户采集选项的选择
const recordOption = document.getElementById('record_option').value;
fetch(`/roomtoken/user/${userId}/room/${roomName}`)
.then(res => res.text())
.then(roomToken => {
// 将采集选项的结果传入下一个页面
window.location = `/room.html?token=${roomToken}&option=${recordOption}`;
}).catch(e => {
console.log('get roomToken error!', e);
})
}
好了,下一步就是在 room.js
中读取这个采集参数来判断使用什么方式来采集媒体流了。修改 room.js
的如下行
// js/room.js
...
...
// 这里获取 roomToken 的正则和之前有修改,因为加入了 option 字段后 query 的格式变了
const tokenMatch = window.location.search.match(/\?token\=(.*)\&/);
const roomToken = tokenMatch[1];
// 获取 option 字段的值,这里多说一句建议在正式的开发中建议使用 query-parser 这种成熟的 query 解析库
const recordOptionMatch = window.location.search.match(/\&option\=(.*)$/);
const recordOption = recordOptionMatch[1];
const myRTC = new QNRTC.QNRTCSession();
try {
const users = await myRTC.joinRoomWithToken(roomToken);
console.log('joinRoom success! 当前房间用户:', users);
// 根据 option 是否为 audioonly 来选择是否开启视频采集
const enableVideo = recordOption !== "audioonly";
const localStream = await QNRTC.deviceManager.getLocalStream({
video: { enabled: enableVideo, width: 640, height: 480, bitrate: 600 },
audio: { enabled: true, bitrate: 32 },
});
...
...
好了,现在访问 http://localhost:8888 选择纯音频连麦再尝试 2 人加入房间,界面就是一片黑色只能听到远端的视频。这就是纯音频连麦了。