腾讯云SDK体验-web直播互动组件TWebLive是腾讯云终端研发团队推出的一个新的 Web 直播互动 SDK，集成

简介

TWebLive是腾讯云终端研发团队推出的一个新的 Web 直播互动 SDK，集成了腾讯云实时音视频 TRTC、即时通信 IM、超级播放器 TCPlayer，覆盖了 Web 直播互动场景常见的功能（推流、开/关麦，开/关摄像头，微信分享观看、聊天点赞等等），并封装了简单易用的 API，接入后可快速实现 Web 端推流、拉流以及实时聊天互动功能。

下面就基于腾讯云 TWebLive SDK 开发一个简单的直播网站来体验一下吧。

选择TWebLive的原因

开发者接入此 SDK，可彻底替代 flash 推流方案，大大降低 Web 推流、Web 低延时观看、CDN 观看以及实时聊天互动（或弹幕）的实现复杂度和时间成本

应用场景：

网页版推流，可用于直播宣传活动、网络教学监课、电商直播带货、各类讲座或知识分享等各类直播，不需要学习复杂的直播流程，无需按照直播app应用，打开电脑或者手机，随时随地可直播。
网页版观看，CDN观看可支撑上万级、百万级用户同时观看直播，pc端和移动端能满足用户非常便捷的观看直播。
IM互动是在各类直播中必不可少的互动，点赞，送礼物，入群、离开等消息类通知大大的提升了直播间的活力。

效果展示

功能设计

简易架构图：

功能实现：

1. 主播端创建 Pusher（推流）对象，最简单的推流仅需3步。

<div id="pusherView" style="width:100%; height:auto;"></div>

创建 Pusher（推流）对象

let pusher = TWebLive.createPusher({ userID: 'your userID' });

设置渲染界面，且从麦克风采集音频，从摄像头采集视频（默认720p）

pusher.setRenderView({
 elementID: 'pusherView',
 audio: true,
 video: true
}).then(() => {})

填入 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);
});

2. 观众端拉流播放组件，创建 Player（播放器）对象，最简单的拉流仅需3步。

<div id="playerView" style="width:100%; height:auto;"></div>

创建 Player（播放器）对象

let player = TWebLive.createPlayer();

设置渲染界面

player.setRenderView({ elementID: 'playerView' });

填入 flv hls 地址等信息，拉 CDN 流播放 注意： 此时 url 必须以 https:// 开头，拉 WebRTC 低延时流播放，此时 url 必须以 room:// 开头


let url = `https://flv=https://200002949.vod.myqcloud.com/200002949_b6ffc.f0.flv&hls=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>

3.IM互动组件，创建 IM（即时通信）对象

创建 IM（即时通信）对象并监听事件

let im = TWebLive.createIM({
  SDKAppID: 0 // 接入时需要将0替换为您的云通信应用的 SDKAppID
});

接入侧监听此事件，然后可调用 SDK 发送消息等

im.on(TWebLive.EVENT.IM_READY, onIMReady);
let onIMReady = function(event) {
  im.sendTextMessage({ roomID: 'your roomID', text: 'hello from TWebLive' });
};

监听 IM_READY IM_TEXT_MESSAGE_RECEIVED 等事件，接收文本和自定义消息

// 收到文本消息，上屏
im.on(TWebLive.EVENT.IM_TEXT_MESSAGE_RECEIVED, onTextMessageReceived);
let onTextMessageReceived = function(event) {
  event.data.forEach(function(message) {
    console.log((message.from || message.nick) + ' : ', message.payload.text);
  });
};

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); // 登录失败的相关信息
});

创建直播间（主播端）

im.createRoom({name: '我的直播间',roomID: 'your roomID '})
  .then((imResponse) => { // 创建成功
        console.log('创建成功', your roomID)
      }).catch((imError) => {
      console.warn('im | createRoom | failed', imError);
      })

加入直播间（直播群允许匿名加群）

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>

为了进一步降低开发者的开发和人力成本，我们在 TWebLive SDK 的基础上，提供了同时适配 PC 和移动端浏览器的 Demo，并开源到了 github。开发者 fork&clone 项目到本地（顺手来个star，谢谢~），稍作修改即可把 Demo 跑起来，或者集成到自己的项目部署上线。

运行体验

后续计划

推流端支持屏幕分享
图片消息互动
观众端多线路观看（WebRTC 低延时线路和 CDN 线路）
主播观众连麦互动
And More...

接入中可能踩到的坑

监听事件必须在 login 接口前调用，避免漏掉 SDK 派发的事件。接口手册
消息上屏，请遍历数组，以免漏掉消息。接口手册
消息的发送等API接口的调用必须是等SDK 进入 ready 状态后。接口手册

腾讯云SDK体验-web直播互动组件

简介