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

VIP文章 已于 2024-05-07 18:13:06 修改
阅读量1k 收藏 11
点赞数 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
版权

多人视频聊天室搭建，官网已有相关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元/天 解锁文章
天府之绝
关注
  • 20
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
VUE接入腾讯实时音视频TRTC方法
qq_36229632的博客
12-13 4628
VUE接入腾讯实时音视频TRTC方法
Vue 接入腾讯云【实时音视频】TRTC
BrodZhu的博客
06-22 5499
需求 (Web端和小程序端进行视频通话) 1. web 端 开启一个房间，房间号假设为 888。此时，画面可以看到自己端的画面。 2. 小程序 端，输入相同的房间号 888，进入房间，即可和 web 端进行视频通话。 准备工作 1. 打开腾讯云官方文档 腾讯云-实时音视频 2. web 端 参照webDemo将项目下载下来。小程序参照小程序端将项目下载下来。 集成 1. 项目根目录打开命令行，执行 npm install trtc-js-sdk 2. 局部引入组...
uniapp：记录使用uniapp对接腾讯音视频插件（TUICallKit ）
sunluyi的博客
03-07 3699
记录使用uniapp对接腾讯音视频插件（TUICallKit ）过程分享。
TUICallKit小程序全局监听实践
BingShuShu的专栏
11-26 2955
小程序TUICallKit全局监听实践
关于uniapp接入腾讯云trtc遇到的问题
qq_50879136的博客
09-13 515
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 1960
微信 App iOS 最低版本要求：7.0.9微信 App Android 最低版本要求：7.0.8小程序基础库最低版本要求：2.10.0由于小程序测试号不具备 和 的使用权限，请使用企业小程序账号申请相关权限进行开发。由于微信开发者工具不支持原生组件（即 和 标签），需要在真机上进行运行体验。
pigxCloud微服务项目03——服务端——腾讯云即时通信IM，创建聊天群
qq_28680277的博客
01-07 1444
腾讯云即时通信IM，创建聊天群，返回群ID给客户端使用导入单个帐号创建群组（群组类型：临时会议群 (Meeting)）导入群成员 导入单个帐号 参考官方资料：导入单个帐号 创建群组（群组类型：临时会议群 (Meeting)） 导入群成员 ...
uniapp小程序接入trtc-wx,监听网络状态，监听live-player/liver-pusher状态
最新发布
weixin_45274678的博客
03-19 530
uniapp小程序接入trtc-wx。
【多人会议功能】uniapp - 微信小程序 - 腾讯云
qq_39891453的博客
10-20 3152
uniapp微信小程序通过腾讯云实现多人会议功能。
vue集成腾讯实时音视频TRTC
09-01
vue集成腾讯实时音视频TRTC 用Vue+Element搭建的腾讯实时音视频通话 仅限桌面浏览器，暂未搭建其他应用 使用前请先npm install安装依赖包 然后npm run serve既可看到效果
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> 标签），需要在真机上进行运行体验。 操作步
uni-app使用的演示
10-27
文章中用到的例子都有写在这，需要的朋友可以下载下来，解压后拖到HBuilder X里面运行。该资源里面包含了foreach循环的演示，以及如何实现登录动画、如何进行下拉刷新、如何进行触底加载，还有如何进行跳转与接收数据，以及底部导航栏运用colorui的框架技术。
TRTCSDK,《trtc-sdk，iOS、Android、Windows、Mac、Android、Windows、Mac等方面的trtc、trtc-sdk、iOS、Android、Windows、Mac等。方.zip
10-11
sdk下载TRTCSDK,《trtc-sdk，iOS、Android、Windows、Mac、Android、Windows、Mac等方面的trtc、trtc-sdk、iOS、Android、Windows、Mac等。方.zip
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
vue集成TRTC实现多人音视频聊天
06-16
这是vue集成trtc实现多人实时音视频的一个demo,包含退出房间功能。后面还将继续发布，利用websoket，实现邀请用户加入房间的功能，用户可以接受或者拒绝。在后面还有vue集成实时音视频、即时通讯、白板涂鸦功能的...
uniapp+vue完美实现仿微信IM，使用了腾讯云IM TXIM 腾讯云实时音视频 TRTC
12-04
开源Vue版本源码，对于要求高的开发者我们也开发了NVUE版本，实现了文本消息、图文消息、表情(gif动画)，图片预览，图片编辑，视频预览，视频编辑，仿微信朋友圈的图片选择、编辑、长按菜单等功能 这个资源配置需要...
uniapp的移动端h5的横屏电子签名
06-01
自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行手写签名）由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5...
【手把手教程】基于uniapp+vue+腾讯IM+腾讯音视频开发的仿微信界面IM实例项目-半天时间让您拥有自己的IM源码(代码已开源到gitee)
11-22 4219
基于uni-app+vue+腾讯IM+腾讯音视频开发的仿微信界面IM实例项目 1: 用户登陆 2: 聊天会话管理 3: 文本/图片/视频/定位消息收发 4: 贴图表情消息收发 5: 一对一语音视频在线通话
uniapp h5使用腾讯地图
11-08
Uniapp是一个基于Vue开发的，同时支持多平台的前端开发框架。Uniapp的H5版本可以在浏览器中运行，并且可以使用腾讯地图进行地图展示和相关功能开发。 使用Uniapp H5的腾讯地图需要进行以下操作： 1、在项目中引入腾讯地图的SDK。可以通过在index.html文件中的head标签内插入腾讯地图的script标签来引入SDK。可以从腾讯地图开放平台获取相应的SDK。 2、在需要使用腾讯地图的页面中，使用相关的组件或API进行地图的展示和功能开发。Uniapp提供了uni_map组件，通过在页面中引入并使用该组件，可以在页面上展示地图。 3、通过调用腾讯地图提供的API，可以实现一些地图相关的功能，比如定位、搜索、标记等等。可以根据具体的需求，调用相应的API进行功能开发。 需要注意的是，在使用腾讯地图的时候，可能需要申请并使用腾讯地图的开发者密钥。开发者密钥可以在腾讯地图开放平台上申请，通过密钥可以获得腾讯地图的相关权限。 总结起来，Uniapp H5可以使用腾讯地图进行地图展示和功能开发，通过引入腾讯地图SDK并使用相应的组件和API，可以实现地图的展示、定位、搜索等功能。同时需要注意申请并使用腾讯地图的开发者密钥来获取相关权限。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

天府之绝

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

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

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

打赏作者

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

抵扣说明：

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

余额充值