小程序

编辑文档更新于 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,发布本地流 publishRTMP 及停止发布本地流 unpublishRTMP ,订阅远端流 subscribeRTMP 及取消订阅远端流 unsubscribeRTMP 等。
Stream音视频流对象,包括本地流 LocalStream 和远端流 RemoteStream 对象。Stream 对象中的方法为本地流及远端流通用方法。
- 本地流 LocalStream 通过 createStream() 创建
- 远端流 RemoteStream 通过监听Client.on()的'stream-added'事件获得

Documentation

Modules

BRTC

Classes

Events

Error

ErrorCode

Installation

NPM 集成

到微信小程序后台配置以下域名到白名单：

https://brtcapi.baijiayun.com https://qslog.baijiayun.com wss://brtc-data-collection.baijiayun.com wss://online-bj-mpc.baijiayun.com wss://online-sh-mpc.baijiayun.com wss://online-bj-hs-unicom-mpc.baijiayun.com wss://online-sz-mpc.baijiayun.com wss://online-qy-hs-unicom-mpc.baijiayun.com wss://online-ff-mpc.baijiayun.com wss://online-tx-bj-mpc.baijiayun.com wss://online-tx-hw-mpc.baijiayun.com wss://latest-bj-mpc.baijiayun.com wss://latest-sh-mpc.baijiayun.com wss://latest-bj-hs-unicom-mpc.baijiayun.com wss://latest-sz-mpc.baijiayun.com wss://latest-qy-hs-unicom-mpc.baijiayun.com wss://latest-tx-hw-mpc.baijiayun.com wss://latest-tx-bj-mpc.baijiayun.com wss://latest-ff-mpc.baijiayun.com

npm install brtc-js-mini --save

在项目脚本里引入模块。

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

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.subscribeRTMP(remotestream, {video: true, audio: true}).then((url) => {
      // 使用 live-player 组件拉取 url 播放
    })
    .catch(error) {
      console.log('subscribe fail', error);
    }
  })
  .on('stream-removed', (data) => {
    let remotestream = data.remotestream;
    console.log(`user ${remotestream.getUserId()} unpublish`);
    client.unsubscribeRTMP(remotestream).then(() => {
      console.log(`user ${remotestream.getUserId()} unsubscribe success`);
    })
    .catch(error) {
      console.log('unsubscribe fail');
    }
  })
  .on('stream-updated', (data) => {
    let stream = data.stream;
    console.log(`user ${stream.getUserId()} update`);
  });

/**
  * 加入房间
  * 
  * @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,
    rtmp: true
  });

  localstream..setVideoEncoderConfiguration({
    width: 320,
    height: 180,
    frameRate: 15,
    bitrate: 200
  });

  client.publishRTMP(localstream).then((url) => {
    // 使用 live-pusher 推 url 流，自己设置推流参数
    console.log('localstream published');
  });
});

<live-pusher url="https://domain/push_stream" bindnetstatus="netstatus" style="width: 300px; height: 225px;" />
<live-player url="https://domain/pull_stream" bindnetstatus="netstatus" style="width: 300px; height: 225px;" />

// 将 stats 传递给 brtc 用于数据分析
Page({
  netstatus(e) {
    stream.onMiniProgramState(e.detail.info)
  }
})