腾讯云TRTC服务实现Web视频会议

腾讯云TRTC服务实现Web视频会议

背景

近期公司承接了某高校智慧校园的项目建设工作,其中在家校协作的板块中需要进行视频教学,以及线上屏幕共享,为了完成这一需求,我在自研与第三方服务的选择之间选择了第三方,主要因为目前团队成员在音视频方向的深度不足以支撑完成整个高可用模块,而且现在受疫情影响,对于高校来说,直播教学板块尤为重要。

常用的第三方音视频服务:

  • 又拍云
  • 七牛云
  • 阿里云
  • 腾讯云

在几番选择后,我采用了腾讯云作为我们音视频板块的服务支撑组件,主要是因为我们很多服务都与腾讯云有对接,在一起方便于管理,而且操作起来比较方便,并且也是业内知名大厂。

腾讯云TRTC服务的入门

TRTC 是腾讯云主打全平台互通的多人音视频通话和低延时互动直播解决方案。TRTC服务有多种客户端的支持,对于IOS、Android、React native等都支持的比较好,我们主要在于 IOS、Android、Web三端进行处理,其中 TRTC Web SDK 基于 WebRTC 实现,基于腾讯云成熟的音视频积累,保证了视频流的低延时 高效传输等。

创建TRTC服务

首先,在腾讯云搜索 TRTC,https://cloud.tencent.com/search/%E5%AE%9E%E6%97%B6%E9%9F%B3%E8%A7%86%E9%A2%91/1_1
然后点击立即使用:

搜索TRTC

然后到登录账户到达 TRTC 控制台,我首先需要建立一个 Demo 进行接入测试,这里我们就建立一个 aopppTRTC_Demo

trtc-demo
实际上大家第一次使用他会有引导的,大家可以放心,这里我们要查看一下这个应用的配置,主要就是为了获得 SDKAppID 和 密钥

在这里插入图片描述
获取密钥和sdkid

这样,我们就在腾讯云上建立好了 TRTC 应用了,接下来我们根据开始实现我们的直播教学业务。

业务场景描述

我们先简单利用TRTC实现一下老师在教师端进行直播教学,这个需要能够共享老师屏幕,摄像头以及麦克风,老师登录教师端后在今天的课表上选择开始上课,然后启用屏幕、摄像头、麦克风共享即可

搭建项目

我们这里还是采用 Vue + Vite + Element-plus 进行 Web 页面设计,我最终的 demo 地址为 https://gitee.com/TestsLing/aoppp-trtc_-demo.git ,欢迎大家一起讨论交流

首先就是老师登录教师端后,去创建课程的直播间,这里我们需要构建一个开启课程直播的页面

在这里插入图片描述

我们只需要输入课程名称,然后点击开启教学直播,就会把课程名称发送给服务端,然后服务端帮我们初始化好房间,并返回对应的房间ID,相关代码如下:

