【新知实验室 TRTC&IM】实时互动课堂最佳实践

这篇具有很好参考价值的文章主要介绍了【新知实验室 TRTC&IM】实时互动课堂最佳实践。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、新知实验室-TRTC腾讯云音视频产品体验官计划

活动简介

活动链接:https://marketing.csdn.net/p/637c852aedd21c0ef20754a7d7635e6d
活动链接:https://marketing.csdn.net/p/637c852aedd21c0ef20754a7d7635e6d
活动链接:https://marketing.csdn.net/p/637c852aedd21c0ef20754a7d7635e6d

在线上线下一体化、虚拟现实加速融合的趋势下,音视频已经演进成一种基本能力,深刻变革了社会的交互方式。未来,音视频作为全真互联时代的重要基石,将持续推动互联网和实体产业的数字化创新与升级。
腾讯云实时音视频TRTC基于腾讯20多年在音视频技术上的深度积累,主打低延时互动直播和多人音视频两大解决方案,致力于帮助全球开发者快速搭建低成本、低延时、高品质的音视频互动解决方案。
课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频



二、产品简介

TRTC

TRTC全称(Tencent Real-Time Communication)即腾讯实时音视频服务,定位是解决实时通信的云服务,主要功能是基于互联网的,接收、处理、转发和保存大流量的音视频流数据,主要用于直播、视频会议等场景;围绕直播提供了一些简单IM功能;提供demo和易用的SDK,方便不同终端快速接入;允许用户自定义采集和渲染数据源。

IM

即时通信(Instant Messaging,IM)基于 QQ 底层 IM 能力开发,仅需植入 SDK 即可轻松集成聊天、会话、群组、资料管理能力,帮助您实现文字、图片、短语音、短视频等富媒体消息收发,全面满足通信需要。



三、最佳实践

3.1 官方快速上手TRTC(快速跑通)

腾讯云音视频官方提供了一个快速上手案例,这里呢,我们使用Web项目来为大家演示一下(我在前端方面也是个小白)

3.1.1 注册腾讯云账号

首先注册腾讯云的账号,新用户有好礼相赠
注册链接:腾讯云
注册链接:腾讯云
注册链接:腾讯云

3.1.2 使用实时音视频(需先开通)

课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频

3.1.3 创建应用

课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频

课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频

3.1.4 查看项目(查看密钥和快速上手操作)

课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频
课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频

3.1.5 运行快速上手项目(静态页面)

课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频
在文件夹中打开Index.html文件
课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频
课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频

课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频

课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频

至此,您已成功跑通TRTC的Web快速上手项目, 同时您也可以设置好参数,将其托管到OSS存储桶中,进行测试







3.2 使用TRTC&IM构建实时互动课堂

因为疫情原因,全国的大部分老师和学生都在进行网课学习,同时在前段时间(2022年11月9日),又出现了网课入侵这种非常恶劣的事件,那么在这里,将为大家演示如何使用TRTC&IM为老师和同学构建一个线上实时互动课堂,项目由 腾讯即时通信IM团队提供

3.2.1 项目简介(trtc-education-electron)

TRTC 实时互动课堂是一款开源的在线课堂软件,支持一名教师给多名学生在线上课,一个课堂最多同时支持 300 人在线实时互动。如果开启旁路直播、CDN推流服务,可支持上万人在线观看。本软件基于腾讯云实时音视频通信(Tencent Real-Time Communication, TRTC)、腾讯云即时通信(Tencent Instant Message, TIM)、Electron、React 和 Webpack 等构建。

官方项目地址:https://github.com/TencentCloud/trtc-education-electron

GitCode项目地址(已修复TIMService.ts)Bug:https://gitcode.net/fly1574/trtc-education-electron-fixed



3.2.2 设置即时通讯IM的 Web 端可同时在线个数

IM控制台:https://console.cloud.tencent.com/im
课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频
课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频


3.2.3 构建项目(使用云服务器)

这里使用的是一台云服务器(没有摄像头、麦克风),读者们也可以根据自己的情况使用本地的win电脑直接开发

3.2.3.1 构建环境
软件 版本
NodeJS v16.13.1
git 2.25.1
yarn 1.22.15
vscode 1.73.1

3.2.3.2 克隆代码
git clone https://github.com/TencentCloud/trtc-education-electron.git

课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频


3.2.3.3 设置AppID和SK(记得保存)
修改项目中的配置文件
src/main/config/generateUserSig.js

课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频

3.2.3.4 修改官方留的Bug

在运行这个demo的时候,还是出了一点bug的,到现在发现俩,也和腾讯的在线支持反馈了,他们说会更新,代码,但是博文发出时,github上的代码bug仍旧是没有修复,所以需要手动添加 .toString()

# 修改文件 
# trtc-education-electron\src\renderer\core\room-core\TIMService.ts
修改该文件的186238行左右,如下

$ 修改前
    this.groupID = groupID;
    const realGroupID = groupID;
$ 修改后
    this.groupID = groupID.toString();
    const realGroupID = groupID.toString();

课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频
课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频

3.2.3.5 安装依赖
$ cd trtc-education-electron/
# 安装yarn
$ corepack enable
# 查看yarn版本
$ yarn --version
# 指定 npm 国内镜像
$ npm config set registry=https://registry.npm.taobao.org/
# 指定 Electron 的国内镜像地址
$ npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ 
# 安装依赖
$ yarn

课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频

3.2.3.6 测试&打包

