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

欢迎访问个人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....

3. 有个可用的域名，我这里是<font color="blue">zq2599.com</font>，是在阿里云申请的；
4. 在腾讯云注册一个账号；
5. 有个可用的电脑和摄像头，我这里是windows台式机+罗技C270i摄像头；
6. 上述前提条件准备完毕后，接下来开始逐步操做，从推流开始；

7. OBS推流设置

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

• 下载windows版本的OBS并安装，我这里的版本是<font color="blue">26.1.1</font>，连接：https://cdn-fastly.obsproject...
• 打开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...
• 推流域名无需新建，腾讯云已经准备好一个了，以下图红框，请确保是<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/WechatW...
• 小程序IDE安装好后请打开，界面效果以下：

• 浏览器访问：https://developers.weixin.qq.... ，点击下图红框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