【新知实验室--音视频通话】腾讯云TRTC-实时音视频---多人会议视频通话SDK基础搭建

news2024/10/7 16:21:27

🦖我是Sam9029,一个前端
Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主
🐱‍🐉🐱‍🐉恭喜你,若此文你认为写的不错,不要吝啬你的赞扬,求收藏,求评论,求一个大大的赞!👍

文章目录

    • 前言
    • 🐸TRTC是什么?
    • 🐸TRTC产品功能
      • 小程序在线体验
      • 诸多 终端的在线体验
    • 🐸TRTC使用体验--- 视频通话SDK基础
      • (一)打开腾讯云 搜索 ‘实时音视频’
      • (二)在云控制台-创建应用
      • (三)打开应用管理查看 拿到 SDKAppID 和 密钥SecretKey
      • (四)下载音视频demo源码
      • (五)在对应文件位置 设置 SDKAppID 和 密钥SecretKey
      • (六)将 demo 跑起来
      • (七)⭐进入房间-进行视频通话
      • (八)最终会议房间的效果展示
      • (九)自行完善 第七步中 demo 源码 使其成为 类似第八步的效果
    • 后记
    • 🐸给腾讯云-TRTC的建议

前言

为实现 视频通话 一般来说是需要掌握许多的技术栈的,并且学习与搭建过程在没有人指导的时候,会很痛苦,所以至今为止,我都没有顺理出来,搭建视频通话的学习路径

CSDN 联合 腾讯云–TRTC (实时音视频服务)展开了 “腾讯云音视频-新知实验室-TRTC实时音视频体验计划”

https://marketing.csdn.net/p/637c852aedd21c0ef20754a7d7635e6d?utm_medium=ad.590

从官方的介绍中,我知道了原来现在已经有第三方的音视频服务工具SDK,帮助开发者快速的搭建音视频服务

更多SDK使用细节详情,在 ‘音视频热门场景实战训练营’直播回放中可以了解

https://live.csdn.net/room/csdnnews/hpKKAfwi

腾讯实时音视频文档


🐸TRTC是什么?

实时音视频(Tencent RTC)基于腾讯21年来在网络与音视频技术上的深度积累,以多人音视频通话和低延时互动直播两大场景化方案,通过腾讯云服务向开发者开放,致力于帮助开发者快速搭建低成本、低延时、高品质的音视频互动解决方案。

从官网的介绍中 可以知道

**TRTC---- Tencent Real-Time Communication **

  • 实时音视频(TRTC) 是腾讯云提供的一套低延时、高质量的音视频通讯服务,可以提供稳定、可靠和低成本的音视频传输能力。
  • 我们可以使用该服务快速构建“视频通话”、“在线教育”、“直播连麦”、“在线会议”等对通信延时要求比较苛刻的音视频应用。

一句话 即 “ 无需学习任何音视频通话技术,一键搭建音视频服务强大的第三方工具 ”


🐸TRTC产品功能

推荐阅读官方文档 ,能够使用音视频服务的场景,大部分都以列举
腾讯实时音视频文档-新手指引

  • 视频通话:类似微信上的通话功能,支持窗口切换,美颜以及网络信号提示等功能。
  • 多人会议:支持多个用户在同一个房间中交流互动,可用于在线会议和在线教育等场景。
  • 秀场直播:主播在线秀才艺,支持美颜、伴奏、点赞、弹幕互动和在线连麦。
  • 在线合唱:两位主播在线同唱一首歌,感受 TRTC 所提供的低延时通信能力。
  • 在线 K 歌:支持上万人同时收听,并支持语音互动、音乐伴奏和歌词同步等功能的在线音乐直播方案。

小程序在线体验

你可以使用小程序在线体验

诸多 终端的在线体验

只能说 腾讯太任性了,财大气粗,基本所有的终端都配置的第三方SDK,当然也可以在线体验

https://console.cloud.tencent.com/trtc/helpcenter


🐸TRTC使用体验— 视频通话SDK基础

