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

已于 2024-05-07 18:13:06 修改
阅读量1.2k 收藏 13
点赞数 20
分类专栏： uni-app JavaScript vue 文章标签： uni-app 音视频 vue.js javascript 前端
于 2024-03-20 17:01:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38909255/article/details/136880125
版权
本文介绍了如何使用uni-app、vue2.6和H5结合腾讯TRTC服务，快速搭建1v1视频聊天功能。通过在即时通信IM控制台创建应用，获取SDKAppID和SecretKey，集成TRTC SDK，设置虚拟userId和UserSig，最后在uni-app项目中创建页面并打包测试，实现前端端到端的视频通话。
摘要由CSDN通过智能技术生成

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

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

以下仅介绍1v1视频聊天demo的搭建（仅前段也可以实现）：

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

f2e7d37947b846ce89b6a492454f50d7.png

8c6fa47f91504441b3a2f41d046687e5.png

c6e031d3f3234a0d92cfb0130f461fce.png

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

步骤二：单击刚刚创建的应用&#

最低0.47元/天 解锁文章
天府之绝
关注
专栏目录
vue集成TRTC实现多人音视频聊天
06-16
这是vue集成trtc实现多人实时音视频的一个demo,包含退出房间功能。后面还将继续发布，利用websoket，实现邀请用户加入房间的功能，用户可以接受或者拒绝。在后面还有vue集成实时音视频、即时通讯、白板涂鸦功能的demo,可以实现多人视频聊天、发送消息，白板涂鸦实时同步。后面会一一上传
WXMiniByUniapp-TRTC:腾讯云小程序音视频通讯Uniapp版
05-01
快速跑通Demo 本文主要介绍如何快速跑通微信小程序版本的 TRTC DEMO，您可以从 上的 WXMini 目录下获取相关代码。DEMO 中前三个功能项演示了三个不同的应用场景： 语音聊天室：纯语音交互，支持多人互动语音聊天，以及混音、混响等声音特效功能。适合在线狼人杀、在线语音直播等社交类场景。 双人通话：1v1 视频通话，配合 可以实现在线问诊，在线客服等需要面对面交流的沟通场景。 多人会议：支持多路视频通话、大小画面和屏幕分享等围绕视频会议相关的高级功能，适用于远程培训、在线教育等场景。 环境要求 微信 App iOS 最低版本要求：7.0.9 微信 App Android 最低版本要求：7.0.8 小程序基础库最低版本要求：2.10.0 由于微信开发者工具不支持原生组件（即 <live> 和 <live> 标签），需要在真机上进行运行体验。 操作步
Android：Uniapp平台中接入即构RTC+相芯美颜
最新发布
RTC_SDK_220704的博客
08-05 1044
前阵子使用Uniapp平台开发了一个跨平台app，并且接入了后，今天想进一步丰富**在DCloud插件市场找到了在即构RTC接入相芯美颜插件，, 按照里面的readme教程完成接入，**为了让后来者少走弯路，将接入过程以及原理记录到本文中，欢迎大家评论讨论。
关于uniapp接入腾讯云trtc遇到的问题
qq_50879136的博客
09-13 781
2、使用插件uni-app TRTC SDK 是腾讯云实时音视频通讯解决方案在 uni-app 上的 SDK，提供实时音视频服务在manifest（源码试图）里面的name得改成TRTCCloudUniPlugin-TRTCCloudImpl。4、trtc-remote-view组件不出现视频可能是:userId="remoteUserId"中的remoteUserId为空，可添加 v-if="remoteUserId"渲染试图。1、trtc的sdk包后缀名得改成zip才出现。
uniapp 小程序接入腾讯实时音视频trtc-wx
m0_46693606的博客
03-14 2224
微信 App iOS 最低版本要求：7.0.9微信 App Android 最低版本要求：7.0.8小程序基础库最低版本要求：2.10.0由于小程序测试号不具备 和 的使用权限，请使用企业小程序账号申请相关权限进行开发。由于微信开发者工具不支持原生组件（即 和 标签），需要在真机上进行运行体验。
web端腾讯云之TRTC SDK，H5嵌入trtc,小程序嵌入H5-trtc 在本地泡通的教程这一篇足够
qq_36808770的博客
04-22 442
T —— Tencent 腾讯R-T —— Real-Time 实时的C —— Communication 传播 / 交流 / 通信实时音视频（TRTC）是腾讯云提供的一套低延时、高质量的音视频通讯服务，致力于为腾讯云客户提供稳定、可靠和低成本的音视频传输能力。该服务由一套遍布全球的音视频传输网络和一组终端SDK 组成，您可以在本页面下载到涵盖目前主流客户端平台和热门框架的 实时音视频（TRTC） SDK。引用自官网。
vue集成腾讯实时音视频TRTC
09-01
vue集成腾讯实时音视频TRTC 用Vue+Element搭建的腾讯实时音视频通话 仅限桌面浏览器，暂未搭建其他应用 使用前请先npm install安装依赖包 然后npm run serve既可看到效果
H5基于腾讯实时音视频 trtc-js-sdk web直播
06-07
H5基于腾讯实时音视频 trtc-js-sdk web直播，TRTC Web SDK地址：https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/index.html
uniapp+vue完美实现仿微信IM，使用了腾讯云IM TXIM 腾讯云实时音视频 TRTC
12-04
开源Vue版本源码，对于要求高的开发者我们也开发了NVUE版本，实现了文本消息、图文消息、表情(gif动画)，图片预览，图片编辑，视频预览，视频编辑，仿微信朋友圈的图片选择、编辑、长按菜单等功能 这个资源配置需要...
uniapp H5集成微信JS支付
03-26
uni-app框架下，开发H5，集成微信JS API支付，安装指定的，jweixin-module之后调用方法关键代码，搞了一星期，终于都搞明白，很简单，一看就懂了。
uni-app使用的演示
10-27
文章中用到的例子都有写在这，需要的朋友可以下载下来，解压后拖到HBuilder X里面运行。该资源里面包含了foreach循环的演示，以及如何实现登录动画、如何进行下拉刷新、如何进行触底加载，还有如何进行跳转与接收数据，以及底部导航栏运用colorui的框架技术。
腾讯云trtc-h5 插件包
08-12
全平台优化 提升弱网环境下的流畅度。 修复直播(TXLivePlayer)延时可能会升高且不恢复的 bug。 优化音量大小的回调算法，音量回调数值更加合理。 发送自定义音频、视频数据支持外部指定数据帧时间戳。 增加混流 setMixTranscodingConfig API 的设置回调函数。 强化 setMixTranscodingConfig 接口，支持 roomID 参数，用于跨房连麦流混流。 强化 setMixTranscodingConfig 接口，支持 pureAudio 参数，用于纯语音通话场景下的语音混流和录制。 Android 增加商用企业版支持（增加大眼、瘦脸、V 脸 和 动效挂架功能）。 修复声音免提切换无效 bug。 优化低端 Android 设备上解码 720p 视频的性能问题。 修复 Android 禁用麦克风权限后，没有错误回调 bug。 增加本地显示镜像和编码器输出镜像接口。 修复直播场景 setVideoEncoderRotation 无效的 bug。 修复音量调节按钮无法调整观众端声音大小的问题。 修复 Android 9.0 系统上 Demo 打
腾讯云trtc多人音频视频对接源码
12-01
腾讯云trtc多人音频视频对接源码 vue开发 java生成签名返回前端vue通过ajax获取 只有两个方法：进房、退房操作，代码一看就懂，快速体验测试上手 ----------------------------------------------------- ----------------------------------------------------- ----------------------------------------------------- ----------------------------------------------------- ----------------------------------------------------- ----------------------------------------------------- -----------------------------------------------------
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
01-21
引言 在与实现了语音合成、语义分析、机器翻译等算法的后端交互时，页面可以设计成更为人性化、亲切的方式。我们采用类似于聊天对话的实现，效果如下： 智能客服（输入文本，返回引擎处理后的文本结果） 语音合成（输入文本，返回文本以及合成的音频） 如上图所示，返回文本后，再返回合成出的音频。 音频按钮嵌在对话气泡中，可以点击播放。 语音识别（在页面录制语音发送，页面实时展示识别出的文本结果） 实现功能及技术要点 1、基于WebSocket实现对话流 页面与后端的交互是实时互动的，所以采用WebSocket协议，而不是HTTP请求，这样后端推送回的消息可以实时显示在页面上。 WebSo
用Vue+Element简单搭建的腾讯实时音视频通话(仅限桌面浏览器).rar
06-12
用Vue+Element搭建的腾讯实时音视频通话 仅限桌面浏览器，暂未搭建其他应用 使用前请先npm install安装依赖包 然后npm run serve既可看到效果 腾讯云 SDKAPPID和SECRETKEY，需要替换为您自己账号下的 SDKAppId。 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav ) 创建应用，即可看到对应信息， 它是腾讯云用于区分客户的唯一标识。
Web端实现视频通话
pengxiang1998的博客
01-30 5767
博主在完成自己的毕业设计时，需要完成一个音视频通话功能，于是采用了腾讯云的视频接口，将其实现出来，，以下是项目截图: 以下是主要代码： <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> &lt...
uniapp小程序接入trtc-wx,监听网络状态，监听live-player/liver-pusher状态
weixin_45274678的博客
03-19 716
uniapp小程序接入trtc-wx。
pigxCloud微服务项目03——服务端——腾讯云即时通信IM，创建聊天群
qq_28680277的博客
01-07 1585
腾讯云即时通信IM，创建聊天群，返回群ID给客户端使用导入单个帐号创建群组（群组类型：临时会议群 (Meeting)）导入群成员 导入单个帐号 参考官方资料：导入单个帐号 创建群组（群组类型：临时会议群 (Meeting)） 导入群成员 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天府之绝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值