Web

编辑文档更新于 2025-01-16 07:59:52

概览BRTCClientStreamLocalStreamRemoteStreamEventsBRTCErrorOption

BRTC Web SDK 一个互动低延时 Web 实时通信解决方案。它是通过 HTML 网页加载的 JavaScript 库。开发者可以使用 BRTC Web SDK 提供的 API 建立连接,控制实时音视频通话或者直播服务。

API 概要

BRTC 是整个 SDK 的主入口,提供创建客户端对象 Client 和创建流对象 Stream 方法。
Client客户端对象,提供实时音视频通话的核心能力,包括进入房间 join 及退出房间 leave,发布本地流 publish 及停止发布本地流 unpublish ,订阅远端流 subscribe 及取消订阅远端流 unsubscribe 等。
Stream音视频流对象,包括本地流 LocalStream 和远端流 RemoteStream 对象。Stream 对象中的方法为本地流及远端流通用方法。
- 本地流 LocalStream 通过 createStream() 创建
- 远端流 RemoteStream 通过监听Client.on()的'stream-added'事件获得

Documentation

Modules

BRTC

Classes

Events

Error

ErrorCode

Installation

NPM 集成

npm install brtc-js --save

在项目脚本里引入模块。

let BRTC = require('./dist/BRTC.js');
import * as BRTC from './dist/BRTC.js';

Script 集成
您只需要在您的 Web 页面中添加如下代码即可：

<script src="./dist/BRTC.js"></script>

Usage

<div id="self-player"></div>
<div id="remote-player"></div>

const client = BRTC.createClient({
  codec: 'h264', // 目前只支持 h264
  appId: 'xxxxxx' // 在控制台创建的appId
});

client
  .on('stream-added', (data) => {
    let remotestream = data.stream;
    console.log(`user ${remotestream.getUserId()} publish`);
    client.subscribe(remotestream, {video: true, audio: true}).then(() => {
      console.log(`user ${remotestream.getUserId()} subscribed`);
      // remotePlayer 为一个dom元素作为视频播放的容器
      let remotePlayer = document.getElemetById('remote-player');
      remotestream.play(remotePlayer).then(() => {
        console.log(`user ${remotestream.getUserId()} played`);
      });
    })
    .catch(error) {
      console.log('subscribe fail', error);
    }
  })
  .on('stream-removed', (data) => {
    let remotestream = data.remotestream;
    console.log(`user ${remotestream.getUserId()} unpublish`);
    remotestream.stop();
    client.unsubscribe(remotestream).then(() => {
      console.log(`user ${remotestream.getUserId()} unsubscribe success`);
    })
    .catch(error) {
      console.log('unsubscribe fail');
    }
  })
  .on('stream-subscribed', (data) => {
    let remotestream = data.stream;
    console.log(`user ${remotestream.getUserId()} subscribe success`);
  })
  .on('stream-published',(data) => {
    let localstream = data.stream;
    // 在body中创建一个元素，这个元素作为视频播放的容器
    let videoDom = document.getElemetById('self-player');
    videoDom.style.width = '400px';
    videoDom.style.height = '400px';
    document.body.appendChild(videoDom);
    localstream.play(videoDom).then(() => {
      console.log('localstream play success');
    });
    console.log(`user ${localstream.getUserId()} publish success`);
  })
  .on('stream-updated', (data) => {
    let stream = data.stream;
    console.log(`user ${stream.getUserId()} update`);
  });

let cameraList = [] // 本地摄像头列表
let micList = [] // 本地麦克风列表
let speakerList = [] // 本地扬声器列表

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

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

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

/**
  * 加入房间
  * 
  * @param roomId 房间id(在控制台生成临时sig时的房间ID)，类型为String
  * @param userId 用户id(在控制台生成临时sig时的用户ID)，类型为Number
  * @param token 在控制台生成的临时sig，类型为String
  * 
  * @returns
  */
client.join(roomId, userId, token).then(() => {
  const localstream = BRTC.createStream({
    video: true,
    audio: true,
    microphoneId: micList[0].deviceId,
    cameraId: cameraList[0].deviceId
  });

  localstream.setVideoProfile('720p');
  localstream.setAudioProfile('standard');

  localstream.init()
    .then(() => {
      client.publish(localstream).then(() => {
        console.log('localstream published');
      });
    })
  .catch(error => {
    console.log('create localstream fail', error);
  })
});

Web