欢迎进入Allbet Gaming官网。Allbet Gaming官网开放Allbet Gaming登录网址、Allbet Gaming开户、Allbet Gaming代理开户、Allbet Gaming电脑客户端、Allbet Gaming手机版下载等业务。

首页科技正文

微信小程序+腾讯云直播的实“shi”时音视频‘pin’实战条{tiao}记

admin2021-09-2319

2022世界杯冠亚军www.9cx.net)实时更新比分2022世界杯冠亚军数据,2022世界杯冠亚军全程高清免费不卡顿,100%原生直播,2022世界杯冠亚军这里都有。给你一个完美的观赛体验。

迎接接见我的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摄像头,为了检查小程序播放有多大延时,还要在视频内容中贴一层当前时间,效果如下图所示,左上角的时间是一直在动的:

  • 下载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

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

2022世界杯4强www.9cx.net)实时更新比分2022世界杯4强数据,2022世界杯4强全程高清免费不卡顿,100%原生直播,2022世界杯4强这里都有。给你一个完美的观赛体验。

  • 点击上图红框中的内容,进入推流域名的设置页面,如下图,填写红框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天下...
https://github.com/zq2599/blog_demos

皇冠管理端www.9cx.net)实时更新发布最新最快最有效的皇冠管理端网址,包括皇冠管理端手机网址,皇冠管理端备用网址,皇冠管理端最新网址,皇冠管理端足球网址,皇冠管理端网址大全。

网友评论

最新评论