草庐IT

腾讯云TRTC —— 实时音视频完整案例 音视频+共享屏幕直播

洲霸霸 2023-08-06 原文

实时音视频（TRTC）

是腾讯云提供的一套低延时、高质量的音视频通讯服务，致力于为腾讯云客户提供稳定、可靠和低成本的音视频传输能力。您可以使用该服务快速构建“视频通话”、“在线教育”、“直播连麦”、“在线会议”等对通信延时要求比较苛刻的音视频应用。
  • 这里我们以无UI集成方案为例，介绍腾讯云直播的完整使用方法
    官方文档： https://cloud.tencent.com/document/product/647/32398无UI集成方案

为了让我们更快速的了解产品，腾讯云提供了各种设备的Demo,安装后即可体验TRTC的各种功能。

  1. 登录后台（实时音视频控制台） > 开发辅助 > 快速跑通Demo
  2. 新建应用 > 输入应用名称 创建一个新应用
  3. 下载Web端SDK及配套Demo源码
  4. 点击“已下载，下一步”
  5. 进入修改配置页，获取 SDKAppID 和密钥。
  • 运行 Demo

为满足不同客户的需求，TRTC Web 目前提供以下几种基础 Demo：

  1. Demo 1: base-js
    开发框架：jQuery + 原生 JavaScript
    TRTC Web 基础 Demo (jQuery 版本) 集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能，可直接在浏览器中运行。快速体验可访问 base-js 在线体验地址。
  2. Demo 2: quick-demo-js
    开发框架：无框架，原生 JavaScript
    TRTC Web 快速运行 Demo (原生 JavaScript 版本) 集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能，可直接在浏览器中运行。快速体验可访问 quick-demo-js 在线体验地址。
  3. Demo 3: quick-demo-vue2-js
    开发框架：Vue 2 + JavaScript
    TRTC Web 快速运行 Demo (Vue2 版本) 集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能，需要您安装 Node 环境。快速体验可访问 quick-demo-vue2-js 在线体验地址。
  4. Demo 4: quick-demo-vue3-ts
    开发框架：Vue 3 + TypeScript
    TRTC Web 快速运行 Demo (Vue3 版本) 集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能，需要您安装 Node 环境。快速体验可访问 quick-demo-vue3-ts 在线体验地址。

这里我们以Demo1来示范使用流程

  • Demo1是最原生的一个项目，为html+js+jq，仅部分表单项、方法使用了jQuery操作赋值，属于4个Demo里最轻量、最便捷、直接可以打开使用，不需要安装其他依赖或使用终端运行启动！
项目目录为 TRTC_Web/base-js。
  1. 在下载的源码中找到并打开 TRTC_Web/base-js/js/debug/GenerateTestUserSig.js 文件。
  2. 设置 GenerateTestUserSig.js 文件中的相关参数：
SDKAPPID：默认为0，请设置为实际的 SDKAppID。
SECRETKEY：默认为空字符串，请设置为实际的密钥信息。

  1. 运行 Demo：
    使用 Chrome 浏览器打开 Demo 根目录下的 index.html 文件即可运行 Demo。
  • 单击 加入房间 加入音视频通话房间并且发布本地音视频流。
  • 您可以打开多个页面，每个页面都单击 加入房间，正常情况下可以看到多个画面并模拟实时音视频通话。
  • 单击摄像头图标可以选择摄像头设备。
  • 单击麦克风图标可以选择麦克风设备。

WebRTC 需要使用摄像头和麦克风采集音视频，在体验过程中您可能会收到来自 Chrome 浏览器的相关提示，单击 允许。

  • 至此，我们的腾讯云TRTC实时音视频Demo就已经运行完毕。
注：本文使用的生成 UserSig 的方案是在客户端中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通 Demo 和功能调试。
正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。

  • index.html页面会自动捕获URL中的Query参数
    例如：live-room/index.html?roomId=99887766&sdkAppId=1408888888&userId=152888888888888
    在登录页（进入房间页）的表单会自动填充进去我们的参数，所以我们在跳转到直播间的时候可以将部分参数拼接到url后面。

  • 可以单独部署到服务器上，如果使用框架的项目可以放进静态资源文件夹里。如果是放在静态资源地址里跳转的话要注意路径，最前面要加 / 例如：/base/index.html而不是base/index.html

当你需要同时使用屏幕共享与实时音视频两个功能的时候，官方文档内明确规定不可以同时开启这两个功能的配置项

  • 修改js/share-client.js 中的TRTC.createClient实例中的autoSubscribe为false
