本文首发在我的博客：《音视频小程序开发笔记》
ps: github.io 偶尔莫名的会挂，如果不可，请暂时挂代理，后面还得修正走内循环🐕。
前言
云电脑、云办公、云会议、云游戏等等云概念，在不平凡的 2020，依然此起彼伏，你方唱罢我登场！它们似乎在告诉着我们什么：5G 时代不会平凡？还是说正为某项能颠覆产业的技术应用而蛰伏着？
前段时间接触了云游戏小程序，记录一二，仅作分享。
云游戏以云计算为基础，游戏运行在服务器端，不再要求用户有高配置的客户端（显卡和处理器），通过视频传输、控制虚拟远程桌面（VNC） 的方式来实现游戏上的交互。当然，这对网络的稳定和低延时有一个较高的要求，这也是为什么在未来 5G 被广泛商用的条件下，大家予之更高期待的原因。
背景
Q：云游戏可以依托于浏览器 H5，那么它能依托于小程序吗？
- 此文以微信小程序为例，让我们看看其实现的可能性及关键点指北☞。
首先你需要了解如何《快速跑通Demo》，云游戏小程序实现方案基于 TRTC 双人通话。
TRTC 互通的自定义组件是通过 <trtc-room> 标签实现，它基于微信小程序原生的<live-pusher> 和 <live-player> 两个媒体组件。
这里主要用到的是 live-player，用于播放云游戏的视频流 。
架构图
可以从上图看到：微信小程序实现音视频必须经过腾讯视频云做转码（计费 QAQ）。
要点说明
- 开发小程序音视频需要先通过类目审核。类目范围
- 因为需要经过腾讯云的代理，所以需要注册腾讯云，申请 SDKAPPID 和 SECRETKEY 并做相应配置，前后端需统一。
开发指引
代码目录
本方案实现基于小程序原生，未使用框架（如 uniapp、taro 等）。
原生规范具体可参见：微信官方文档-小程序
初始化目录：
开发步骤
- GenerateTestUserSig.js 中配置SDKAPPID 和 SECRETKEY，需和后台统一；
- 后台开视频房间，前端拿到房间号；
- 在微信开发者工具中打开项目，启用真机调试，扫码测试视频流是否推送成功；
- 前端获取用户点击和滑动操作；
- websocket 对接，对字节流进行编码和解码；
- 流程完善；
编码和解码
需要用 base64 做中转，编码类型是： ascii 编码。
- 接收数据（解码）：ArrayBuffer 转 String
- 先将 Buffer 转 base64：wx.arrayBufferToBase64
- 再将 base64 转 String：微信小程序base64编码解码以及utf-8解码
- 发送数据（编码）：String 转 ArrayBuffer
- 先将 String 转为 base 64；
- 再调用 wx.base64ToArrayBuffer 转成 ArrayBuffer
此部分方法封装在 trtc-room-socket.js 文件中
真机调试
开发者工具上无法看到视频流，必须启用手机来调试。真机调试可以看实时查看打印信息，查看
延迟信息等；
后记
小结
基于微信小程序原生标签 <live-player>可以实现云游戏视频的推流，微信小程序需要经过腾讯云做一层转码服务，框架图已说明。控制流的实现需要自己封装成 VNC，比如获取点击滑动操作，再转码 ArrayBuffer 传给后台进行实际的游戏控制，服务器处理后再推流处理后的视频。
重难点有：
- wss 的心跳，重连机制；
- 视频画面旋转缩放；
- 字节流的传输；
- 断点续传等；
此题值得研究的东西还真挺多，浅尝浅记，期待应用 5G。TIME!
文档整理
- 一分钟跑通demo
- 快速集成组件
- 快速调通基本功能
- trtc-room api
- 微信小程序实现WebSocket心跳重连
- 浅谈BASE64编码
- JS 中关于 base64 的一些事
- 微信小程序ASCII转字符
- base64 — 使用 ASCII 编码二进制数据
- Base64笔记
