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

港控/mmm° 2023-01-21 10:26 26阅读 0赞

### 欢迎访问我的GitHub ###

> 这里分类和汇总了欣宸的全部原创(含配套源码)：[https://github.com/zq2599/blog\_demos][https_github.com_zq2599_blog_demos]

### 本篇概览 ###

*  前段时间因为工作关系接触了微信小程序的实时音视频播放，这里将过程详细记录下来，作为今后的参考；
 *  整体方案上，我这边用OBS推流到腾讯云，再用小程序的live-player组件从腾讯云拉流播放，架构图如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center]
 *  本篇内容就是上图中的所有操作，从配置OBS推流开始，到腾讯云直播服务配置，再到小程序的运行全部打通；

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

本次实战需要五个重要前提，请确保已经满足，否则难以成功：

1.  小程序的主体必须是企业，因为只有企业类型才能打开以下开关，个人类型是无法打开的：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 1]
2.  小程序的服务类目必须在live-player支持的范围内，我这里的工具-视频服务是范围内的，如下图红框，具体范围请参考：https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html  
    ![在这里插入图片描述][20210515235357558.png_pic_center]
3.  有个可用的域名，我这里是zq2599.com，是在阿里云申请的；
4.  在腾讯云注册一个帐号；
5.  有个可用的电脑和摄像头，我这里是windows台式机+罗技C270i摄像头；

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

### OBS推流设置 ###

*  本章节的目标是完成视频源的推流配置，视频源内容是windows电脑上的USB摄像头，为了检查小程序播放有多大延时，还要在视频内容中贴一层当前时间，效果如下图所示，左上角的时间是一直在动的：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 2]
 *  下载windows版本的OBS并安装，我这里的版本是26.1.1，链接：https://cdn-fastly.obsproject.com/downloads/OBS-Studio-26.1.1-Full-Installer-x64.exe
 *  打开OBS，添加摄像头：来源 -> + -> 视频采集设备 -> 选择要用的摄像头，如下图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 3]
 *  如果摄像头正常，预览页面应该可见摄像头拍摄的内容：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 4]
 *  在预览页面上点击右键，选择调整输出大小(到源大小)：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 5]
 *  为了在小程序中检查延时有多少，咱们给视频内容贴上时间浮层，再增加一个来源，类型是浏览器，如下图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 6]
 *  选择新建，起名时间贴片：

![在这里插入图片描述][20210516103829998.png_pic_center]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 7]

*  此时网站内容会占满预览页面，如下图，其实我们需要的只是这个网页的时间，屏幕其他部分该用来显示摄像头内容，所以接下来我们要裁剪这个网站的内容：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 8]
 *  在时间贴片上点击右键：变换 -> 编辑变换：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 9]
 *  设置参数如下图红框2所示，就可以得到红框3中的效果：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 10]
 *  至此，视频源设置就完成了，暂时先不推流，等腾讯云设置完成；

### 腾讯云直播推流设置 ###

*  前面的章节咱们准备好了视频源，现在要找个媒体服务器推流，这里我用的是腾讯云的云直播服务，为新用户赠送了20G的流量，操作简单、文档也详细；
 *  浏览器打开：https://console.cloud.tencent.com/live/livestat
 *  推流域名无需新建，腾讯云已经准备好一个了，如下图红框，请确保是已启用状态：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 11]
 *  点击上图红框中的内容，进入推流域名的配置页面，如下图，填写红框4中的过期时间，再在红框5中填好名称，点击生成推流地址按钮就会生成红框6中的地址了：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 12]
 *  上图红框6中的推流地址，将其分为两段，前半段是rtmp://138824.livepush.myqcloud.com/live/，后半段是demo?txSecret=af840445fb899f88772916454ea15338&txTime=60A21EF1，接下来我们配置OBS推流地址就会用到；
 *  打开OBS，点击下图红框中的设置按钮：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 13]
 *  在推流的设置页面上，服务选择"自定义"，服务器填写推流地址的前半段，串流密钥填写推流地址的后半段，然后点击右下角的"确定"：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 14]
 *  此时设置已完成，可以向腾讯云推流，点击下图红框中的开始推流即开始：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 15]
 *  如果您希望最终展示的时候尽量低延时，可以对OBS的输出做一些调整，这里给出我的配置情况作为参考：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 16]
 *  此时在腾讯云页面上看到流已经推上来了，如下图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 17]
 *  点击上图红的红框5，可以在浏览器上预览推上来的流，如下图，可见存在两秒的延时：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 18]
 *  至此，推流设置全部完成，接下是播放相关设置；

### 腾讯云直播播放设置 ###

*  当视频流推送到腾讯云后，还需要配置好播放地址才能在小程序上播放，如下图，增加一个域名，类型是播放域名，域名字段请填写您自己拥有的合法域名：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 19]
 *  在您自己的域名解析配置页面做配置(例如我的域名解析是在阿里云上做的)，以我这里为例，腾讯云上配置的是www.zq2599.com，那么域名解析地址就是www.zq2599.com.tlivecdn.com，可见是增加了后缀.tlivecdn.com，作为参考，在阿里云上的配置如下图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 20]
 *  域名配置完毕后，可以根据播放域名生成播放地址了，操作如下图所示，在红框5位置填写的流名称和推流域名的要一致，再点击红框6中的按钮，就能生成各种协议的播放地址，咱们选用下图红框7所示的RTMP协议地址：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 21]

