常规集成(无 UI 库)

服务端 API

微信 H5 直播互动

最近更新时间:2020-07-10 16:33:20

Web 直播互动组件以 Web(H5)播放器即时通信 IM 为基础,封装了简单易用的 API,提供了免费开源的 Demo,方便开发者快速接入和使用。
适用于 Web 直播互动场景,例如大型会议、活动、课程、讲座等的在线直播,带货直播的微信 H5 分享等,效果如下:

在线体验

点我体验 或微信扫一扫下图二维码:

参考文档

Web 直播互动组件的优势

节省开发时间成本,可更专注于开发业务逻辑

使用 Web 直播互动组件时,开发者仅需在下载 SDK 后简单填入几个参数,即可快速地把一个包含直播视频播放、聊天互动、点赞送礼等常见功能的项目运行起来。

为开发者节省大量定位和解决问题的时间

  • 直播场景观众数量多,消息量大时,自研服务容易出现性能瓶颈,例如服务器扛不住并发压力导致请求成功率低、消息堆积、丢消息、消息收发延时严重等难以排查和难以解决的问题。Web 直播互动组件的消息服务集成的即时通信 IM 以 QQ 多年的 IM 能力为基础,保证高并发、高可靠的即时通信能力,且有完善的统计和日志排障系统,遇到问题可快速定位解决。
  • Web 直播互动组件支持设置消息优先级,例如主播发言、观众送礼物等可设置为 高优先级,点赞等消息可设置为 低优先级,IM 系统会保证高优先级消息的下发(直播间消息量超过40条/秒时 IM 后台会限频)。

为项目节省大量的开发和运维成本

  • Web 直播互动组件是完全免费开源的,其集成的Web(H5)播放器是免费的,仅腾讯云即时通信 IM 是增值服务。您可以使用免费的体验版 IM 服务,也可以按需购买企业版或旗舰版,计费说明请参见 计费概述
  • 即时通信 IM 的直播群(AVChatRoom)群成员人数无上限。
  • 即时通信 IM 服务器的节点覆盖面广,可保证用户就近接入,且不用担心服务器扩容问题。
  • 支持针对涉黄、涉政以及不雅词的安全打击,满足安全监管需求。
  • 即时通信 IM 服务团队响应即时,为您的项目保驾护航。

使用指南

步骤1:创建即时通信 IM 应用和群组

  1. 在即时通信 IM 控制台 新建应用,获得 SDKAppID。
  2. 生成 UserSig
  3. 依次向 IM 系统 导入单个帐号(或 导入多个帐号)。
  4. 使用 REST API 方式控制台方式 创建直播群(AVChatRoom)。

步骤2:运行 Web 直播互动组件

// npm i tweblive
import TWebLive from 'tweblive';

let options = {
  SDKAppID: 0, // 接入时需要将0替换为您的即时通信应用的 SDKAppID
  domID: "id_test_video", // 页面上播放器容器 ID,例如 <div id="id_test_video" style="width:100%; height:auto;"></div>
  m3u8: "http://200002949.vod.myqcloud.com/200002949_b6ffc.f0.m3u8", // 请替换成实际可用的播放地址
  flv: "http://200002949.vod.myqcloud.com/200002949_b6ffc.f0.flv" // 请替换成实际可用的播放地址
};
// 创建实例
let tweblive = new TWebLive(options);

// SDK 进入 ready 状态时触发,接入侧监听此事件,然后可调用 SDK 发送消息等api,使用 SDK 的各项功能
let onIMReady = function() {
  tweblive.sendTextMessage({
    roomID: 'AV1', // 替换为已加入的直播间 ID
    text: 'hello from TWebLive'
  }).then(function(res) {
    console.log('demo sendTextMessage OK', res);
  }).catch(function(err) {
    console.log('demo sendTextMessage failed', err);
  });
}
tweblive.on(TWebLive.EVENT.IM_READY, onIMReady);

// 收到直播间其他人发的文本消息
let onTextMessageReceived = function(event) {
  event.data.forEach(function(message) {
    // 有昵称则用昵称,无昵称用 UserID
    console.log('demo ' + (message.nick || message.from) + ' 说: ', message.payload.text);
  });
}
tweblive.on(TWebLive.EVENT.TEXT_MESSAGE_RECEIVED, onTextMessageReceived);

// 收到直播间其他人发的送礼、点赞等自定义消息
let onCustomMessageReceived = function(event) {
  event.data.forEach(function(message) {
    console.log('demo ' + 'data:' + message.payload.data + ' description:' + message.payload.description + ' extension:' + message.payload.extension);
  });
}
tweblive.on(TWebLive.EVENT.CUSTOM_MESSAGE_RECEIVED, onCustomMessageReceived);

// 收到其他人加入直播间的通知
let onRemoteUserJoin = function(event) {
  event.data.forEach(function(message) {
    // 有昵称则用昵称,无昵称用 userID
    console.log('demo ' + (message.nick || message.payload.userIDList[0]) + ' 来了');
  });
}
tweblive.on(TWebLive.EVENT.REMOTE_USER_JOIN, onRemoteUserJoin);

// 更多事件请参考 EVENT

// 加入直播间,未登录时匿名加入直播间,只能收消息,不能发消息
tweblive.enterRoom(""); // 接入时填要加入的直播间 ID,对应于 IM 系统的直播大群(AVChatRooM)的 groupID

步骤3:提供直播源

推荐用 实时音视频旁路推流 功能。
为了同时兼容 PC 端和移动端,建议开发者同时提供 flv 和 hls 两种格式的直播源:

  • 在支持 MSE 的浏览器上,直播组件会优先选择使用 flv 直播源,延时更低,直播效果更好。
  • 在不支持 MSE 的浏览器上,直播组件会使用 hls 直播源,延时稍大,但在移动端适应性好。

如果在 Windows 或 Mac 平台推直播流,强烈建议使用 TRTC Electron旁路推流可同时生成 flv 和 hls 流,与即时通信 IM 完美结合,稳定可靠,服务周到
快速实现直播和旁路推流的操作步骤请参见 跑通 Electron Demo

步骤4:在 Web 直播互动组件的基础上,自行二次开发

您可以根据实际需求在 Web 直播互动组件的基础上,自行二次开发其他业务逻辑和功能。

常见问题

1、进入直播间,其他人看到的提示信息和聊天消息都用的是 userID,能否支持用昵称(nick)展示?

如需在直播间展示昵称,需要先设置昵称(已设置过可忽略此步骤),设置成功后再加入直播群。

// 只有已登录的用户才能修改自己的昵称
tweblive.setMyProfile({ nick: "胡八一" }).then(() => {
  tweblive.enterRoom(""); // 填要加入的直播间 ID,对应于 IM 系统的直播群(AVChatRooM)的 groupID
});
目录