uniapp、vue2.6、H5,利用腾讯TRTC,快速跑通1v1视频功能

多人视频聊天室搭建,官网已有相关demo和案例,需要快速搭建多人聊天室直接进入以下网站:

实时音视频 Web & H5 (Vue2/Vue3)-视频通话(含 UI)-文档中心-腾讯云说明:icon-default.png?t=N7T8https://cloud.tencent.com/document/product/647/78731#step1

以下仅介绍1v1视频聊天demo的搭建(仅前段也可以实现):

步骤一:  登录到 即时通信 IM 控制台,单击创建新应用,在弹出的对话框中输入您的应用名称,并单击确定

申请成功后会有以上列表。

步骤二:单击刚刚创建的应用,进入基本配置页面,并在页面的右下角找到含 UI 低代码场景方案标题,单击免费体验即可开通 TUICallKit 的 7 天免费试用服务

 步骤三:在同一页面找到 SDKAppID密钥(SecretKey)并记录下来,它们会在后续的步骤中被用到。

 

步骤四:下载相应依赖:

npm install @tencentcloud/call-uikit-vue2.6 @vue/composition-api 

 将 debug 目录复制到您的项目。

MacOSo端:

cp -r node_modules/@tencentcloud/call-uikit-vue2.6/debug ./src

Windows:

xcopy node_modules\@tencentcloud\call-uikit-vue2.6\debug .\src /i /e

步骤五:创建虚拟userId

 

步骤六:创建虚拟UserSig(用户签名,上线后由后端提供)

 登录 - 腾讯云腾讯云为数百万的企业和开发者提供安全、稳定的云服务器、云主机、CDN、对象存储、域名注册、云存储、云数据库等云服务,帮助用户解决游戏、视频、移动、微信、互联网+等行业的架构难题,是全球领先的云计算服务商。icon-default.png?t=N7T8https://console.cloud.tencent.com/trtc/usersigtool

 

 

步骤七:引入依赖,main.js中

import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

如下图:

 

 步骤八:创建index.vue页面,页面名字自行定义。内容如下:

<template>
	<div>
		<div v-if="time && time !== 10">剩余时间:{{ time }}</div>
		<div><span>userID:</span><input type="text" v-model="userID" /></div>
		<div style="margin-top: 6px;"><span>callUserID:</span><input type="text" v-model="callUserID" /></div>
		<button @click="init(userID)"> 用户1 </button>
		<button @click="init(callUserID)"> 用户2 </button>
		<button @click="call()"> 打电话 </button>
		<div style="height: 50vh; border: 1px solid salmon;">
			<TUICallKit :statusChanged="statusChanged" />
		</div>
	</div>
</template>
<script>
import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue2.6";

export default {
	name: 'App',
	data() {
		return {
			time: 10,
			// SDKAppID、userSig 的获取参考下面步骤
			userID: 'test-user1',     // 主叫的 userID   创建的用户1
			callUserID: 'test-user2', // 被叫的 userID   创建的用户1
			SDKAppID: 1600021236849,    // 替换成你对应的SDKAppID
			SecretKey: 'e5ca336b2888356fdd0b90311df4d7bc5364d403bf',  // 替换成对应的SecretKey
		};
	},
	components: {
		TUICallKit
	},
	methods: {
		async init(id) {
			console.log('init:', TUICallKitServer)
			try {
				// userSig 用拷贝过来的userSina替换
				const userSig = 'RYHsacc4jTKJsKvgxZHFwIAUOa1FP7tyTkAGkEszq6D*e3pm6hR4qL7Rs3RqZO7jQUF5Md97qsslJ2VvW6ThanNfv*AFaPMv4_'
				await TUICallKitServer.init({
					SDKAppID: Number(this.SDKAppID),
					userID: id,
					userSig,
					// tim: this.tim     // 如果工程中已有 tim 实例,需在此处传入
				});
				alert("[TUICallKit] Initialization succeeds.");
			} catch (error) {
				alert(`[TUICallKit] Initialization failed. Reason: ${error}`);
			}
		},
		async call() {
			try {
				// 1v1 video call
				await TUICallKitServer.call({ userID: this.callUserID, type: TUICallType.VIDEO_CALL });
			} catch (error) {
				alert(`[TUICallKit] Call failed. Reason: ${error}`);
			}
		},
		statusChanged(option) {
			console.log('option:', option)
			if (option.newStatus === 'calling-c2c-video') {
				let timer = window.setInterval(() => {
					if (this.time) {
						this.time--;
					} else {
						window.clearInterval(timer)
						console.log('TUICallEngine=========:', TUICallKitServer)
						TUICallKitServer.hangup();
					}
				}, 1000)
			}
		}
	},
}
</script>