⭐❗ 腾讯云 会免费 赠送10000 分钟的 音视频体验

⭐❗ 腾讯云 会免费 赠送10000 分钟的 音视频体验

⭐❗ 腾讯云 会免费 赠送10000 分钟的 音视频体验

  • 本次我 通过
    • 体验web端的 (提供了 原生JS,react,vue2,vue3版本的demo)
    • 我使用了 原生JS版
    • 视频通话SDK demo
    • 快速搭建 多人会议音视频通话服务

(一)打开腾讯云 搜索 ‘实时音视频’

腾讯云 https://cloud.tencent.com/

  • 先注册
  • 登录后 搜索 ‘实时音视频’
    请添加图片描述
  • 点击 ‘’实时音视频 进入 对应控制台

(二)在云控制台-创建应用

  • 进入 开发辅助—快速搭建Demo–创建自己的应用信息
    • ❗ ❗ ❗ 创建应用是为了 拿到 SDKAppID密钥SecretKey
      在这里插入图片描述

(三)打开应用管理查看 拿到 SDKAppID 和 密钥SecretKey

请添加图片描述

(四)下载音视频demo源码

demo源码地址: 腾讯云TRTC-实时音视频-SDK&示例代码
在这里插入图片描述

  • 选择 web 平台 源码下载
    请添加图片描述
  • 下载后解压文件如下
    • 打开 base-js文件
      请添加图片描述

(五)在对应文件位置 设置 SDKAppID 和 密钥SecretKey

- 打开 `base-js`文件
- 打开这个文件夹 .\TRTC_Web\base-js\js\debug\GenerateTestUserSig.js

请添加图片描述

  • ❗ ❗ ❗ 打开GenerateTestUserSig.js文件 设置 SDKAppID 和 密钥SecretKey
  • 第54行const SDKAPPID = 你的SDKAppID;

  • 第89行const SECRETKEY = '你的密钥SecretKey';

请添加图片描述

(六)将 demo 跑起来

运行 base-js文件 的 index.html

  • 如下 界面就是成功跑起来了
  • (若未配置 SDKAppID 和 密钥SecretKey 会提示,根据第五步来即可)
    在这里插入图片描述
  • 授权 浏览器 访问 麦克风 和 摄像头
  • 即可获得 打开如下页面
    在这里插入图片描述

(七)⭐进入房间-进行视频通话

❗ 注意
❗ 注意
❗ 注意
此处的效果 仅为 demo 的展示效果
所以 没有 第八步的 会议效果中的各种会议视频常见的工具按钮

在这里插入图片描述

**❗ 注意 完整的展示 效果的 第八步 **

(八)最终会议房间的效果展示

  • 此处为腾讯 的多人会议 在线体验
  • 在线体验地址:https://web.sdk.qcloud.com/component/experience-center/index.html#/detail?scene=roomkit
    在这里插入图片描述

(九)自行完善 第七步中 demo 源码 使其成为 类似第八步的效果

  • 各类会议工具的API文档 https://cloud.tencent.com/document/product/647/17249

如过想要实现 第八步的在线体验中的 UI效果,又不想写UI,可以实用腾讯提供的 继承UI-SDK 方案 TUIKit

  • TUIKit 介绍 https://cloud.tencent.com/document/product/647/71930
  • 集成UI API SDK- 地址:https://cloud.tencent.com/document/product/647/74765

后记

本次体验过腾讯云TRTC ‘一键搭建音视频服务’ 后,拓展了眼界。以前还认为搭建音视频需要自己学各种技术来实现,没想到原来已经有成熟的第三方解决方案了

真是小刀🔪喇了我的屁股,开大眼👁了


🐸给腾讯云-TRTC的建议

首先感谢腾讯云音视频的工程师提供了这么好用的SDK

  • ( 一):web 的 demo 源码从入门的角度来说 实在是学习无成本👍,不过除了 base-js 其他的(如vue,react)的demo太过简洁,希望可以能提供如下这个地址的展示的较完善的web 音视频 服务的源码

