1、TWebLive 简介git
TWebLive [1] 集成了腾讯云实时音视频 TRTC [2]、腾讯云即时通讯 TIM [3]、腾讯云超级播放器 TCPlayer [4],覆盖了 Web 直播互动场景常见的功能(推流、开/关麦,开/关摄像头,微信分享观看、聊天点赞等等),并封装了简单易用的 API [5],接入后可快速实现 Web 端推流、拉流以及实时聊天互动功能。
github
2、TWebLive 的优点web
<div id="pusherView" style="width:100%; height:auto;"></div><script>// 一、建立 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);});</script>
2. 拉流
当须要拉流播放时,建立 Player(播放器)对象,最简单的拉流仅需3步:
npm
<div id="playerView" style="width:100%; height:auto;"></div><script>// 一、建立 Player(播放器)对象let player = TWebLive.createPlayer();
// 二、设置渲染界面player.setRenderView({ elementID: 'playerView' });
// 三、填入 flv hls 地址等信息,拉 CDN 流播放,此时 url 必须以 `https://` 开头// 或 填入 sdkappid roomid 等信息,拉 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(即时通讯)对象,最简单的消息收发仅需3步:
小程序
// 一、建立 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 发送消息等im.on(TWebLive.EVENT.IM_READY, onIMReady);// 收到文本消息,上屏im.on(TWebLive.EVENT.IM_TEXT_MESSAGE_RECEIVED, onTextMessageReceived);
// 二、登陆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.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>
3、接入使用浏览器
npm i tweblive --save
4、平台支持安全
5、注意事项服务器
6、结语微信
同时,提供有详细的接入方案和在线 Demo,欢迎你们前来体验。目前 TWebLive 在主流的桌面浏览器上也有较好的支持,在移动端支持小程序的解决方案。网络