ZYT/zyt
2
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity
Files
0e46bf8e0dbc9109b35c209aa4534818b3dc1f00
zyt/TUICallKit-Vue3
T
History
longandCursor 0e46bf8e0d feat(metronome): 升级到 BackgroundAudioManager,iOS 真后台播放 
iOS 微信小程序硬限制:
  InnerAudioContext 切到后台/锁屏一定被挂起,
  即使配置 requiredBackgroundModes 也无效。
  唯一支持 iOS 真后台的音频 API 是 BackgroundAudioManager。

新增预合成档位音轨(ffmpeg 拼接 click + click-wood):
- loop_80bpm_2.mp3   慢走 6.0s 4 周期循环 (72 KB)
- loop_110bpm_2.mp3  健走 5.45s 5 周期循环 (66 KB)
- loop_130bpm_2.mp3  快走 5.54s 6 周期循环 (67 KB)
- cover.jpg          200×200 emerald 占位封面 (474B)

新 hook training/hooks/useMetronomeBg.ts:
- 封装 uni.getBackgroundAudioManager() 单例
- 必填 metadata: title/coverImgUrl/singer/epname/webUrl
- onEnded 重赋 src 实现循环 (BgAudio 无原生 loop 属性)
- onPause 同步 isPlaying,用户从锁屏控制条点暂停 UI 自动同步
- 暴露 playLoop(id)/pause/resume/stop API

metronome.vue 改造:
- 切换为 useMetronomeBg,移除右下角微调和拍号选择
  (预合成 mp3 改不了 BPM/拍号,要么砍要么扩 9 个 mp3)
- 中央圆按钮逻辑:
  · 未选档位 → 默认开"健走"
  · 选了档位且在播 → 暂停
  · 选了档位且暂停 → 恢复
- 视频 playbackRate 跟当前档位 BPM 同步(80→0.65× / 110→0.89× / 130→1.05×)
- 加底部提示"🔒 锁屏可继续播放,放兜里走也能听到"
- onHide 不 stop,onUnmounted 才 stop(避免锁屏控制条挂死)

副作用:
- 锁屏/通知栏会显示带封面+暂停按钮的音乐控制条(老人友好)
- 切档位有 200~500ms 延迟 (用户主动操作可接受)
- 不再支持任意 BPM 微调 (3 档已覆盖大部分场景)

旧的 useMetronome.ts 暂时保留,如 BgAudio 真机验证 OK 再清理。

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-26 09:39:33 +08:00
..
.hbuilderx
更新
2026-03-06 14:27:24 +08:00
components/dev-training-entry
refactor: 训练模块整体迁入分包,减小主包体积
2026-05-26 09:00:01 +08:00
config
更新
2026-03-11 14:33:49 +08:00
debug
更新
2026-03-23 18:02:16 +08:00
doctor/pages
更新
2026-03-20 13:56:40 +08:00
pages
refactor: 训练模块整体迁入分包,减小主包体积
2026-05-26 09:00:01 +08:00
scripts
refactor: 训练模块整体迁入分包,减小主包体积
2026-05-26 09:00:01 +08:00
static
refactor: 训练模块整体迁入分包,减小主包体积
2026-05-26 09:00:01 +08:00
training
feat(metronome): 升级到 BackgroundAudioManager,iOS 真后台播放
2026-05-26 09:39:33 +08:00
TUIKit
更新
2026-05-07 16:42:29 +08:00
uni_modules
更新
2026-03-11 09:49:47 +08:00
utils
更新
2026-03-16 15:08:28 +08:00
.env.example
更新
2026-03-11 14:33:49 +08:00
.gitignore
更新
2026-03-06 14:27:24 +08:00
App.vue
fix(metronome): 修复 iOS 真机静音键模式下无声音
2026-05-25 11:48:16 +08:00
async-component.d.ts
更新
2026-03-11 09:49:47 +08:00
async-import.d.ts
更新
2026-03-11 09:49:47 +08:00
index.html
更新
2026-03-06 14:27:24 +08:00
main.js
更新
2026-04-10 14:43:58 +08:00
manifest.json
fix(metronome): 切后台/小窗后节拍声继续(放兜里也能听)
2026-05-26 09:19:19 +08:00
package-lock.json
更新
2026-03-11 09:49:47 +08:00
package.json
更新
2026-03-11 09:49:47 +08:00
pages.json
fix(metronome): 切后台/小窗后节拍声继续(放兜里也能听)
2026-05-26 09:19:19 +08:00
README.md
更新
2026-03-06 14:27:24 +08:00
tsconfig.json
更新
2026-03-13 14:08:52 +08:00
uni.promisify.adaptor.js
更新
2026-03-06 14:27:24 +08:00
uni.scss
更新
2026-03-06 14:27:24 +08:00
新建 文本文档.txt
更新
2026-03-11 09:49:47 +08:00

README.md

简介

本 demo 演示了如何在 uni-app 项目中集成 TUICallKit 音视频通话组件。

环境准备

  • 微信 App iOS 最低版本要求：8.0.40
  • 微信 App Android 最低版本要求：8.0.40
  • 小程序基础库最低版本要求：2.10.0
  • 由于小程序测试号不具备 和 的使用权限，请使用企业小程序账号申请相关权限进行开发
  • 由于微信开发者工具不支持原生组件（即 和 标签），需要在真机上进行运行体验

快速跑通