在线体验地址:[https://web.sdk.qcloud.com/component/experience-center/index.html#/detail?scene=roomkit]

  • (二)另外 在 腾讯云文档 中 关于 Avatar 虚拟人 的文档说明集成在 了 腾讯特效SDK之中,不是太好找,
    • 并且 其 android 接入说明不够清除明了
    • 目前只提供了 ios android 的接入, 希望 之后能够 提供 web平台的 SDK接入

🦖我是Sam9029,一个前端

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主
🐱‍🐉🐱‍🐉恭喜你,若此文你认为写的不错,不要吝啬你的赞扬,求收藏,求评论,求一个大大的赞!👍

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/51936.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于STM32单片机的篮球计时记分器proteus仿真原理图PCB

功能: 0.本系统采用STC89C52作为单片机 1.LCD1602液晶实时显示比赛剩余时间,球队分数 2.默认计时器为4节,每节10分钟,每节比赛结束,蜂鸣器报警 3.按键功能介绍: 1’键——加1分 4’键——减1分 2’键——加2分 5’键—…

基于java+springmvc+mybatis+vue+mysql的水果食品果蔬生鲜商城销售系统

项目介绍 网络购物作为一种全新的销售方式赢得了越来越多销售者的青睐,近年来销售额更是以连年翻番的惊人速度成倍增长,网络购物已经形成了自身特有的网络销售市场和全新的网络营销模式,也使网络营销渠道应运而生,同时&#xff0…

SRM供应商平台哪些好用?

SRM系统是管理供应商的系统,旨在与供应商建立高效的协同关系,是一种围绕采购业务的双赢管理模式。 但市面上SRM系统供应商层出不穷,很多企业在数字化转型中不知如何挑选合适自己企业的SRM系统,或是选错了系统,效率提升…

成功的项目管理工具拥有的五大功能

如果您决定投资一种新的项目管理工具,那么您需要确保购买的是最适合自己的。在为您的企业寻找最佳项目管理软件时,不要被所有的花里胡哨分心,因为某些东西看起来很漂亮并不意味着它有实质。不要错过对团队成功至关重要的关键功能,…

【论文精读7】MVSNet系列论文详解-PVA-MVSNet

PVA-MVSNet论文名为:Pyramid Multi-view Stereo Net with Self-adaptive View Aggregation,主要是用了一个自适应的聚合模块来在构建代价体时不用均匀的方差、而是让不同的特征体具有一定的选择注意力权重来对最终的代价体做贡献,同时对于多尺…

星起航跨境:跨境卖家可以这样获得好评,稳步提升销量

据调查数据显示,90%以上的消费者购物之前会先查看产品评论,好的评价能促进产品更快地转化,不好的评价还会对产品listing权重产生一定的影响。例如:在产品listing的评价较少的情况下,一个1星差评在listing展示超过3天之…

WebRTC实战-第一章-理论基础

目录webrtc-demo基础理论ICE server/信令server/webrtc server的区别和联系coturn安装coturn穿透和转发服务器安装依赖ubuntu系统centos系统编译安装coturn快速测试启动自定义配置启动自定义配置真实配置新建start.sh测试地址,分别测试stun 和 turn打开测试地址测试…

jsp汽车销售管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 jsp汽车销售管理系统 是一套完善的web设计系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发,数据库为Mysql,使用…

Spire.Doc 10.11.9 支持设置形状填充颜色的透明度

度娘找破解版Spire.Doc for .NET是一个专业的Word .NET库,专门为开发人员设计,用于在任何.NET 平台(Target .NET Framework、.NET Core、.NET Standard、 .NET 5.0、.NET 6.0、Xamarin 和 Mono Android),具有快速和高质…

纷享销客2022新增长系列之《高科技行业橙皮书》重磅发布

二十大报告进一步提出建设数字中国,加快发展数字经济。这意味着,对于各行业而言,充分运用数字化技术推动业务变革、效率变革、流程变革,是各行各业发展的必经之路。 高科技行业作为一个知识与技术密度性高的行业,具备技…

【pen200-lab】10.11.1.146

pen200-lab 学习笔记 【pen200-lab】10.11.1.146 🔥系列专栏:pen200-lab 🎉欢迎关注🔎点赞👍收藏⭐️留言📝 📆首发时间:🌴2022年11月27日🌴 🍭作…

day11-12【代码随想录】删除链表的倒数第N个节点、链表相交、字符串中第二大的数字

文章目录前言一、删除链表的倒数第N个节点(力扣19)二、链表相交(力扣160)三、字符串中第二大的数字(力扣1796)前言 1、删除链表的倒数第N个节点 2、链表相交 3、字符串中第二大的数字 一、删除链表的倒数…

苹果mac装双系统?关于Parallels Desktop你需要知道的相关知识

很多朋友用上了MacBook&#xff0c;但很多软件只能在Windows系统来使用&#xff0c;小白想要在MacBook上装Windows&#xff0c;需要花费大量的时间&#xff0c;所以在此&#xff0c;教大家在MacBook上安装虚拟机&#xff0c;来运行Windows系统。 <目录> 一、你是否适合…

【使用 BERT 的问答系统】第 4 章 :BERT 算法详解

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

岩藻多糖-聚乙二醇-转铁蛋白,Transferrin-PEG-Fucoidan,转铁蛋白-PEG-岩藻多糖

岩藻多糖-聚乙二醇-转铁蛋白,Transferrin-PEG-Fucoidan,转铁蛋白-PEG-岩藻多糖 中文名称&#xff1a;岩藻多糖-转铁蛋白 英文名称&#xff1a;Fucoidan-Transferrin 别称&#xff1a;转铁蛋白修饰岩藻多糖&#xff0c;Tf-岩藻多糖 溶解性&#xff1a;溶于大部分有机溶剂&am…

【微信小程序】如何上传uniApp开发的微信小程序?

uniApp微信小程序如何上传&#xff1f;首先确保已经安装了Hbuilder X 和微信开发者工具确保拥有配置了权限的账号&#xff0c;需要使用此账号的AppId首先联系管理员&#xff0c;让管理员给账号配置权限**[打开微信公众平台地址](https://mp.weixin.qq.com/)**在微信公众平台地址…

微信小程序-HTML标签和wxml比对

一、直接将HTML标签引入微信中 <rich-text nodes"<h3 stylecolor:green; text-align:center;> 通过nodes将HTML标签放到微信中</h3>"> </rich-text> 二、轮播图 <!-- indicator-dots 显示轮播图的小圆点 autoplay circular自动播放&…

C. Qpwoeirut And The City Codeforces Round #809 (Div. 2)

传送门 题意&#xff1a;有n栋楼&#xff0c;每栋楼的高度为&#xff0c;对美丽的楼的定义如下&#xff1a; 对于&#xff0c;如果并且,那么就说明这栋楼是美丽的。&#xff08;所以第一栋楼和最后一栋一定不是美丽的&#xff09; lk现在可以将所有的楼的高度增加任意值&…

量化研究丨波动与盈利关系研究系列(一)

ˇ 量化策略开发&#xff0c;高质量社群&#xff0c;交易思路分享等相关内容 今天我们讨论个议题&#xff0c;一是波动与盈利关系&#xff0c;文章非常长&#xff0c;涉及图片与文字结合内容阐述&#xff0c;会员朋友可以通过邮箱群发word文档进行清晰阅读。&#xff08;文章设…

外卖点餐自取连锁多店小程序开发

外卖点餐自取连锁多店小程序开发 功能// 外卖&自取&#xff1a;支持商家自送外卖和用户自取购买模式&#xff0c;暂不支持接入美团/饿了么。 会员签到&#xff1a;支持签到获取积分功能&#xff0c;积分可用于积分商城兑换商品或兑换优患券。 积分商城&#xff1a;后台添加…