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

欢迎访问我的GitHub

这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos

本篇概览

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

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

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

  1. 小程序的主体必须是企业,因为只有企业类型才能打开以下开关,个人类型是无法打开的:
    在这里插入图片描述
  2. 小程序的服务类目必须在live-player支持的范围内,我这里的工具-视频服务是范围内的,如下图红框,具体范围请参考:https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html
    在这里插入图片描述
  3. 有个可用的域名,我这里是zq2599.com,是在阿里云申请的;
  4. 在腾讯云注册一个帐号;
  5. 有个可用的电脑和摄像头,我这里是windows台式机+罗技C270i摄像头;
  • 上述前提条件准备完毕后,接下来开始逐步操作,从推流开始;

OBS推流设置

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

  • 下载windows版本的OBS并安装,我这里的版本是26.1.1,链接:https://cdn-fastly.obsproject.com/downloads/OBS-Studio-26.1.1-Full-Installer-x64.exe

  • 打开OBS,添加摄像头:来源 -> + -> 视频采集设备 -> 选择要用的摄像头,如下图:
    在这里插入图片描述

  • 如果摄像头正常,预览页面应该可见摄像头拍摄的内容:
    在这里插入图片描述

  • 在预览页面上点击右键,选择调整输出大小(到源大小)
    在这里插入图片描述

  • 为了在小程序中检查延时有多少,咱们给视频内容贴上时间浮层,再增加一个来源,类型是浏览器,如下图:
    在这里插入图片描述

  • 选择新建,起名时间贴片

在这里插入图片描述

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

在这里插入图片描述

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

腾讯云直播推流设置

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

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

  • 推流域名无需新建,腾讯云已经准备好一个了,如下图红框,请确保是已启用状态:
    在这里插入图片描述

  • 点击上图红框中的内容,进入推流域名的配置页面,如下图,填写红框4中的过期时间,再在红框5中填好名称,点击生成推流地址按钮就会生成红框6中的地址了:
    在这里插入图片描述

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

  • 打开OBS,点击下图红框中的设置按钮:
    在这里插入图片描述

  • 推流的设置页面上,服务选择"自定义",服务器填写推流地址的前半段,串流密钥填写推流地址的后半段,然后点击右下角的"确定":
    在这里插入图片描述

  • 此时设置已完成,可以向腾讯云推流,点击下图红框中的开始推流即开始:
    在这里插入图片描述

  • 如果您希望最终展示的时候尽量低延时,可以对OBS的输出做一些调整,这里给出我的配置情况作为参考:
    在这里插入图片描述

  • 此时在腾讯云页面上看到流已经推上来了,如下图:
    在这里插入图片描述

  • 点击上图红的红框5,可以在浏览器上预览推上来的流,如下图,可见存在两秒的延时:
    在这里插入图片描述

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

腾讯云直播播放设置

  • 当视频流推送到腾讯云后,还需要配置好播放地址才能在小程序上播放,如下图,增加一个域名,类型是播放域名,域名字段请填写您自己拥有的合法域名:
    在这里插入图片描述
  • 在您自己的域名解析配置页面做配置(例如我的域名解析是在阿里云上做的),以我这里为例,腾讯云上配置的是www.zq2599.com,那么域名解析地址就是www.zq2599.com.tlivecdn.com,可见是增加了后缀.tlivecdn.com,作为参考,在阿里云上的配置如下图:
    在这里插入图片描述
  • 域名配置完毕后,可以根据播放域名生成播放地址了,操作如下图所示,在红框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,最后点击右下角的导入按钮:
    在这里插入图片描述

  • 导入demo后,打开index.wxml,修改live-player标签的src属性的值,改为腾讯云上给出的播放地址:
    在这里插入图片描述

  • 接下来,先点击下图红框中的编译按钮,再点击绿框中的预览按钮:
    在这里插入图片描述

  • 此时页面上会弹出一个二维码,掏出手机扫描此码,就会在手机上打开这个小程序了,小程序界面如下图:
    在这里插入图片描述

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

  • 如果您不使用腾讯云推拉流的时候,最好将两个域名服务都禁用,以免因为大意导致流量被耗掉,操作如下图红框所示:
    在这里插入图片描述

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

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

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

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

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

相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页