实现一个音视频直播

本文介绍如何 实现一个音视频直播, 视频直播的 API 调用时序见下图：

基本流程

一次简单的音视频通话的步骤一般如下:
1.根据应用的 app_id 创建一个本地客户端 BRTCClient 对象
2.通过 BRTCClient.join 方法加入到一个指定的房间中
3.通过 BRTC.createStream 方法创建本地流实例并设置音视频 profile
4.通过 localStream.init() 方法 初始化本地流
5.通过 BRTCClient.publish 将创建的本地音视流发布到房间

当有其他用户加入房间并且也发布音视频流时:
6.SDK 会触发 client.on('stream-added') 事件，在这个事件回调函数的参数中你可以拿到远端流对象 remoteStream表示这个用户刚刚发布了音视频流
7.通过 BRTCClient.subscribe 订阅获取到的 remoteStream
8.订阅完成后，将远端的流通过 remoteStream.play 播放即可

开发环境要求

• Chrome70+
• 有效的 AppID
• 已在 Web 项目成功集成 BRTC SDK,详见参考 一分钟集成 SDK

由于浏览器的安全策略对除 127.0.0.1 以外的 HTTP 地址作了限制，BRTC Web SDK 仅支持 HTTPS 协议或者 http://localhost

请勿使用 HTTP 协议在 http://localhost 之外访问你的项目。

创建 Client 对象

• codec:视频编码格式，目前只支持 h264
• appId:您从 BRTC 申请的 appId

const client = BRTC.createClient({
    codec: 'h264',
    appId: 'xxxxxx'  // 后台获取的 appId
});

加入音视频通话房间

• roomId:房间 id
• userId:加入房间的用户 id

// 加入房间
client.join(  
      roomId, 
      userId, 
      Sig).then(() => {
        console.log('加入房间成功');
    });

创建本地流实例

• 需要保证这时有一个摄像头设备和麦克风设备,创建的过程中浏览器会向用户请求权限,点击允许即可

/**
 * 枚举出设备
 */

let cameraList = []
let micList = []
let speakerList = []

BRTC.enumVideoDevices().then(list => {
    cameraList = list
});

BRTC.enumAudioInputDevices().then(list => {
    micList = list
});

BRTC.enumAudioOutputDevices().then(list => {
    speakerList = list
});

// 创建流实例
const localStream = BRTC.createStream({
    video: true,
    audio: true,
    microphoneId: micList[0].deviceId,
    cameraId: cameraList[0].deviceId
});

// 设置 profile
localStream.setVideoProfile('720p');

// 初始化流,此时会请求授予权限
localStream.init().then(() => {
    console.log('本地流创建成功')
    localStream.play(localVideoId).then(() => {
        console.log('本地流播放成功');
    });
});

发布本地流

发布流远端会收到 `stream-added` 事件

client.publish(localStream).then(() => {
    console.log('本地流发布成功');
});

取消发布本地流

取消发布远端会收到 `stream-removed` 事件

client.unpublish(localStream).then(() => {
    console.log('本地流取消发布成功');
});

订阅远端流

client.on('stream-added', (data) => {
    let remoteStream = data.stream;
    client.subscribe(remoteStream).then(() => {
        remoteStream.play(remoteVideoId).then(() => {
            console.log('远端流播放成功');
        });
    });
});

取消订阅远端流

client.unsubscribe(remoteStream).then(() => {
    // 停止播放
    remoteStream.stop();
});

退出音视频通话房间

client.leave().then(() => {
  // 退房成功，可再次调用client.join重新进房开启新的通话。
}).catch(error => {
  console.error('退房失败 ' + error);
  // 错误不可恢复，需要刷新页面。
});