Web端集成TRTC SDK、集成播放器SDK

原创

yuliang

修改于 2021-03-22 14:20:17

3.7K0

修改于 2021-03-22 14:20:17

文章被收录于专栏：TRTC Web SDK TRTC Web SDKTRTC Web SDK

WebRTC 技术由 Google 最先提出，目前主要在桌面版 Chrome 浏览器、桌面版 Edge 浏览器、桌面版 Firefox 浏览器、桌面版 Safari 浏览器以及移动版的 Safari 浏览器上有较为完整的支持，其他平台（例如 Android 平台的浏览器）支持情况均比较差。

在移动端推荐使用小程序解决方案，微信和手机 QQ 小程序均已支持，都是由各平台的 Native 技术实现，音视频性能更好，且针对主流手机品牌进行了定向适配。
如果您的应用场景主要为教育场景，那么教师端推荐使用稳定性更好的 Electron 解决方案，支持大小双路画面，更灵活的屏幕分享方案以及更强大的弱网络恢复能力。

TRTC 桌面浏览器 SDK 依赖以下端口进行数据传输，请将其加入防火墙白名单。

TCP 端口：8687
UDP 端口：8000，8080，8800，843，443，16285
域名：qcloud.rtc.qq.com

集成 TRTC Web SDK 方法

npm方法：

您需要在项目中使用 npm 安装 SDK 包：

npm install trtc-js-sdk --save

在项目脚本里引入模块：

import TRTC from 'trtc-js-sdk';

script集成

您只需要在您的 Web 页面中添加如下代码即可：（下载trtc.js）

<script src="trtc.js"></script>

了解更多相关知识可参考快速集成web端SDK

集成播放器 Web SDK 方法

点播播放器集成方法

集成前需要做一些准备工作，具体流程请参见使用超级播放器播放 - 接入指引文档。
在合适的地方引入播放器样式文件与脚本文件：

<link href="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.v4.1.min.js 之前引入 hls.min.0.13.2m.js。-->
<script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
<!--播放器脚本文件-->
<script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>

如果在域名限制区域，可以引入以下链接：

<link href="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.v4.1.min.js 之前引入 hls.min.0.13.2m.js。-->
<script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
<!--播放器脚本文件-->
<script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>

在需要展示播放器的页面位置加入播放器容器。例如，在 index.html 中加入如下代码（容器 ID 以及宽高都可以自定义）。

<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>

在页面初始化的代码中加入以下初始化脚本，传入在准备工作中获取到的 fileID（【媒资管理】中的视频 ID）与 appID（在【账号信息】>【基本信息】中查看）。

var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器 ID，必须与 html 中一致
   fileID: '', // 请传入需要播放的视频 filID（必须）
   appID: '' // 请传入点播账号的 appID（必须）
 });

了解更多请参见点播播放器使用文档

TCPlayerLite集成方法

在需要播放视频的页面（PC 或 H5）中引入初始化脚本：

<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js" charset="utf-8"></script>;

如果在域名限制区域，可以引入以下链接：

<script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js" charset="utf-8"></script>;

在需要展示播放器的页面位置加入播放器容器，即放一个 div 并命名，例如 id_test_video，视频画面都会在容器里渲染。对于容器的大小控制，您可以使用 div 的属性进行控制，示例代码如下：

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

手机浏览器上简单播放 URL 的视频，则 Javascript 代码如下：

var player = new TcPlayer('id_test_video', {
"m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8", //请替换成实际可用的播放地址
"autoplay" : true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
"poster" : "http://www.test.com/myimage.jpg",//视频播放封面
"width" :  '480',//视频的显示宽度，请尽量使用视频分辨率宽度
"height" : '320'//视频的显示高度，请尽量使用视频分辨率高度
});

PC浏览器实现更低延迟，支持flash：

var player =  new TcPlayer('id_test_video', {
"m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8",
"flv": "http://2157.liveplay.myqcloud.com/live/2157_358535a.flv", //增加了一个 flv 的播放地址，用于PC平台的播放 请替换成实际可用的播放地址
"autoplay" : true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
"poster" : "http://www.test.com/myimage.jpg",
"width" :  '480',//视频的显示宽度，请尽量使用视频分辨率宽度
"height" : '320'//视频的显示高度，请尽量使用视频分辨率高度
});

了解更多可参见TCPlayer Lite

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

实时音视频