微信小程序+腾讯云直播的实时音视频实战笔记

欢迎访问我的GitHub

https://github.com/zq2599/blog_demos

内容：所有原创文章分类汇总及配套源码，涉及Java、Docker、Kubernetes、DevOPS等；

本篇概览

• 前段时间因为工作关系接触了微信小程序的实时音视频播放，这里将过程详细记录下来，作为今后的参考；
• 整体方案上，我这边用OBS推流到腾讯云，再用小程序的<font color="blue">live-player</font>组件从腾讯云拉流播放，架构图如下：

在这里插入图片描述

• 本篇内容就是上图中的所有操作，从配置OBS推流开始，到腾讯云直播服务配置，再到小程序的运行全部打通；

重要前提（主体是企业的小程序、一个可用域名）

本次实战需要五个重要前提，请确保已经满足，<font color="red">否则难以成功</font>：

1. 小程序的主体必须是<font color="blue">企业</font>，因为只有企业类型才能打开以下开关，个人类型是无法打开的：

在这里插入图片描述

2. 小程序的服务类目必须在live-player支持的范围内，我这里的<font color="blue">工具-视频服务</font>是范围内的，如下图红框，具体范围请参考：https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html

在这里插入图片描述

3. 有个可用的域名，我这里是<font color="blue">zq2599.com</font>，是在阿里云申请的；
4. 在腾讯云注册一个帐号；
5. 有个可用的电脑和摄像头，我这里是windows台式机+罗技C270i摄像头；

• 上述前提条件准备完毕后，接下来开始逐步操作，从推流开始；

OBS推流设置

• 本章节的目标是完成视频源的推流配置，视频源内容是windows电脑上的USB摄像头，为了检查小程序播放有多大延时，还要在视频内容中贴一层当前时间，效果如下图所示，左上角的时间是一直在动的：

在这里插入图片描述

• 下载windows版本的OBS并安装，我这里的版本是<font color="blue">26.1.1</font>，链接：https://cdn-fastly.obsproject.com/downloads/OBS-Studio-26.1.1-Full-Installer-x64.exe

• 打开OBS，添加摄像头：来源 -> + -> 视频采集设备 -> 选择要用的摄像头，如下图：

在这里插入图片描述

• 如果摄像头正常，预览页面应该可见摄像头拍摄的内容：

在这里插入图片描述

• 在预览页面上点击右键，选择<font color="red">调整输出大小(到源大小)</font>：

在这里插入图片描述

• 为了在小程序中检查延时有多少，咱们给视频内容贴上时间浮层，再增加一个来源，类型是<font color="blue">浏览器</font>，如下图：

在这里插入图片描述

• 选择<font color="blue">新建</font>，起名<font color="red">时间贴片</font>：

在这里插入图片描述

• 进入设置页面后，将url字段设置为：https://naozhong.net.cn/shijian/

在这里插入图片描述

• 此时网站内容会占满预览页面，如下图，其实我们需要的只是这个网页的时间，屏幕其他部分该用来显示摄像头内容，所以接下来我们要裁剪这个网站的内容：

在这里插入图片描述

• 在<font color="blue">时间贴片</font>上点击右键：变换 -> 编辑变换：

在这里插入图片描述

• 设置参数如下图红框2所示，就可以得到红框3中的效果：

在这里插入图片描述

• 至此，视频源设置就完成了，暂时先不推流，等腾讯云设置完成；

腾讯云直播推流设置

• 前面的章节咱们准备好了视频源，现在要找个媒体服务器推流，这里我用的是腾讯云的云直播服务，为新用户赠送了20G的流量，操作简单、文档也详细；

• 浏览器打开：https://console.cloud.tencent.com/live/livestat

• 推流域名无需新建，腾讯云已经准备好一个了，如下图红框，请确保是<font color="blue">已启用</font>状态：

在这里插入图片描述

• 点击上图红框中的内容，进入推流域名的配置页面，如下图，填写红框4中的过期时间，再在红框5中填好名称，点击<font color="blue">生成推流地址</font>按钮就会生成红框6中的地址了：

在这里插入图片描述