<script lang="ts" setup>
import {onMounted, ref, reactive} from "vue";
import {useRoute, useRouter} from "vue-router";
import {FormInstance} from "element-plus";const rules = reactive({lesson: [{required: true, message: "请输入课程名称", trigger: "blur"}],
});
const form = reactive({lesson: "",
});
const router = useRouter();
const ruleFormRef = ref<FormInstance>();async function handleCreateRoom() {await ruleFormRef.value?.validate((valid, fields) => {fetch('http://localhost:3888/creatRoom', {method: 'post',headers: {'Accept': 'application/json,text/plain,*/*',/* 格式限制:json、文本、其他格式 */'Content-Type': 'application/json'/* 请求内容类型 */},body: JSON.stringify({lesson: form.lesson})}).then((response) => {return response.json()}).then((data) => {let {roomId, code} = dataif (code == 200 && valid) {router.push({path: "page", query: {...form, roomId}})}}).catch(function (error) {// 可以进行异常上报console.log(error)})});
}

开启视频教学之后,我们就需要一个直播间,这个时候我们就需要使用到集成的 trtc-js-sdk,大致思路是这样,我们先通过trtc创建一个客户端,然后我们要对视频流进行处理

  1. 我们要让别人看到我们的视频内容,首先我们要先进行推流,把视频流推到公网上去
  2. 其他客户端要看到我们的视频内容,只需要加入直播间,然后通过拉流操作即可

大致页面和代码如下:
在这里插入图片描述

我们先通过共享屏幕进行流测试
在这里插入图片描述

然后流就会回显到我们的主内容区域

在这里插入图片描述

在代码中的实现:

要注意一下这个 userSig,签名的作用就是为了防篡改,需要确定你是使用方身份,我们需要使用 secretKey、sdkAppId、userId 来创造这个签名,secretKey是私密信息,不能放到客户端进行硬编码,应该由服务端处理完后将签名返回给客户端,但是官方也提供了前端加密的方法, 供我们调试使用,所以我们现在直接使用官方提供的demo中的加密方法来获取 UserSig。

  • generateTestUserSig

/* eslint-disable *//** Module:   GenerateTestUserSig** Function: 用于生成测试用的 UserSig,UserSig 是腾讯云为其云服务设计的一种安全保护签名。*           其计算方法是对 SDKAppID、UserID 和 EXPIRETIME 进行加密,加密算法为 HMAC-SHA256。** Attention: 请不要将如下代码发布到您的线上正式版本的 App 中,原因如下:**            本文件中的代码虽然能够正确计算出 UserSig,但仅适合快速调通 SDK 的基本功能,不适合线上产品,*            这是因为客户端代码中的 SECRETKEY 很容易被反编译逆向破解,尤其是 Web 端的代码被破解的难度几乎为零。*            一旦您的密钥泄露,攻击者就可以计算出正确的 UserSig 来盗用您的腾讯云流量。**            正确的做法是将 UserSig 的计算代码和加密密钥放在您的业务服务器上,然后由 App 按需向您的服务器获取实时算出的 UserSig。*            由于破解服务器的成本要高于破解客户端 App,所以服务器计算的方案能够更好地保护您的加密密钥。** Reference:https://cloud.tencent.com/document/product/647/17275#Server*/
interface Login {sdkAppId: number;userId: string;secretKey: string;
}interface UserSig {userSig: string;sdkAppId: number;
}export function genTestUserSig({sdkAppId,userId,secretKey,
}: Login): UserSig {/*** 腾讯云 SDKAppId,需要替换为您自己账号下的 SDKAppId。** 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav ) 创建应用,即可看到 SDKAppId,* 它是腾讯云用于区分客户的唯一标识。*/const SDKAPPID = sdkAppId;/*** 签名过期时间,建议不要设置的过短* <p>* 时间单位:秒* 默认时间:7 x 24 x 60 x 60 = 604800 = 7 天*/const EXPIRETIME = 604800;/*** 计算签名用的加密密钥,获取步骤如下:** step1. 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav ),如果还没有应用就创建一个,* step2. 单击“应用配置”进入基础配置页面,并进一步找到“帐号体系集成”部分。* step3. 点击“查看密钥”按钮,就可以看到计算 UserSig 使用的加密的密钥了,请将其拷贝并复制到如下的变量中** 注意:该方案仅适用于调试Demo,正式上线前请将 UserSig 计算代码和密钥迁移到您的后台服务器上,以避免加密密钥泄露导致的流量盗用。* 文档:https://cloud.tencent.com/document/product/647/17275#Server*/const SECRETKEY = secretKey;// a soft reminder to guide developer to configure sdkAppId/secretKeyif (SDKAPPID == undefined || SECRETKEY === "") {alert("请先配置好您的账号信息: SDKAPPID 及 SECRETKEY " +"\r\n\r\nPlease configure your SDKAPPID/SECRETKEY in js/debug/GenerateTestUserSig.js");}const generator = new (<any>window).LibGenerateTestUserSig(SDKAPPID,SECRETKEY,EXPIRETIME);const userSig = generator.genTestUserSig(userId);return {sdkAppId: SDKAPPID,userSig: userSig,};
}

userSig
官方的详细的介绍: https://cloud.tencent.com/document/product/647/17275


const router = useRouter();
const route = useRoute();
const appConf = reactive({userId: "",roomId: 0,sdkAppId: 0,userSig: "",
});// 一般是服务端返回的,这里为了测试方便,先写死
const getUserId = () => "123"// 在生命周期中进行初始化一下
onMounted(async () => {appConf.userId = getUserId();appConf.roomId = parseInt(route.query.roomId as string, 10);const { sdkAppId, userSig } = await getSign(appConf.userId);appConf.sdkAppId = sdkAppId;appConf.userSig = userSig;handlerJoin();
});
// 加入房间
const handlerJoin = async () => {const { userId, userSig, roomId, sdkAppId } = appConf;console.log({ userId, userSig, roomId, sdkAppId });try {// 创建客户端localClient = TRTC.createClient({mode: "rtc", // 采用rtc方式sdkAppId,userId,userSig,});//await localClient.join({ roomId });} catch (e: any) {console.log("加入房间失败", e);}// 对相关视频事件进行监听installEventHandlers();// 创建流await createStream();// 推送流await publishHandler();
};const installEventHandlers = () => {if (!localClient) return;localClient.on("error", nothingHandle);localClient.on("client-banned", nothingHandle);localClient.on("peer-join", nothingHandle);localClient.on("peer-leave", nothingHandle);localClient.on("stream-added", handleStreamAdded);localClient.on("stream-subscribed", handleStreamSubscribed);localClient.on("stream-removed", handleStreamRemoved);localClient.on("stream-updated", nothingHandle);localClient.on("mute-video", nothingHandle);localClient.on("mute-audio", nothingHandle);localClient.on("unmute-video", nothingHandle);localClient.on("unmute-audio", nothingHandle);
};/*** 流处理*/
const createStream = async () => {try {if (streamMode.value === "screenStream") localStream = await creatScreenStream();if (streamMode.value === "cameraStream") localStream = await createCameraStream();// 主屏幕显示流await localStream.play("stream_main");} catch (e: any) {throw new Error(e);}
};
// 摄像头流
const createCameraStream = async () => {const { userId, userSig, roomId, sdkAppId } = appConf;let localStream;try {// const cameraItems = await TRTC.getCameras();// const microphoneItems = await TRTC.getMicrophones();// console.log(cameraItems, "cameraItems");localStream = TRTC.createStream({userId: userId,audio: true,video: true,// cameraId: cameraItems[0].deviceId,// microphoneId: microphoneItems[0].deviceId,});await localStream.initialize();} catch (e: any) {throw new Error(e);}return localStream;
};
// 屏幕流
const creatScreenStream = async () => {const { userId, userSig, roomId, sdkAppId } = appConf;let localStream;try {localStream = TRTC.createStream({audio: false,screen: true,userId,});await localStream.initialize();} catch (e: any) {throw new Error(e);}return localStream;
};
// 推流
const publishHandler = async () => {if (!localClient || !localStream) return;try {await localClient.publish(localStream);console.log("推流成功");} catch (e: any) {console.log("推流失败", e);}
};
// 取消推流
const unpublishHandler = async () => {if (!localClient || !localStream) return;try {await localClient.unpublish(localStream);} catch (e: any) {throw new Error(e);}
};// ....更多请看 gitee demo

相关问题

如果推流失败,需要先检查当前环境,文档也有说明: https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/tutorial-23-advanced-support-detection.htm

相关链接

  • https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/TRTC.html#createClient trtc-api文档

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

腾讯云HiFlow场景连接器

文章目录 &#xff08;一&#xff09;腾讯云HiFlow场景连接器是什么&#xff1f;&#xff08;二&#xff09;腾讯云HiFlow场景连接器对于我的工作/生活能有什么好处呢&#xff1f;添加企业微信机器人 &#xff08;一&#xff09;腾讯云HiFlow场景连接器是什么&#xff1f; 腾讯…

监控、无人机摄像头RTSP协议对接腾讯云直播

监控、无人机摄像头RTSP协议对接腾讯云直播 1. 需求与目标 传统监控高清摄像机ip camera&#xff08;如: 海康,大华等&#xff09;遵循监控行业标准&#xff0c;一般只支持rtsp传输协议&#xff0c;互联网直播通用标准为rtmp协议&#xff0c;将这些摄像机视频流引入互联网直播…

【虚拟人快讯】超写实虚拟人青鸟发布,脑白金推出数字人形象

1、3月17日&#xff0c;作为广西文化符号的“刘三姐”穿越时空&#xff0c;以国内首个省级超写实文旅数字推广大使的身份在全网公开亮相&#xff0c;广西壮族自治区文化和旅游厅厅长欧余军在“元宇宙世界”&#xff0c;宣布授予“刘三姐数字人”“广西文化旅游数字推广大使”称…

Gmail邮箱怎么获取授权码?熟悉一下

打开谷歌邮箱https://mail.google.com/mail/u/0/#settings/fwdandpophttps://mail.google.com/mail/u/0/#settings/fwdandpop 进入“转发和 POP/IMAP”&#xff0c;启用 IMAP。 点击“右上角Logo” > “管理您的google账号” 在回到“管理您的google账号” 设置应用专用密码…

【reCAPTCHA 】添加Google验证码

在网站登陆注册时常常需要用到验证码&#xff0c;来防止站点被攻击。 大概这个样子&#xff1a; 现在框架是前后端分离的&#xff0c;angularwebapi弄个验证码感觉有点麻烦 然后就找到google的reCAPTCHA 还挺好使的&#xff0c;记录一下&#xff1a; 地址&#xff1a;https:…

Google验证码ReCaptcha V3

因为工作的原因需要使用Google验证码ReCaptcha v3&#xff0c;所以我就上网了解了一下&#xff0c;下面是我的一些学习分享。 大家应该都是用过google的验证码&#xff0c;如 这种情况的需要我们手动去选择&#xff0c;ReCaptcha V3则不需要了&#xff0c;不需要用户去手动的验…

使用Google reCAPTCHA进行人机验证

reCAPTCHA是Google公司推出的一项验证服务&#xff0c;使用十分方便快捷&#xff0c;在国外许多网站上均有使用。它与许多其他的人机验证方式不同&#xff0c;它极少需要用户进行各种识图验证。 它的使用方式如下如所示&#xff0c;只需勾选复选框即可通过人机验证。 虽然简单…

解决Google人机验证reCaptcha失效问题

安装Redirector插件 Firefox浏览器1. 下载Firefox浏览器&#xff0c;并安装插件2. 打开Redirector插件的界面3. 弹出如下界面4. 按照如下形式填写 Chrome浏览器 Firefox浏览器 1. 下载Firefox浏览器&#xff0c;并安装插件 2. 打开Redirector插件的界面 3. 弹出如下界面 4. 按…

.NET 使用 Google 验证码(Google reCAPTCHA)

一. 前言 前段时间&#xff0c;发现注册受到了恶意攻击&#xff0c;一天注册量10w&#xff0c;接口已从IP做了限制&#xff0c;但不管用&#xff0c;对方每一次发起的IP都不一样&#xff1b;紧急做了滑动验证码&#xff0c;虽然上线立马就阻止了恶意请求&#xff1b; 但好景不…

GOOGLE 人机验证(RECAPTCHA)无法显示解决方案(转)

前言: 为了防止机器人攻击&#xff0c;国外很多网站都使用了 Google reCaptcha 验证码。reCaptcha 对于国外用户非常的友好&#xff0c;但是…对于国内用户就不怎么友好了。究其原因&#xff0c;则是国内网络全线屏蔽 Google 服务&#xff0c;导致 reCaptcha 完全加载不出来。这…

注册Maltego显示ReCaptcha is not valid,解决Google验证码服务reCaptcha失效问题

注册Maltego显示ReCaptcha is not valid&#xff0c;解决Google验证码服务reCaptcha失效问题 Maltego注册地址&#xff1a; https://www.paterva.com/web7/community/community.php 1.打开火狐浏览器&#xff0c;点击右上角-打开菜单-添加附件-寻找更多附加组件&#xff0c;查询…

巴比特 | 元宇宙每日必读:奋起直追,谷歌内部发布“红色指令”,要求几个月内将生成式人工智能技术集成到所有主要产品中...

摘要&#xff1a;据新浪科技报道&#xff0c;OpenAI的突然成功让谷歌母公司Alphabet不得不加快速度&#xff0c;试图在这个领域迎头赶上。一名知情人士透露&#xff0c;谷歌高级管理层已经宣布“红色指令”&#xff0c;其中要求谷歌的所有重要产品&#xff0c;包括用户数超过10…

和数集团助力开启区块链应用新时代

今年&#xff0c;中共中央、国务院等国家层面发布政策6条&#xff0c;不仅在全国统一大市场的广泛性政策中提及&#xff0c;并同时涵盖了区块链在数字文化、提振消费、交通运输以及促稳经济等多个层面的应用。可以看出&#xff0c;我国区块链产业呈现蓬勃发展之势。政策、技术、…

能链科技携手中智关爱通共建基于区块链的新人力服务网络

原文发布于 2020-06-19 原“能链科技”现更名为“零数科技” 6月16日上午&#xff0c;零数科技&#xff08;原“能链科技”&#xff09;与中智关爱通&#xff08;上海&#xff09;科技股份有限公司&#xff08;以下简称关爱通&#xff09;签署战略合作协议。双方将结合能链科技…

云图说丨华为云区块链引擎服务:高安全的区块链技术服务平台,轻松部署,快速上链

摘要&#xff1a;华为云区块链引擎服务以BCS自主研发区块链内核为底座&#xff0c;结合可信硬件&#xff0c;具有高安全、高性能、高可扩展、强隐私保护等特点&#xff0c;满足企业级和金融级的可信和协同要求。 本文分享自华为云社区《【云图说】 第251期 华为云区块链引擎服务…

基于区块链技术的智慧供应链创新应用

随着区块链技术的不断成熟&#xff0c;智慧供应链得到了长足的发展&#xff0c;通过基于华为云的几个智慧供应链和物流行业的应用创新项目&#xff0c;诠释在实际应用场景中如何通过区块链和物流面临的调整和困难&#xff0c;达到优化流程、提高效率、降低成本的效果。 随着区…

量化策略初探——使用tushare进行沪深300ETF双均线策略

使用tushare采集沪深300ETF数据&#xff0c;并对沪深300ETF采用简单移动平均、指数移动平均、进行双均线策略&#xff0c;最后使用backtrader进行回测。 一、基本概念 双均线策略&#xff1a;运用两条不同周期的移动平均线&#xff0c;即短周期移动平均线和长周期移动平均线的…

【python量化】广发证券研报:Transformer 架构下的量价选股策略

以下内容来自知乎链接&#xff1a; https://zhuanlan.zhihu.com/p/620820228 作者&#xff1a;日暮途远 已获得作者同意转载。 最近看到了一篇广发证券的关于使用Transformer进行量化选股的研报&#xff0c;在此进行一个复现记录&#xff0c;有兴趣的读者可以进行更深入的研究…

MT5 EA交易期货-市价单开仓平仓

该例子演示了EA如何报期货市价单开仓&#xff0c;开仓后10秒钟报市价单平仓。 在外汇交易里没有市价单&#xff0c;而期货交易有市价单&#xff0c; 市价单报单时不指定价格&#xff0c;让交易所自行成交&#xff0c;就是做多无论多贵都买&#xff0c;做空无论多便宜都卖&…

ETF大小盘轮动策略回测分析

从前面的ETF基金定投策略回测和周内效应分析文章中可以看到&#xff0c;代表大盘指数的沪深300ETF基金510300和代表小盘的创业板ETF基金159915的收益在长期来看差别较大。但是单独定投小盘指数收益高&#xff0c;但是回撤比较大&#xff1b;单独定投大盘指数回撤也不小&#xf…