### 小程序开发 ###

*  首先请下载和安装小程序IDE，我这里是1.05版本，地址：https://dldir1.qq.com/WechatWebDev/release/p-ae42ee2cde4d42ee80ac60b35f183a99/wechat\_devtools\_1.05.2105100\_x64.exe
 *  小程序IDE安装好后请打开，界面效果如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 22]
 *  浏览器访问：https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html ，点击下图红框3中的链接，会自动往小程序IDE中导入实时音视频播放的demo工程：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 23]
 *  如下图，此时会进入小程序IDE的导入配置页面，请在红框位置填入您自己的小程序APPID，最后点击右下角的导入按钮：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 24]
 *  导入demo后，打开index.wxml，修改live-player标签的src属性的值，改为腾讯云上给出的播放地址：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 25]
 *  接下来，先点击下图红框中的编译按钮，再点击绿框中的预览按钮:  
    ![在这里插入图片描述][20210516181357817.png_pic_center]
 *  此时页面上会弹出一个二维码，掏出手机扫描此码，就会在手机上打开这个小程序了，小程序界面如下图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 26]
 *  点击播放按钮后，开始显示摄像头的视频，整个流程都走通了，将手机和电脑上的OBS放在一起拍照，即可了解延时情况，如下图，我这里是一秒左右，效果还是不错的：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 27]
 *  如果您不使用腾讯云推拉流的时候，最好将两个域名服务都禁用，以免因为大意导致流量被耗掉，操作如下图红框所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 28]
 *  至此，微信小程序+腾讯云直播的实时音视频实战就完成了，如果您正在寻找低延时的小程序播放方案，希望本文能给您一些参考；

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

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

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

> 微信搜索「程序员欣宸」，我是欣宸，期待与您一同畅游Java世界…

[https_github.com_zq2599_blog_demos]: https://github.com/zq2599/blog_demos
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221020/bac8dafd2bf44394b4d005cc936bf0fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221020/ca0e496c78e54855b815be0e34f5051b.png
[20210515235357558.png_pic_center]: /images/20221020/dfda34274bc14ecbb34b221d81376f64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221020/d87da40ca17343b3a2c4d04d60aae411.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221020/3ceeba21aa7f440d8781b18236e8c344.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221020/8a98549ae8db48dda338de993353eb3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221020/dc6e5357f75d457db88d7034bc706f0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221020/61d55f95c76d409295abfe6e62e76889.png
[20210516103829998.png_pic_center]: /images/20221020/759957412cc94af9b180c1000165f408.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221020/5f0c815fefac4904bf8c27f75a6c2413.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221020/31b8807baecd4fda8f07210c983eed75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221020/2b2a25c9c8c0435ebe29731d81a37d34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221020/a88dfac56d7f4e37a8d507fa4a84dda5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221020/d8b05919cd944c50b8b2059b12c962d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221020/6d8f3342a2fb4817bf985f7d8b8e1d30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221020/49a51052eb4e4fc1b9ed81b010d65877.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221020/feba45decbad42ada9c00de8e7dba5a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221020/b38f3f500d384293b6122c7e4ba54d16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20221020/fc13c372f84d46d99d53b21a660dd904.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 17]: /images/20221020/85d83013f39d47a4a16ef03d853149e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 18]: /images/20221020/9ff236f7d76d41cfbff7b18bd7dd414e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 19]: /images/20221020/59df25c0ccab4764b60cdef59beb9670.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 20]: /images/20221020/c5f4fcbcb10c441499b6bcdd9ac6df55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 21]: /images/20221020/5637beedcf0d44b4ae5b164e2dea8bc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 22]: /images/20221020/450bb592d3b6413696e8e38be942e562.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 23]: /images/20221020/0dccb1dfc9694bf983ed408e0cb06674.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 24]: /images/20221020/f29c5424606e451a86250bdf12288a1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 25]: /images/20221020/8a4f2056ece54ccb9191499c89f5e964.png
[20210516181357817.png_pic_center]: /images/20221020/6eefa78b236d4eb28dd8afc3cc9a9f6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 26]: /images/20221020/bba9e04a9da9499cb990fb415d42efc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 27]: /images/20221020/fc377bb3f9d1468995639874640aaace.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGluZ19jYXZhbHJ5_size_16_color_FFFFFF_t_70_pic_center 28]: /images/20221020/05431015ffe349b29c32fbf423888e50.png
[Java]: https://xinchen.blog.csdn.net/article/details/105068742
[Spring]: https://xinchen.blog.csdn.net/article/details/105086498
[Docker]: https://xinchen.blog.csdn.net/article/details/105086732
[kubernetes]: https://xinchen.blog.csdn.net/article/details/105086794
[Link 1]: https://xinchen.blog.csdn.net/article/details/105086850
[DevOps]: https://xinchen.blog.csdn.net/article/details/105086920