• 上图红框6中的推流地址，将其分为两段，前半段是<font color="blue">rtmp://138824.livepush.myqcloud.com/live/</font>，后半段是<font color="red">demo?txSecret=af840445fb899f88772916454ea15338&txTime=60A21EF1</font>，接下来我们配置OBS推流地址就会用到；

• 打开OBS，点击下图红框中的<font color="red">设置</font>按钮：

在这里插入图片描述

• 在<font color="red">推流</font>的设置页面上，服务选择"自定义"，服务器填写推流地址的前半段，串流密钥填写推流地址的后半段，然后点击右下角的"确定"：

在这里插入图片描述

• 此时设置已完成，可以向腾讯云推流，点击下图红框中的<font color="blue">开始推流</font>即开始：

在这里插入图片描述

• 如果您希望最终展示的时候尽量低延时，可以对OBS的输出做一些调整，这里给出我的配置情况作为参考：

在这里插入图片描述

• 此时在腾讯云页面上看到流已经推上来了，如下图：

在这里插入图片描述

• 点击上图红的红框5，可以在浏览器上预览推上来的流，如下图，可见存在两秒的延时：

在这里插入图片描述

• 至此，推流设置全部完成，接下是播放相关设置；

腾讯云直播播放设置

• 当视频流推送到腾讯云后，还需要配置好播放地址才能在小程序上播放，如下图，增加一个域名，类型是<font color="blue">播放域名</font>，域名字段请填写您自己拥有的合法域名：

在这里插入图片描述

• 在您自己的域名解析配置页面做配置(例如我的域名解析是在阿里云上做的)，以我这里为例，腾讯云上配置的是<font color="blue">www.zq2599.com</font>，那么域名解析地址就是<font color="red">www.zq2599.com.tlivecdn.com</font>，可见是增加了后缀<font color="blue">.tlivecdn.com</font>，作为参考，在阿里云上的配置如下图：

在这里插入图片描述

• 域名配置完毕后，可以根据播放域名生成播放地址了，操作如下图所示，在红框5位置填写的流名称和推流域名的要一致，再点击红框6中的按钮，就能生成各种协议的播放地址，咱们选用下图红框7所示的RTMP协议地址：

在这里插入图片描述

小程序开发

• 首先请下载和安装小程序IDE，我这里是1.05版本，地址：https://dldir1.qq.com/WechatWebDev/release/p-ae42ee2cde4d42ee80ac60b35f183a99/wechat_devtools_1.05.2105100_x64.exe

• 小程序IDE安装好后请打开，界面效果如下：

在这里插入图片描述

• 浏览器访问：https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html ，点击下图红框3中的链接，会自动往小程序IDE中导入实时音视频播放的demo工程：

在这里插入图片描述

• 如下图，此时会进入小程序IDE的导入配置页面，请在红框位置填入您自己的小程序APPID，最后点击右下角的<font color="blue">导入</font>按钮：

在这里插入图片描述

• 导入demo后，打开<font color="blue">index.wxml</font>，修改live-player标签的<font color="red">src</font>属性的值，改为腾讯云上给出的播放地址：

在这里插入图片描述

• 接下来，先点击下图红框中的<font color="red">编译</font>按钮，再点击<font color="green">绿框</font>中的预览按钮:

在这里插入图片描述

• 此时页面上会弹出一个二维码，掏出手机扫描此码，就会在手机上打开这个小程序了，小程序界面如下图：

在这里插入图片描述

• 点击播放按钮后，开始显示摄像头的视频，整个流程都走通了，将手机和电脑上的OBS放在一起拍照，即可了解延时情况，如下图，我这里是一秒左右，效果还是不错的：

在这里插入图片描述

• 如果您不使用腾讯云推拉流的时候，最好将两个域名服务都禁用，以免因为大意导致流量被耗掉，操作如下图红框所示：

在这里插入图片描述

• 至此，微信小程序+腾讯云直播的实时音视频实战就完成了，如果您正在寻找低延时的小程序播放方案，希望本文能给您一些参考；

你不孤单，欣宸原创一路相伴

1. Java系列
2. Spring系列
3. Docker系列
4. kubernetes系列
5. 数据库+中间件系列
6. DevOps系列

欢迎关注公众号：程序员欣宸

微信搜索「程序员欣宸」，我是欣宸，期待与您一同畅游Java世界...
https://github.com/zq2599/blog_demos