实时音视频云

  • 纯音频连麦(更换采集参数)

    最近更新时间:2018-08-31 17:49:47

    在某些场景比如在线通话中,并不需要视频的参与,这里我们就推荐使用纯音频连麦。注意这里的纯音频是一个采集上的概念,也就是在采集端只采集麦克风不采集摄像头。而不是同时采集摄像头和麦克风,只在发送的时候将视频 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 人加入房间,界面就是一片黑色只能听到远端的视频。这就是纯音频连麦了。

    以上内容是否对您有帮助?
  • Icon free helper
    Close