最后打包上测试服测试(注意:测试只能在测试服测试,本地无法测试,注意用户1点击用户1按钮,用户2点击用户2按钮,最后就是用户1对用户2发起视频,测试就通了)

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python 深度学习第二版(GPT 重译)(三)

七、使用 Keras&#xff1a;深入探讨 本章涵盖 使用 Sequential 类、功能 API 和模型子类创建 Keras 模型 使用内置的 Keras 训练和评估循环 使用 Keras 回调函数自定义训练 使用 TensorBoard 监控训练和评估指标 从头开始编写训练和评估循环 您现在对 Keras 有了一些经…

uni-app 中两个系统各自显示不同的tabBar

最近在一个uni-app项目中遇到一个需求,在登录页面成功登录以后需要判断身份,不同的身份的进入不同的tabBar页面,但是在uni-app项目中pages.json中的tabBar的list数组只有一个&#xff0c;且不能写成动态的,那如何实现这个需求呢?答案是需要我们自定义tabBar。 目录 1、我们确…

四、HarmonyOS应用开发-ArkTS开发语言介绍

目录 1、TypeScript快速入门 1.1、编程语言介绍 1.2、基础类型 1.3、条件语句 1.4、函数 1.5、类 1.6、模块 1.7、迭代器 2、ArkTs 基础&#xff08;浅析ArkTS的起源和演进&#xff09; 2.1、引言 2.2、JS 2.3、TS 2.4、ArkTS 2.5、下一步演进 3、ArkTs 开发实践…

【C语言】循环语句(语句使用建议)

