TWebLive

TWebLive

腾讯云 Web 直播互动组件的命名空间。接入前,您需要:

  • 腾讯云实时音视频 TRTC 控制台 中创建一个实时音视频应用(此时会自动创建一个 SDKAppID 相同的 IM 应用),取得 SDKAppID。然后应用管理 -> 功能配置 -> 开启自动旁路推流。开启旁路推流功能后, TRTC 房间里的每一路画面都配备一路对应的播放地址(如果不需要 CDN 直播观看,可略过开启旁路推流的步骤)。
  • 腾讯云直播控制台 配置播放域名并完成 CNAME 配置,详细操作指引请参见《CDN 直播观看》如果不需要 CDN 直播观看,此步骤可略过)。
  • 从v1.1.0起,手动安装依赖 trtc-js-sdktim-js-sdk

Examples

// 从v1.1.0起,为了减小 tweblive.js 的体积,避免和接入侧已使用的 trtc-js-sdk 和 tim-js-sdk 发生版本冲突
// trtc-js-sdk 和 tim-js-sdk 不再被打包到 tweblive.js,在使用前您需要手动安装依赖。
npm i trtc-js-sdk --save
npm i tim-js-sdk --save

// 如果您通过 script 方式使用 tweblive,当推流时需要先手动引入 trtc.js
<script src="./trtc.js"></script>
<script src="./tweblive.js"></script>
// 如果您通过 script 方式使用 tweblive,当聊天互动时需要先手动引入 tim-js.js
<script src="./tim-js.js"></script>
<script src="./tweblive.js"></script>
<div id="pusherView" style="width:100%; height:auto;"></div>
<script>
// ------------- 当需要推流时,创建 Pusher(推流)对象,最简单的推流仅需3步 -------------
// 1、创建 Pusher(推流)对象
let pusher = TWebLive.createPusher({ userID: 'your userID' });

// 2、设置渲染界面,且从麦克风采集音频,从摄像头采集视频(默认720p)
pusher.setRenderView({
  elementID: 'pusherView',
  audio: true,
  video: true
}).then(() => {
  // 3、填入 sdkappid roomid 等信息,推流
  // url 必须以 `room://` 开头
  let url = `room://sdkappid=${SDKAppID}&roomid=${roomID}&userid=${userID}&usersig=${userSig}&livedomainname=${liveDomainName}&streamid=${streamID}`;
  pusher.startPush(url).then(() => {
    console.log('pusher | startPush | ok');
  });
}).catch(error => {
  console.error('pusher | setRenderView | failed', error);
});
</script>
<div id="playerView" style="width:100%; height:auto;"></div>
<script>
// ------------- 当需要拉流播放时,创建 Player(播放器)对象,最简单的拉流仅需3步 -------------
// 1、创建 Player(播放器)对象
let player = TWebLive.createPlayer();

// 2、设置渲染界面
player.setRenderView({ elementID: 'playerView' });

// 3、填入 flv hls 地址等信息,拉 CDN 流播放,此时 url 必须以 `https://` 开头
// 或 填入 sdkappid roomid 等信息,拉 WebRTC 低延时流播放,此时 url 必须以 `room://` 开头
let url = 'https://'
  + 'flv=' + encodeURIComponent('https://200002949.vod.myqcloud.com/200002949_b6ffc.f0.flv') + '&' // 请替换成实际可用的播放地址
  + 'hls=' + encodeURIComponent('https://200002949.vod.myqcloud.com/200002949_b6ffc.f0.m3u8') // 请替换成实际可用的播放地址

// let url = `room://sdkappid=${SDKAppID}&roomid=${roomID}&userid=${userID}&usersig=${userSig}`;
player.startPlay(url).then(() => {
  console.log('player | startPlay | ok');
}).catch((error) => {
  console.error('player | startPlay | failed', error);
});
</script>
// ------------- 当主播和观众需要聊天互动时,创建 IM(即时通信)对象,最简单的消息收发仅需3步 -------------
// 1、创建 IM(即时通信)对象并监听事件
let im = TWebLive.createIM({
  SDKAppID: 0 // 接入时需要将0替换为您的云通信应用的 SDKAppID
});
// 监听 IM_READY IM_TEXT_MESSAGE_RECEIVED 等事件
let onIMReady = function(event) {
  im.sendTextMessage({ roomID: 'your roomID', text: 'hello from TWebLive' });
};
let onTextMessageReceived = function(event) {
  event.data.forEach(function(message) {
    console.log((message.from || message.nick) + ' : ', message.payload.text);
  });
};
// 接入侧监听此事件,然后可调用 SDK 发送消息等 API
im.on(TWebLive.EVENT.IM_READY, onIMReady);
// 收到文本消息,上屏
im.on(TWebLive.EVENT.IM_TEXT_MESSAGE_RECEIVED, onTextMessageReceived);
// 其它事件

// 2、登录
im.login({userID: 'your userID', userSig: 'your userSig'}).then((imResponse) => {
  console.log(imResponse.data); // 登录成功
  if (imResponse.data.repeatLogin === true) {
    // 标识账号已登录,本次登录操作为重复登录
    console.log(imResponse.data.errorInfo);
  }
}).catch((imError) => {
  console.warn('im | login | failed', imError); // 登录失败的相关信息
});

// 3、加入直播间
im.enterRoom('your roomID').then((imResponse) => {
  switch (imResponse.data.status) {
    case TWebLive.TYPES.ENTER_ROOM_SUCCESS: // 加入直播间成功
      break;
    case TWebLive.TYPES.ALREADY_IN_ROOM: // 已经在直播间内
      break;
    default:
      break;
  }
}).catch((imError) => {
  console.warn('im | enterRoom | failed', imError); // 加入直播间失败的相关信息
});
</script>

Methods

(static) createPusher(options) → {Pusher}

创建 Pusher(推流)对象。

See:
Parameters:
Name Type Description
options Object

配置

Properties
Name Type Description
userID string

pusher 对应的用户 ID

screenCapture boolean | undefined

true -> 创建屏幕分享的 pusher, (false or undefined) -> 创建本地摄像头和麦克风的 pusher

Returns:
Type
Pusher

(static) createPlayer() → {Player}

创建 Player(播放器)对象。

See:
Returns:
Type
Player

(static) createIM(options) → {IM}

创建 IM(即时通信)对象。

See:
Parameters:
Name Type Description
options Object

im 配置项

Properties
Name Type Description
SDKAppID number

腾讯云通信应用的 SDKAppID

Returns:
Type
IM