第一步：下载源码，编译运行

  1. 克隆或者直接下载此仓库源码。

    git clone https://github.com/tencentyun/TUICallKit.git

  2. 进入 demo 目录

    cd ./TUICallKit/uni-app/TUICallKit-Miniprogram/TUICallKit-Vue3

  3. 安装依赖

    npm install

    mac端

    mkdir -p ./TUICallKit && cp -r node_modules/@trtc/calls-uikit-wx-uniapp/ ./TUICallKit && cp node_modules/@trtc/call-engine-lite-wx/RTCCallEngine.wasm.br ./static

    windows端

    xcopy node_modules\@trtc\calls-uikit-wx-uniapp\ .\TUICallKit /i /e
xcopy node_modules\@trtc\call-engine-lite-wx\RTCCallEngine.wasm.br .\static

  4. HBuilder 中导入项目

  5. 修改 ./TUICallKit/uni-app/TUICallKit-Miniprogram/TUICallKit-Vue3/debug/GenerateTestUserSig-es.js 文件 的 SDKAPPID 以及 SECRETKEY（阅读文末 开通服务）

  6. 运行到【微信开发者工具】，勾选 【运行时是否压缩代码】

  7. 项目导入到微信开发者工具，目录如下图：

示例体验

Tips：TUICallKit 通话体验，至少需要两台设备，用户 A、B 代表使用不同的设备。

用户 A（userId：111）

  • 步骤 1：在欢迎页，输入用户名（请确保用户名唯一性，不能与其他用户重复）登录，比如：111。
  • 步骤 2：根据不同的场景&业务需求，进入不同的场景界面，比如：视频通话。
  • 步骤 3：输入要拨打的用户 B 的 userId（例如：222），点击搜索，然后点击呼叫。
    步骤1 步骤2 步骤3

用户 B（userId：222）

  • 步骤 1：在欢迎页，输入用户名（请确保用户名唯一性，不能与其他用户重复）登录，比如：222。
  • 步骤 2：进入主页，等待接听来电即可。

接入指引

步骤一：开通小程序权限

由于 TUICallKit 所使用的小程序标签有更苛刻的权限要求，因此集成 TUICallKit 的第一步就是要开通小程序的类目和标签使用权限，否则无法使用，这包括如下步骤：

  • 小程序推拉流标签不支持个人小程序，只支持企业类小程序。需要在 注册 时填写主体类型为企业，如下图所示：

  • 小程序推拉流标签使用权限暂时只开放给有限 类目。

  • 符合类目要求的小程序，需要在 微信公众平台 > 开发 > 开发管理 > 接口设置中自助开通该组件权限，如下图所示：

步骤二：在小程序控制台配置域名

在 微信公众平台 > 开发 > 开发管理 > 开发设置 > 服务器域名中设置 request 合法域名 和 socket 合法域名，如下图所示：

  • request 合法域名：
https://official.opensso.tencent-cloud.com
https://yun.tim.qq.com
https://cloud.tencent.com
https://webim.tim.qq.com
https://query.tencent-cloud.com
https://web.sdk.qcloud.com
  • socket 合法域名：
wss://wss.im.qcloud.com
wss://wss.tim.qq.com

步骤三：开通服务

TUICallKit 是基于腾讯云 即时通信 IM 和 实时音视频 TRTC 两项付费 PaaS 服务构建出的音视频通信组件。您可以按照如下步骤开通相关的服务并体验 7 天的免费试用服务：

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

  2. 单击刚刚创建出的应用，进入基本配置页面，并在页面的右下角找到开通腾讯实时音视频服务功能区，单击免费体验即可开通 TUICallKit 的 7 天免费试用服务。如果需要正式应用上线，可以单击 前往加购 即可进入购买页面。

    IM 音视频通话能力针对不同的业务需求提供了差异化的付费版本供您选择，您可以在 IM 购买页 了解包含功能并选购您适合的版本。

  3. 在同一页面找到 SDKAppID 和密钥并记录下来

  • SDKAppID：IM 的应用 ID，用于业务隔离，即不同的 SDKAppID 的通话彼此不能互通。

  • Secretkey：IM 的应用密钥，需要和 SDKAppID 配对使用，用于签出合法使用 IM 服务的鉴权用票据 UserSig。

即日起至2022年10月01日0点前，购买音视频通话能力包基础版可获赠解锁相同有效期的小程序端通话功能授权。在活动结束前购买的音视频通话能力包在有效期内不受活动结束影响仍可使用小程序通话功能，活动结束后的新购或续期需选择体验版、进阶版、尊享版来获取小程序通话功能授权，基础版亦可单独加购小程序功能授权进行解锁。

单击免费体验以后，部分之前使用过 [实时音视频 TRTC] (https://cloud.tencent.com/document/product/647/16788) 服务的用户会提示：

[-100013]:TRTC service is  suspended. Please check if the package balance is 0 or the Tencent Cloud accountis in arrears

因为新的 IM 音视频通话能力是整合了腾讯云实时音视频 TRTC 和 即时通信 IM 两个基础的 PaaS 服务，所以当 实时音视频 TRTC 的免费额度（10000分钟）已经过期或者耗尽，就会导致开通此项服务失败，这里您可以单击 TRTC 控制台，找到对应 SDKAppID 的应用管理页，示例如图，开通后付费功能后，再次启用应用即可正常体验音视频通话能力。

附录

Reference in New Issue View Git Blame Copy Permalink