因为该云服务器没有摄像头和麦克风,这里的测试会失败,直接进行打包,然后将生成的.exe文件直接在本地电脑安装进行测试

# 如果需要先测试
$ yarn start

# 直接打包
$ yarn package

课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频

3.2.4 在线课堂运行

必须先开启程序所运行主机的摄像头和麦克风权限

教师创建课堂
课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频

课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频

学生安装程序后,加入课堂
课堂直播学生实时互动技术,腾讯云,腾讯云,云计算,TRTC,IM,腾讯云音视频



四、总结

作为一个从来没有使用过TRTC的新人,快速跑通官方的演示案例还是很轻松的;在后面的那个TRTC&IM项目trtc-education-electron实时在线课堂,还是挺简单的,不过还是很意外的帮助官方发现了俩小bug。


整体看来上手TRTC还是很快,而且拓展性很强,还有一点就是腾讯云音视频的在线技术支持团队,的确反应很快速!好的产品离不开好的技术支持!文章来源地址https://www.toymoban.com/news/detail-793538.html

到了这里,关于【新知实验室 TRTC&IM】实时互动课堂最佳实践的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 新知实验室

    TUIRoom 是一个包含 UI 的开源音视频组件,通过集成 TUIRoom,可以在业务中快速上线音视频房间,屏幕分享,聊天等功能。 项目是开源的项目,根据自己 的需求设计项目。 创建步骤如下 : 一、  开通腾讯云实时音视频及即时通信服务 TUIRoom 基于腾讯云实时音视频和即时通信服

    2024年02月03日
    浏览(32)
  • COI实验室技能:python控制相机的方法——采集、处理、显示、实时

    COI实验室技能:python控制相机的方法——采集、处理、显示、实时   本文介绍如何利用python控制办公摄像头、工业相机和科研相机。将数据采集和处理统一到python代码中。   主要围绕解决采用什么库、掌握这个库的控制相机方法(参数配置、读取数据等等)、结合自己的算

    2024年02月13日
    浏览(20)
  • 智慧校园实验室安全综合管理平台如何保障实验室安全?

    一、建设思路 实验室安全综合管理平台是基于以实验室安全,用现代化管理思想与人工智能、大数据、互联网技术、物联网技术、云计算技术、人体感应技术、语音技术、生物识别技术、手机APP、自动化仪器分析技术有机结合,通过建立以实验室为中心的管理体系,从人员、

    2024年01月20日
    浏览(44)
  • 基于VR技术的新型实验室教学模式——VR线上生物实验室

    随着科技的发展,虚拟现实技术已经逐渐走进了我们的生活。在教育领域中,虚拟现实技术也被广泛应用于各种学科的教学中。其中,VR线上生物实验室是广州华锐互动开发的,一种基于VR技术的新型教学模式,它能够为学生提供更加真实、生动的实验体验,同时也能够更好地

    2024年02月14日
    浏览(30)
  • 实验室安全

    [判断题] 基于安全考虑,每个实验房间每天最后一个离开的同学必须确保进行断电处理【4分】 正确答案:B 解析:暂无解析 [判断题] 实验用电烙铁应有专门搁架,用毕立即切断电源【4分】 正确答案:A 解析:暂无解析 [判断题] 集中供气是解决实验室存放过多气瓶的有效途径

    2024年02月08日
    浏览(31)
  • 实验室安全考试

    1、[判断题] 火灾对实验室构成的威胁最为严重,最为直接。应加强对火灾三要素(易燃物、助燃物、点火源)的控制。 (分值1.0) 你的答案: 正确 2、[判断题] 50毫安的工频电流就可以使人遭到致命电击。 (分值1.0) 你的答案: 正确 3、[判断题] 用电安全的基本要素有:电

    2024年02月06日
    浏览(38)
  • 决策树(实验室会议小记)

    特征过多导致过拟合、有一些特征是噪音。 1、 尝试所有组合:也是全局最优 2、贪心算法:每次决策都是基于当前情况去寻找最优解。计算过程:把特征加进去→是否更优?→是:加入模型/否:淘汰 3、L1正则:目标函数为损失函数;特点:具有稀疏性 4、决策树:节点代表

    2024年02月08日
    浏览(29)
  • WebGL在实验室方向的应用

    WebGL在实验室方向的应用涉及到实验过程的可视化、数据分析、模拟等方面。以下是一些WebGL在实验室领域的应用示例,希望对大家有所帮助。北京木奇移动技术有限公司,专业的软件外包开发公司,欢迎交流合作。 1.分子模型和化学反应模拟: 利用WebGL,实验室研究人员可以

    2024年01月24日
    浏览(28)
  • XShell连接实验室服务器

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 前言 第一次连接实验室服务器跑代码,因pycharm专业版学生认证需要时间,所以自学了XShell连接服务器以及提交任务,现在终于装好了,趁着热乎劲儿总结下,也希望对你有用。作者是新手小白,如有疏漏

    2024年01月24日
    浏览(34)
  • 网络安全实验室2.基础关

    url:http://lab1.xseclab.com/base1_4a4d993ed7bd7d467b27af52d2aaa800/index.php 查看网页源代码的方式有4种,分别是:1、鼠标右击会看到”查看源代码“,这个网页的源代码就出现在你眼前了;2、可以使用快捷Ctrl+U来查看源码;3、在地址栏前面加上view-source,如view-source:https://www.baidu.com ;

    2023年04月17日
    浏览(22)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包