浅尝云游戏音视频小程序

本文首发在我的博客：《音视频小程序开发笔记》

ps: github.io 偶尔莫名的会挂，如果不可，请暂时挂代理，后面还得修正走内循环🐕。

前言

云电脑、云办公、云会议、云游戏等等云概念，在不平凡的 2020，依然此起彼伏，你方唱罢我登场！它们似乎在告诉着我们什么：5G 时代不会平凡？还是说正为某项能颠覆产业的技术应用而蛰伏着？

前段时间接触了云游戏小程序，记录一二，仅作分享。

云游戏以云计算为基础，游戏运行在服务器端，不再要求用户有高配置的客户端（显卡和处理器），通过视频传输、控制虚拟远程桌面（VNC） 的方式来实现游戏上的交互。当然，这对网络的稳定和低延时有一个较高的要求，这也是为什么在未来 5G 被广泛商用的条件下，大家予之更高期待的原因。

背景

Q：云游戏可以依托于浏览器 H5，那么它能依托于小程序吗？

• 此文以微信小程序为例，让我们看看其实现的可能性及关键点指北☞。

首先你需要了解如何《快速跑通Demo》，云游戏小程序实现方案基于 TRTC 双人通话。

TRTC 互通的自定义组件是通过 <trtc-room> 标签实现，它基于微信小程序原生的<live-pusher> 和 <live-player> 两个媒体组件。

这里主要用到的是 live-player，用于播放云游戏的视频流 。

架构图

yl.png

图片来源

可以从上图看到：微信小程序实现音视频必须经过腾讯视频云做转码（计费 QAQ）。

要点说明

1. 开发小程序音视频需要先通过类目审核。类目范围
2. 因为需要经过腾讯云的代理，所以需要注册腾讯云，申请 SDKAPPID 和 SECRETKEY 并做相应配置，前后端需统一。

开发指引

代码目录

本方案实现基于小程序原生，未使用框架（如 uniapp、taro 等）。

原生规范具体可参见：微信官方文档-小程序

初始化目录：

catalog.png

开发步骤

1. GenerateTestUserSig.js 中配置SDKAPPID 和 SECRETKEY，需和后台统一；
2. 后台开视频房间，前端拿到房间号；
3. 在微信开发者工具中打开项目，启用真机调试，扫码测试视频流是否推送成功；
4. 前端获取用户点击和滑动操作；
5. websocket 对接，对字节流进行编码和解码；
6. 流程完善；

编码和解码

需要用 base64 做中转，编码类型是： ascii 编码。

• 接收数据（解码）：ArrayBuffer 转 String

1. 先将 Buffer 转 base64：wx.arrayBufferToBase64
2. 再将 base64 转 String：微信小程序base64编码解码以及utf-8解码

• 发送数据（编码）：String 转 ArrayBuffer

1. 先将 String 转为 base 64；
2. 再调用 wx.base64ToArrayBuffer 转成 ArrayBuffer

此部分方法封装在 trtc-room-socket.js 文件中

真机调试

开发者工具上无法看到视频流，必须启用手机来调试。真机调试可以看实时查看打印信息，查看延迟信息等；

console.png

后记

小结

基于微信小程序原生标签 <live-player>可以实现云游戏视频的推流，微信小程序需要经过腾讯云做一层转码服务，框架图已说明。控制流的实现需要自己封装成 VNC，比如获取点击滑动操作，再转码 ArrayBuffer 传给后台进行实际的游戏控制，服务器处理后再推流处理后的视频。

重难点有：

1. wss 的心跳，重连机制；
2. 视频画面旋转缩放；
3. 字节流的传输；
4. 断点续传等；

此题值得研究的东西还真挺多，浅尝浅记，期待应用 5G。TIME!

文档整理

• 一分钟跑通demo
• 快速集成组件
• 快速调通基本功能
• trtc-room api
• 微信小程序实现WebSocket心跳重连
• 浅谈BASE64编码
• JS 中关于 base64 的一些事
• 微信小程序ASCII转字符
• base64 — 使用 ASCII 编码二进制数据
• Base64笔记

错误收集

• 退出房间定时器未清空
• sendSocketMessage: fail taskID not exist（关键）
• 小程序中使用btoa、atob方法