音视频小程序开发笔记
掘金安东尼 2020-09-15
小程序
本文首发在我的博客:地址 (opens new window)
# 小程序音视频原理
# 前言
首先你需要了解如何《快速跑通Demo》 (opens new window),本云游戏小程序实现方案正是基于 TRTC 双人通话。
TRTC 互通的自定义组件是通过 <trtc-room> 标签实现,它基于微信小程序原生的<live-pusher> 和 <live-player> 两个媒体组件。
这里主要用到的是 live-player (opens new window),用于播放云游戏的视频流。
# 架构图
可以从上图看到:微信小程序实现音视频必须经过腾讯视频云做转码(计费)。
# 要点说明
开发小程序音视频需要先通过类目审核。类目范围 (opens new window)
因为需要经过腾讯云的代理,所以需要注册腾讯云,申请 SDKAPPID 和 SECRETKEY 并做相应配置,前后端需统一。
# 开发指引
# 代码目录
本方案实现基于小程序原生,未使用框架(如 uniapp、taro 等)。
原生规范具体可参见:微信官方文档-小程序 (opens new window)
初始化目录:
# 开发步骤
- GenerateTestUserSig.js 中配置SDKAPPID 和 SECRETKEY,需和后台统一;
- 后台开视频房间,前端拿到房间号;
- 在微信开发者工具中打开项目,启用真机调试,扫码测试视频流是否推送成功;
- 前端获取用户点击和滑动操作;
- websocket 对接,对字节流进行编码和解码;
- 流程完善;
TODO:
- 心跳检测;
- 重连机制;
- 画面旋转;
- 接口对接;
- 断点续传;
- ......
# 编码和解码
需要用 base64 做中转,编码类型是: ascii 编码。
- 接收数据(解码):ArrayBuffer 转 String
- 先将 Buffer 转 base64:wx.arrayBufferToBase64 (opens new window)
- 再将 base64 转 String:微信小程序base64编码解码以及utf-8解码 (opens new window)
- 发送数据(编码):String 转 ArrayBuffer
- 先将 String 转为 base 64;
- 再调用 wx.base64ToArrayBuffer 转成 ArrayBuffer
此部分方法封装在 trtc-room-socket.js 文件中
# 真机调试
开发者工具上无法看到视频流,必须启用手机来调试。真机调试可以看实时查看打印信息,查看延迟信息等;
当前推流房间号:9999
# 后记
# 文档整理
- 一分钟跑通demo (opens new window)
- 快速集成组件 (opens new window)
- 快速调通基本功能 (opens new window)
- trtc-room api (opens new window)
- 微信小程序实现WebSocket心跳重连 (opens new window)
- 浅谈BASE64编码 (opens new window)
- JS 中关于 base64 的一些事 (opens new window)
- 微信小程序ASCII转字符 (opens new window)
- base64 — 使用 ASCII 编码二进制数据 (opens new window)
- Base64笔记 (opens new window)