实时音视频云

  • 快速开始

    最近更新时间:2018-08-07 08:51:13

    代码说明

    这里教程我们会使用 async/await 的方式来编写,请确保下面的代码运行在一个 async
    函数包裹之下。比如 async iife。

    (async () => {
      // code goes here
    })();
    

    如果你想使用 promise,可以对下面的代码做一些简单的替换

    try {
      const a = await some_method();
    } catch(e) {
      console.log(e);
    }
    
    // promise 写法
    some_method().then(a => {
    
    }).catch(e => {
      console.log(e);
    })
    

    加入房间

    好了,准备就绪之后,让我们准备开始吧。 首先准备一个页面,新建一个元素,我们将会把摄像头预览放在这个元素中

    <body>
        <div id="localplayer"></div>
    </body>
    

    在开始发布之前,我们必须先加入一个房间。
    因为发布/订阅/控制等操作都是对应一个房间完成的,也就是说我们在一个房间内开始发布,房间的其他用户都可以获取到我们的数据流。
    在这里我们需要 1 个已知参数,roomToken, 关于这个参数的获取请参照上文提到的 Server-API
    在这里让我们准备在同一个房间下,不同用户的 2 个 roomToken,一个用于发布,一个用于订阅

    const myRTC = new QNRTC.QNRTCSession(); // 初始化我们的 SDK (QNRTC的引入方式见上)
    try {
      const users = await myRTC.joinRoomWithToken(roomToken); // 加入房间
    
      // 因为 await 的特性,当代码执行到这里的时候,joinRoomWithToken 这个异步请求已经完成
      // 如果过程中出现错误,会直接 throw 出来,如果需要处理只要 try/catch 就好
      // 这里的 users 表示该房间中已经存在的用户,具体可以参照 API 文档
      // 你也随时可以通过 myRTC.users 获取当前的用户列表
      console.log('current users', users);
    } catch (e) {
      // 加入房间失败,关于错误处理可以参考下文的 错误处理 一节
      console.log('join room error!', e);
    }
    
    

    预览并发布

    加入房间完成,开始发布吧
    在发布之前,我们需要通过本机的媒体设备采集本地的媒体数据

    // 使用内置的 deviceManager 对象采集本地媒体数据
    const stream = await QNRTC.deviceManager.getLocalStream({
        video: { enabled: true },
        audio: { enabled: true },
    });
    
    // 页面上准备用来播放元素
    const localVideo = document.getElementById('localplayer');
    
    // 拿到 stream 对象后,调用 play 就可以播放了
    // sdk 会在指定的元素下创建相应的 video/audio 标签完成播放
    // 这里第二个参数代表用 静音模式 来播放,本地预览的时候一般我们会设置成静音
    stream.play(localVideo, true);
    

    此时,我们应该已经可以在页面上预览到我们本地的媒体流了。下一步,就是将这个媒体流发布到房间中。

    
    // 发布自己本地的流
    try {
      await myRTC.publish(stream)
    } catch (e) {
      console.log('publish error!', e);
    }
    
    // done! 代码执行到这里说明发布成功
    // 我们可以根据这个特性很方便地设定 publishState 等参数
    

    如果没有报错的话说明你的媒体流已经顺利发布到这个房间,下一步,让我们订阅这个刚刚发布的流

    订阅用户

    SDK不允许用户自己订阅自己,所以这里我们需要另一个用户来做测试,让我们新准备一个页面
    这里页面也需要一个元素,用于播放我们订阅的流

    <div id="remoteplayer"></div>
    

    重复上面加入房间的步骤, 注意这里必须要保证 2 个页面的用户名不同。
    加入房间后,让我们开始订阅吧。

    ... // 加入房间后
    
    const remoteVideo = document.getElementById('remoteplayer');
    
    // 获取当前房间所有用户
    const users = myRTC.users;
    for (let i = 0; i < users.length>; i +=1) {
      const user = users[i];
    
      // 如果这个用户正在发布并且不是自己,我们就订阅他
      if (user.published && user.userId !== myRTC.userId) {
        try {
          // 通过用户的 userId 订阅目标用户
          // 这里返回和我们最初从本地获取媒体流时的返回格式一样
          // 都是封装后的 Stream 对象
          const remoteStream = await myRTC.subscribe(user.userId);
    
          // 同样,调用 play 方法,选择页面上准备好用来播放的元素,就可以播放啦
          remoteStream.play(remoteVideo);
        } catch (e) {
          console.log('subscribe error!', e);
        }
      }
    }
    

    如果想动态监听房间内用户的变化,请参考 API参考 中的 事件监听 一节,同样,退出房间、踢人、静音等其他功能也详细见 API参考

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