欢迎访问我的GitHub

https://github.com/zq2599/blog_demos

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

本篇概览

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

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

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

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

  1. 小程序的主体必须是企业,因为只有企业类型才能打开以下开关,个人类型是无法打开的:

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

  1. 有个可用的域名,我这里是zq2599.com,是在阿里云申请的;
  2. 在腾讯云注册一个帐号;
  3. 有个可用的电脑和摄像头,我这里是windows台式机+罗技C270i摄像头;
  • 上述前提条件准备完毕后,接下来开始逐步操作,从推流开始;

OBS推流设置

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

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

  • 在预览页面上点击右键,选择调整输出大小(到源大小):

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

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

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

  • 在时间贴片上点击右键:变换 -> 编辑变换:

  • 设置参数如下图红框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的导入配置页面,请在红框位置填入您自己的小程序APPID,最后点击右下角的导入按钮:

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

  • 接下来,先点击下图红框中的编译按钮,再点击绿框中的预览按钮:

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

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

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

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

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

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

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

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

https://github.com/zq2599/blog_demos

微信小程序+腾讯云直播的实时音视频实战笔记的更多相关文章

  1. 微信小程序腾讯云php后台解决方案

    微信小程序腾讯云php后台解决方案 微信小程序前段需要添加必要的文件以配合后端 (1)wafer2-client-sdk sdk提供了几种接口包括登陆,获取用户openid,图片上传等 (2)conf ...

  2. 微信小程序腾讯云配置Tomcat https端口

    在个人开发微信小程序时,发布之前要配置微信小程序的域名https及域名的SSL证书的申请及安装 我用的是腾讯云,SSL证书申请好之后,点击下载,解压文件夹,会有如图,根据你要配置的服务器是哪种,我是t ...

  3. 微信小程序开发 -- 通过云函数下载任意文件

    微信小程序开发 -- 通过云函数下载任意文件 1.云开发介绍 ​ 微信小程序开发者众所周知,小程序开发拥有许多限制,当我还是一个菜鸟入门的时候,第一关就卡在了没有备案域名的HTTP请求上面,那时候云开 ...

  4. 微信小程序——引用阿里云字体

    阿里图标官网:http://www.iconfont.cn 使用阿里云图标大致的方法就是:选中你的图标——保存至你的项目——下载你的图标项目——在项目中引用字体文件. 具体方法可以参考:引用阿里云矢量 ...

  5. 微信小程序中使用云开发获取openid

    微信小程序获取openid 新建一个微信小程序项目 注意要注册一个自己的小程序账号,并有属于自己的appid 点击云开发按钮,自行填入开发环境名称 打开app.js,找到依赖环境 修改为刚才设置的环境 ...

  6. 微信小程序如何创建云函数并安装wx-server-sdk依赖

    时间:2020/01/23 步骤 1.在微信开发者工具中云函数所在的文件夹的图标与其他文件夹是不同的,如下(第一个是云函数): 如果需要使一个普通文件变为云函数文件夹,需要在project.confi ...

  7. 微信小程序腾讯地图SDK使用方法

    一.本篇文章主要知识点有以下几种: 1.授权当前位置 2.map组件的使用 3.腾讯地图逆地址解析 4.坐标系的转化 二.效果如下: 三.WXML代码 <map id="map&quo ...

  8. 微信小程序-视频教程-百度云-下载

    链接: https://pan.baidu.com/s/16WGL3whutozx-UXqsDPhhA 提取码: 关注公众号[GitHubCN]回复获取   什么是微信小程序?小程序是一种不需要下载安 ...

  9. (三)微信小程序首页的分类功能和搜索功能的实现笔记

    就在昨天,微信宣布了微信小程序开发者工具新增“云开发”功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜索功能的效果图 1.首页分类功能的实现 boxtwo方法(.js ...

随机推荐

  1. STM32—驱动GY85-IMU模块

    GY85是一个惯性测量模块,内部集成了三轴加速度计.三轴陀螺仪.电子罗盘.气压传感器等芯片,用于测量和报告设备速度.方向.重力,模块可以将加速度计.陀螺仪.电子罗盘等传感器的数据进行综合,在上位机可以 ...

  2. STM32—SysTick系统定时器

    SysTick是STM32中的系统定时器,利用SysTick可以实现精确的延时. SysTick-系统定时器 属于 CM3 内核中的一个外设,内嵌在 NVIC 中.系统定时器是一个 24bit 的向下 ...

  3. 服务器受到网络攻击时,如何获取请求客户端的真实 IP?

    网络攻击 前不久公司遭受了一次网络攻击. 早晨刚到公司,就发现登录接口的调用次数飙升,很快就确认是被恶意攻击,让安全部门做网关入口针对对方 IP 加了限制. 并统一对所有的 IP 加了调用的频率限制. ...

  4. http扩展小插件

    支持.net framework4.5.1,.net core2.0及以上 应用层需要引用包Kogel.Net,Nuget上可以下载安装. 或者使用Nuget命令添加包 Install-Package ...

  5. OAuth2 与OpenID的区别

    OAuth2 OpenId OpenId是在OAuth2基础之上实现的 比OAuth2更简便 OAuth2需要在认证后 额外的去再调用用户信息的接口 才能获取用户信息 而OpenId直接伴随token ...

  6. Qt多窗口编程详解

    常用的窗体基类是 QWidget.QDialog 和 QMainWindow,在创建 GUI 应用程序时选择窗体基类就是从这 3 个类中选择. QWidget 直接继承于 QObject,是 QDia ...

  7. 映射Map、队列Queue、优先级队列PriorityQueue

    映射Map 将对象映射到其他对象的能力是解决编程问题的有效方法.例如,考虑一个程序,它被用来检查 Java 的 Random 类的随机性.理想情况下, Random 会产生完美的数字分布,但为了测试这 ...

  8. jquery validate 验证插件 解决多个相同的Name 只验证第一个的方案

    方案一:如果 项目里不是只是个别页面 有多个name 验证, 那么利用 prototype 来写,把这段代码加在你所要使用多个name的页面  的js初始化里 即可 if ($.validator) ...

  9. Spring第一课:基于XML装配bean(四),三种实例化方式:默认构造、静态工厂、实例工厂

    Spring中基于XML中的装配bean有三种方式: 1.默认构造 2.静态工厂 3.实例工厂 1.默认构造 在我们在Spring的xml文件中直接通过:     <bean id=" ...

  10. 30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)

    前言 本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性.框架的原理以问题的形式进行整理汇总,意在帮助作者及读者自测下 Vue 掌握的程度.本文章节结构以从易到难进行组织,建议读者按章节顺序 ...