腾讯云实时音视频 uniapp视频通话trtc-local-view和trtc-remote-view不显示画面的问题

最新推荐文章于 2024-06-14 11:28:14 发布
最新推荐文章于 2024-06-14 11:28:14 发布
阅读量108 收藏
点赞数 1
文章标签： 腾讯云 实时音视频 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70782896/article/details/138802343
版权

从官方拉下了代码，真机运行没有问题。但是把代码粘贴到自己项目就是黑屏！

1.创建实例成功

2.进入房间成功

3.打开摄像头并发布到房间成功（真机运行至手机要去设置把相机权限打开）

4.绑定了viewId同时也用了v-if判断渲染

5.使用的是nvue文件

终于找到原因！太蠢了，找了两天。因为我的视频通话是写在子组件里面的。但是我的父组件是vue文件！父组件也必须使用nvue文件。

泡芙小姨
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iOS小技能：视图置顶（让一个View至于最顶端， 避免被其他子视图遮盖住）zPosition / bringSubviewToFront
iOS逆向与安全
04-03 1万+
前言 比如让日期控件至于窗口的最顶层 code @implementation PGDatePickManager (ios12) + (void)load { static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ NSArray *selStringsArray =...
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接入腾讯云trtc遇到的问题
qq_50879136的博客
09-13 558
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才出现。
vue3腾讯云实时音视频通话 ui集成方案TUIcallkit
Lval的博客
08-17 2728
vue3腾讯云实时音视频通话 ui集成方案TUIcallkit。
微信小程序接入腾讯云实时音视频TRTC----基本使用
weixin_47886687的博客
08-12 4989
一.在腾讯云申请账号，拿到adkAppID 二.下载腾讯云demo 三.分析demo 跑通Demo与快速集成有官方介绍,以下记录自己理解.
【项目】基于TRTC的实时多人会议实现
雨下一整晚real的博客
05-30 1757
一、需求分析 最近项目中需要实现一个多人会议的功能。由于考虑到功能的复杂性，选择接入第三方平台实现。为了功能的稳定性，选取当前比较流行的 TRTC （Tencent Real-Time Communication，腾讯实时音视频）。 完成技术选型之后，我们需要了解该技术是如何实现和使用的。这一部分参考腾讯云对于 TRTC 的官方文档说明可以得知： 实时音视频 新手指引-文档中心-腾讯云-腾讯云 (tencent.com) 二、TRTC 的实现 TRTC 在使用的时候，主要是作为一个转发云平台，负责处理多端的
uniapp 小程序接入腾讯实时音视频trtc-wx
m0_46693606的博客
03-14 1993
微信 App iOS 最低版本要求：7.0.9微信 App Android 最低版本要求：7.0.8小程序基础库最低版本要求：2.10.0由于小程序测试号不具备 和 的使用权限，请使用企业小程序账号申请相关权限进行开发。由于微信开发者工具不支持原生组件（即 和 标签），需要在真机上进行运行体验。
【新知实验室--音视频通话】腾讯云TRTC-实时音视频---多人会议视频通话SDK基础搭建
m0_61486963的博客
11-30 1978
为实现 视频通话 一般来说是需要掌握许多的技术栈的，并且学习与搭建过程在没有人指导的时候，会很痛苦，所以至今为止，我都没有顺理出来，搭建视频通话的学习路径CSDN 联合 腾讯云–TRTC （实时音视频服务）展开了 “腾讯云音视频-新知实验室-TRTC实时音视频体验计划”从官方的介绍中，我知道了原来现在已经有第三方的音视频服务工具SDK，帮助开发者快速的搭建音视频服务更多SDK使用细节详情，在 ‘音视频热门场景实战训练营’直播回放中可以了解腾讯实时音视频文档。
腾讯云实时音视频聊天房-小程序专用SDK-精简版（TRTC）
01-05
精简版仅包含 TRTC 和直播播放（TXLivePlayer）两项功能，对 App 的安装包体积增量最小，适合仅使用 TRTC 相关功能的客户。 TRTC官方说明网址：https://cloud.tencent.com/document/product/647/32689
vue集成腾讯实时音视频TRTC
09-01
vue集成腾讯实时音视频TRTC 用Vue+Element搭建的腾讯实时音视频通话 仅限桌面浏览器，暂未搭建其他应用 使用前请先npm install安装依赖包 然后npm run serve既可看到效果
腾讯云trtc实时音视频完整案例 音视频+共享屏幕直播
08-12
强化 setMixTranscodingConfig 接口，支持 pureAudio 参数，用于纯语音通话场景下的语音混流和录制。 Android 增加商用企业版支持（增加大眼、瘦脸、V 脸 和 动效挂架功能）。 修复声音免提切换无效 bug。 优化低端...
腾讯云实时音视频终端组件 TRTC SDK
07-03
腾讯云实时音视频终端组件 ...TUI场景化解决方案是腾讯云TRTC针对直播、语聊、视频通话等推出的低代码解决方案，依托腾讯在音视频&通信领域的技术积累，帮助开发者快速实现相关业务场景，聚焦核心业务，助力业务起飞
通过腾讯云TDSQL TCP&TCE(MySQL版)认证考试秘籍宝典
最新发布
YUNBEE_chen的博客
06-14 167
考生需要在腾讯云大学官网或指定的考试平台上注册账号（杭州云贝教育是官方授权合作伙伴可以报名考试）、填写报考信息并缴纳考试费用。同时，可以通过参加培训课程（杭州云贝教育的腾讯云TDSQL考生学员通过率在98%）、模拟考试等方式进行备考。腾讯云TDSQL认证受到众多企业和行业的认可，有助于提升企业在数据库领域的专业形象。TCCE专家级(高级)——理论和上机成绩均达到70分及以上通过认证。TCCP高级(中级)——理论和上机成绩均达到80分及以上通过认证。考试是在线考试，考生需要在腾讯云大学官网上完成。
腾讯云和windows11安装frp，实现内网穿透
PhilsphyPrgram的博客
06-10 616
实现公网上，访问到windows上启动的web服务。
Databricks超10亿美元收购Tabular；Zilliz 推出 Milvus Lite ； 腾讯云支持Redis 7.0
让每个人用好数据和云
06-11 307
部分 MySQL/PostgreSQL版本社区生命周期结束 (EOL) ，将Cloud SQL for MySQL/PostgreSQL将从2025 年 2 月 1 日开始提供扩展支持([18] [19] [20] [21] )，Databricks将增强 Delta Lake 和 Iceberg 社区合作，以实现 Lakehouse 底层格式的开放与兼容([1] [2])。Amazon RDS不再支持db.m4, db.r4, and db.t2 类型的实例 ([28])
数智教育创新如何向未来？腾讯云与你探索革新之路
QcloudCommunity的博客
06-14 292
5月31日，由腾讯云TVP 与西安电子科技大学联合举办的「数智教育的创新与技术融合 ——腾讯云TVP 走进西安电子科技大学」活动在西安正式举办，本次活动邀请到西安电子科技大学、腾讯会议、腾讯云大数据等高教行业与企业专家，围绕高校数字化建设、数字技术应用以及AIGC对教育行业的赋能展开，为高校数字化建设指引新方向。
原腾讯云副总裁张纾翔加入矩阵起源，共筑人工智能新篇章
MatrixOrigin的博客
06-11 284
张纾翔先生毕业后加入华为，从研发工程师岗位开启职业生涯，历任研发、销售及综合管理等多个职务，最终晋升为华为云副总裁，在华为积累了国内外丰富的技术、业务与管理经验。等国内外一流的互联网企业、软件公司、数字化企业和开源社区，核心团队为产品、研发、解决方案、生态和开源社区等领域的专家，在分布式架构、数据库、云计算、大数据及人工智能等领域积累了丰富经验。张纾翔先生在技术创新、市场拓展和业务管理方面的丰富经验，将会助力矩阵起源在数据库与人工智能技术应用和商业化方面取得更大的突破，为行业和社会创造更大的价值。
使用live-player与live-pusher实现实时音视频通话，但是没有对方画面与声音
07-14
要实现实时音视频通话，需要同时使用live-player和live-pusher组件，并且配合使用TRTC的实时音视频SDK。 以下是实现步骤和代码示例： 步骤一：准备工作 1. 在腾讯云官网注册账号并创建云通信应用，获取SDKAppID。 2. 下载并引入TRTC的小程序SDK。 步骤二：初始化SDK 在小程序的App.js中初始化TRTC SDK，代码示例如下： ```javascript const trtcConfig = { SDKAppID: 'your_SDKAppID', // 替换为实际的 SDKAppID }; App({ onLaunch: function () { wx.$trtc = require('./path/to/TRTCSDK.js').createInstance(trtcConfig); } }); ``` 步骤三：实现音视频通话 1. 在小程序页面中创建TRTC实例，并设置事件监听： ```javascript const trtcInstance = getApp().$trtc; Page({ data: { localView: '', remoteView: '', }, onLoad: function () { trtcInstance.on('onLocalView', (e) => { this.setData({ localView: e.view }); }); trtcInstance.on('onRemoteView', (e) => { this.setData({ remoteView: e.view }); }); trtcInstance.on('onUserExit', (e) => { // 处理用户退出房间的逻辑 }); }, joinRoom: function () { const roomId = 'your_room_id'; // 替换为实际的房间ID const userId = 'your_user_id'; // 替换为实际的用户ID trtcInstance.joinRoom(roomId, userId); }, exitRoom: function () { trtcInstance.exitRoom(); } }); ``` 2. 在小程序页面的WXML中使用live-pusher组件推送本地音视频流： ```html <live-pusher url="{{pusherUrl}}"></live-pusher> ``` 3. 在小程序页面的WXML中使用live-player组件播放远程音视频流： ```html <live-player src="{{remoteView}}" bindplay="onPlay"></live-player> ``` 4. 在小程序页面的JS中配置推流地址： ```javascript Page({ data: { pusherUrl: '', }, joinRoom: function () { const roomId = 'your_room_id'; // 替换为实际的房间ID const userId = 'your_user_id'; // 替换为实际的用户ID // 获取推流地址 const pusherUrl = trtcInstance.getPusherUrl(roomId, userId); this.setData({ pusherUrl }); // 加入房间 trtcInstance.joinRoom(roomId, userId); }, }); ``` 在上述代码中，`trtcInstance.getPusherUrl()`方法用于获取推流地址，并将其绑定到live-pusher组件的url属性上。`remoteView`用于绑定remoteView事件，将远程音视频流展示在live-player组件中。 这样，使用live-player和live-pusher组件结合TRTC SDK就可以实现实时音视频通话了。具体的实现细节还需要根据业务需求进行调整和完善。以上仅为简单示例，更详细的代码和功能可以参考腾讯云TRTC小程序SDK的官方文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值