- 负责屏幕分享的 shareClient 需要关闭自动订阅，否则会出现重复订阅远端流的情况。
- 负责本地音视频流发布的 client 需要取消订阅 shareClient 发布的流。否则会出现自己订阅自己的情况。（会将自己踢出房间）
  • 上述流程为直播间使用的基本流程，可根据上述流程自由拓展开发（区分角色，添加特效、功能等）

以上为本人使用腾讯云TRTC开发直播室功能过程记录整理，内容参考官方文档。

音视音视频xffxff0c腾讯云实时音视频

有关腾讯云TRTC —— 实时音视频完整案例 音视频+共享屏幕直播的更多相关文章

  1. ruby - 通过 ruby​​ 进程共享变量 - 2

    我正在编写一个gem，我必须在其中fork两个启动两个webrick服务器的进程。我想通过基类的类方法启动这个服务器，因为应该只有这两个服务器在运行，而不是多个。在运行时，我想调用这两个服务器上的一些方法来更改变量。我的问题是，我无法通过基类的类方法访问fork的实例变量。此外，我不能在我的基类中使用线程，因为在幕后我正在使用另一个不是线程安全的库。所以我必须将每个服务器派生到它自己的进程。我用类变量试过了，比如@@server。但是当我试图通过基类访问这个变量时，它是nil。我读到在Ruby中不可能在分支之间共享类变量，对吗？那么，还有其他解决办法吗？我考虑过使用单例，但我不确定这是

  2. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

  3. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  4. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  5. ruby - 在模块/类之间共享全局记录器 - 2

    在许多ruby​​类之间共享记录器实例的最佳(正确)方法是什么？现在我只是将记录器创建为全局$logger=Logger.new变量，但我觉得有更好的方法可以在不使用全局变量的情况下执行此操作。如果我有以下内容:moduleFooclassAclassBclassC...classZend在所有类之间共享记录器实例的最佳方式是什么？我是以某种方式在Foo模块中声明/创建记录器还是只是使用全局$logger没问题？ 最佳答案 在模块中添加常量:moduleFooLogger=Logger.newclassAclassBclassC..

  6. ruby - 如何使用 cucumber 在场景之间共享状态 - 2

    我有一个功能“从外部网站导入文章”。在我的第一个场景中，我测试从外部网站导入链接列表。Feature:ImportingarticlesfromexternalwebsiteScenario:Searchingarticlesonexample.comandreturnthelinksGiventhereisanImporterAnditsURLis"http://example.com"Whenwesearchfor"demo"ThentheImportershouldreturn25linksAndoneofthelinksshouldbe"http://example.com/d

  7. ruby - 如何更改此正则表达式以从未指定 v 参数的 Youtube URL 获取 Youtube 视频 ID？ - 2

    目前我正在使用这个正则表达式从YoutubeURL中提取视频ID:url.match(/v=([^&]*)/)[1]我怎样才能改变它，以便它也可以从这个没有v参数的YoutubeURL获取视频ID:http://www.youtube.com/user/SHAYTARDS#p/u/9/Xc81AajGUMU感谢阅读。编辑:我正在使用ruby​​1.8.7 最佳答案 对于Ruby1.8.7，这就可以了。url_1='http://www.youtube.com/watch?v=8WVTOUh53QY&feature=feedf'url

  8. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  9. ruby - Sinatra 路由中定义的全局变量是否在请求之间共享？ - 2

    假设我有:get'/'do$random=Random.rand()response.body=$randomend如果我每秒有数千个请求到达/，$random是否会被共享并“泄漏”到上下文之外，或者它会像getblock的“本地”变量一样？我想如果它是在get'/'do的上下文之外定义的，它确实会被共享，但我想知道在ruby​​中是否有我不知道的$机制。 最佳答案 ThispartoftheSinatraREADMEaboutscopeisalwayshelpfultoread但是，如果您只需要为请求保留变量，那么我认为我建议使用

  10. ruby - 跨线程共享枚举器 - 2

    我想从不同线程调用一个公共(public)枚举器。当我执行以下操作时，enum=(0..1000).to_enumt1=Thread.newdopenum.nextsleep(1)endt2=Thread.newdopenum.nextsleep(1)endt1.joint2.join它引发了一个错误:Fibercalledacrossthreads.当enum在从t1调用一次后从t2调用时。为什么Ruby设计为不允许跨线程调用枚举器(或纤程)，以及是否有其他方法可以提供类似的功能？我猜测枚举器/纤程上的操作的原子性在这里是相关的，但我不完全确定。如果这是问题所在，那么在使用时独占锁定

随机推荐