腾讯云Web Live交互式组件

基于Tencent Cloud Web Super Player-TcPlayer和Tencent Cloud Instant Messaging IM-TIM的Tencent Cloud Web Live交互式组件封装了一个简单易用的API，为开发人员提供了免费和开放源代码的演示，以便于开发人员快速连接并使用. 适用于大型会议，活动，课程，讲座等的现场直播，以及与商品现场直播共享的微信H5等现场直播交互场景.

微信扫描QR码

或点击我体验

前端开发学生经常遇到这样的需求:

发展同学一般如何实现这种需求？那些对网络实时广播有一定了解的人将选择flv.js或hls.js播放实时广播源. 聊天互动使用websocket快速编写简单的消息演示. 但是，编写原型演示并不难，但是您将遇到许多挑战:

可以看出，如果您在短时间内开始从零开始组装和发展，通常是超时和超时，赶上架子，发展学生精疲力尽，现场直播的效果是不一定好. 现在，直播变得如此火爆，没有一个将直播和聊天互动功能结合在一起的开源项目，我可以做些改动吗？

腾讯云终端研发中心的网络团队已经开发了腾讯云Web Super Player和IM IM SDK（暂时还存在其他SDK，请点击表←_←）. 面对这样的共同需求和痛点，因此基于这两个可靠且出色的产品qq浏览器云播，开发了开源的腾讯云Web Live交互式组件，供开发人员使用和参考.

使用腾讯云Web Live Interactive组件qq浏览器云播，开发人员在下载SDK之后仅需要填写几个参数即可快速运行一个项目，该项目包含诸如实时视频播放，聊天互动，喜欢和礼物之类的常用功能. 看起来像这样:

// 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>
  // 必须同时同时填入 hls 和 flv 流地址
  // 在支持 MSE 的浏览器上，直播组件会优先选择使用 flv 直播源，延时更低，直播效果更好
  // 在不支持 MSE 的浏览器上，直播组件会使用 hls 直播源，延时稍大，但在移动端适应性好
  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: 'TWebLiveDeveloperHub', // 替换为已加入的 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);
// 更多事件请参考：https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/module-EVENT.html
// 加入，未登录时匿名加入，只能收消息，不能发消息
tweblive.enterRoom(""); // 接入时填要加入的 ID，对应于 IM 系统的直播大群（AVChatRooM）的 groupID

为了与PC和移动终端兼容，开发人员必须同时提供flv和hls实时广播源. 在支持MSE的浏览器上，实时广播组件将更喜欢使用flv实时广播源，并具有较低的延迟和实时广播. 效果更好；在不支持MSE的浏览器上，直播组件将使用hls直播源，但延迟时间会稍长一些，但在移动端具有良好的适应性.

如果在Windows或Mac平台上推送实时流媒体，强烈建议使用TRTC Electron. 旁路推送流可以同时生成flv和hls流. 它与腾讯云即时消息即时消息完美结合.

通过Electron演示运行本文档将帮助您快速实现实时广播并绕过推送流，其效果如下:

如果要在中显示昵称，则需要设置一个昵称（如果已设置，则可以忽略此步骤），然后在成功设置后将其添加

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

在支持MSE的浏览器上，例如PC Chromium内核浏览器（360浏览器，Chrome浏览器等）或TBS模式（Android WeChat，QQ浏览器），该组件将更喜欢播放flv流. 播放延迟比较:

浏览器播放延迟

Windows Chrome浏览器

3s〜5s

Mac Chrome浏览器

3s〜5s

Mac Safari浏览器

10s〜20s

iOS Safari浏览器

10s〜20s

iOS微信

10s〜20s

Android微信（TBS）

3s〜5s

Android QQ浏览器

3s〜5s

Android Chrome浏览器

3s〜5s

其他Android浏览器

10s〜20s

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-240993-1.html