文章目录 **while循环****while循环的实践****补充:if语句与while语句区别****for循环(使用频率最高)****for循环的实践****while循环和for循环的对比****Do-while循环****break和continue语句****循环的嵌套****goto语句(不常用)****循环语句的效率(来自于高质量的C/C编程书籍…

竞赛 GRU的 电影评论情感分析 - python 深度学习 情感分类

1 前言 &#x1f525;学长分享优质竞赛项目&#xff0c;今天要分享的是 &#x1f6a9; GRU的 电影评论情感分析 - python 深度学习 情感分类 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 这…

Excel使用VLOOKUP函数

VLOOKUP(lookup_value,table_array,col_index_num,range_lookup) 释义&#xff1a; lookup_value&#xff1a;要查找的值&#xff0c;包括数字&#xff0c;文本等 table_array&#xff1a;要查找的值以及预期返回的内容所在的区域 col_index_num&#xff1a;查找的区域的列…

mysql配置

MySQL数据库的介绍 MySQL是一个关系型数据库管理系统&#xff0c;在 WEB 应用方面&#xff0c;MySQL是最好的 RDBMS (Relational Database Management System&#xff0c;关系数据库管理系统) 应用软件&#xff0c;它是由瑞典MySQL AB 公司开发&#xff0c;目前属于 Oracle 旗…

拿来就能用 | ESP AI音箱方案介绍

本案例使用ESP-BOX和OpenAI API开发一款语音控制的聊天机器人(chatbot)。 猜猜我是谁&#xff1f;ESP AI音箱方案体验 ESP-BOX AI音箱方案介绍 本案例将介绍如何使用ESP-BOX和OpenAI API开发一款语音控制的聊天机器人。该系统可以接收用户的语音指令&#xff0c;将其展示在屏幕…

敏捷开发最佳实践:学习与改进维度实践案例之会诊式培养敏捷教练

自组织团队能够定期反思并采取针对性行动来提升人效&#xff0c;但2022年的敏捷调研发现&#xff0c;70%的中国企业在学习和改进方面仍停留在团队级。本节实践案例将分享“会诊式培养敏捷教练”的具体做法&#xff0c;突出了敏捷以人为本的学习和改进&#xff0c;强调了通过人员…

阿里云轻量应用服务器和ECS服务器有啥区别?2024年整理对比表

阿里云服务器ECS和轻量应用服务器有什么区别&#xff1f;轻量和ECS优缺点对比&#xff0c;云服务器ECS是明星级云产品&#xff0c;适合企业专业级的使用场景&#xff0c;轻量应用服务器是在ECS的基础上推出的轻量级云服务器&#xff0c;适合个人开发者单机应用访问量不高的网站…

简介:使用TensorFlow实现python简版神经网络模型

如果你想进一步深入AI编程的魔法世界&#xff0c;那么TensorFlow和PyTorch这两个深度学习框架将是你的不二之选。它们可以帮助你构建更加复杂的神经网络模型&#xff0c;实现图像识别、语音识别等高级功能。 模型原理&#xff1a;神经网络是一种模拟人脑神经元结构的计算模型&a…

抖音视频批量下载软件可导出视频分享链接|手机网页视频提取|视频爬虫采集工具

解锁抖音视频无水印批量下载新姿势&#xff01; 在快节奏的生活中&#xff0c;抖音作为时下最热门的短视频平台之一&#xff0c;吸引着广大用户的目光。而如何高效地获取喜欢的视频内容成为了许多人关注的焦点。Q:290615413现在&#xff0c;我们推出的抖音视频批量下载软件&…

【概念】神马是分布式?

SueWakeup​​​​​ 个人主页&#xff1a;SueWakeup 系列专栏&#xff1a;学习Java框架 个性签名&#xff1a;保留赤子之心也许是种幸运吧 本文封面由 凯楠&#x1f4f7; 友情赞助播出&#xff01; 目录 前言 1. 系统架构的演变 2. SOA 与微服务的关系 3. 分布式核心知识…

元器件应用中的深力科推荐SZ1SMA5945BT3G 车规级齐纳二极管

SZ1SMA5945BT3G是一款1.5W齐纳二极管是为通用电压调节应用而设计的。 安森美深力科齐纳二极管专为稳压电路设计&#xff0c;提供广泛的工作电压和额定功率。 关于齐纳二极管基本知识&#xff1a; 齐纳二极管&#xff0c;又称稳压二极管。利用PN结的反向击穿状态&#xff0c;…

开发语言详解(python、java、Go(Golong)。。。。)

是语言决定行业&#xff0c;还是行业决定语言&#xff0c;说不清&#xff0c;只是觉得&#xff0c;当你做这一行的时候&#xff0c;如果你还有精力感兴趣的话&#xff0c;可以再做些了解&#xff0c;一下是自己个人见解以及官网做的整合。希望对大家有用。 目录 Python 概念&…

微软聘请了谷歌DeepMind的联合创始人

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

C#中右键通过listview来控制datagridview字段值的是否显示、显示顺序,并存储到XML中。

最终显示效果&#xff0c;如下图所示&#xff1a; datagridview开始显示通过调用XML存储的字段值及顺序来显示&#xff0c;右键调出Tools来控制显示的顺序及是否显示&#xff0c;通过加号和减号进行调整顺序。 XML存储字段值及顺序 主要代码及事件&#xff1a; 获取datagridv…

前后端分离项目springsecurity实现用户登录认证快速使用

目录 1、引入依赖 2、创建类继承WebSecurityConfigurerAdapter &#xff08;1&#xff09;重写里面的configure(HttpSecurity http)方法 &#xff08;2&#xff09;重写AuthenticationManager authenticationManagerBean() &#xff08;3&#xff09;密码加密工具 3、继承…

支付宝手机网站支付,微信扫描二维码支付

支付宝手机网站支付 支付宝文档 响应示例 <form name"punchout_form" method"post" action"https://openapi.alipay.com/gateway.do?charsetUTF-8&methodalipay.trade.wap.pay&formatjson&signERITJKEIJKJHKKKKKKKHJEREEEEEEEEEEE…

【用法总结】Systrace使用基础

【用法总结】Systrace使用基础 一、systrace基本介绍被弃用了?二、快捷键用法二、systrace命令用法2.1 命令格式:2.2 option取值:2.3 category取值:2.4 命令用法举例:2.5 快捷键用法:三、systrace报告怎么看?3.1 CPU调度信息3.2 线程状态信息3.2.1 绿色 : 运行中(Runni…