首页 > 上网技巧 > 电脑小技巧 > 微信小程序推流拉流示例 使用本地搭建RTMP服务

微信小程序推流拉流示例 使用本地搭建RTMP服务

时间:2019-08-01 15:59 作者:QQ地带 我要评论

适用读者:
 
对微信小程序已经有基本的了解。 例如:小程序账号申请、 常用组件、小程序开发工具
对nodejs已经有基本的了解。
对微信小程序流媒体/实时音视频组件感兴趣的童鞋。
对小鱼易联/小鱼在家,声网的微信小程序内部实现感兴趣的童鞋。
小程序实时音视频的底层传输协议问题(TCP,UDP,QUIC)
如果您不满足上面所述,这篇文章应该不适合您。
 
好吧, 正文开始:
 
微信小程序提供了俩个组件live-pusher以及live-player,但是因为官方文档过于简略,以至于很多人难以上手。而且在集成过程中有些问题,微信官方也逃避不回答。所以本文就帮助大家解决这个问题,我写了一个开源的小栗子放在Github,方便大家自己测试。
 
Github地址在这里, 有详细的readme文档帮助大家如何使用
 
本仓库包括的内容
 
使用开源组件搭建本地的RTMP服务给小程序使用
小程序live-pusher/live-player如何使用
使用网页播放小程序推的视频流
关于腾讯云实时流媒体服务
第1步:开源组件搭建本地的RTMP服务
命令行进入文件夹 Node-Media-Server, 执行
 
npm install
node index.js
程序默认将在1935端口提供RTMP服务, 8000端口提供HTTP流服务
 
程序使用第三方开源MIT协议组件 Node-Media-Server
 
第2步:小程序live-pusher/live-player如何使用
开始之前你需要在微信开放平台注册小程序开发账号, 并申请小程序接口实时音视频流权限 这一步很重要, 不完成这一步无法进行后面的开发.
 
个人账号是可以申请此类接口权限的.
 
当小程序账号注册完成以及申请实时音视频流权限之后.
获取appid, 并使用微信开发者工具导入项目, 选择 client 文件夹, 然后点击 真机调试, 使用手机微信调试RTMP视频流. 记住要先开启本地的RTMP服务哦, 至于IP地址配置会在小程序页面有提示的.
 
 
 
 
 
 
第3步:使用网页播放小程序推的视频流
前面两步都完成的情况下, 可以在网页上测试一下小程序推的视频流. 命令行进入 web-client 文件夹, 然后命令行执行如下命令 :
 
// 如果你的npm已经全局安装了http-server
http-server -p 8080
 
// 否则
npm install
npx http-server -p 8080
然后浏览器打开 http://localhost:8080, 根据网页的提示填写拉取流的名称, 然后点击开始按钮, 如果不出意外你可以看到小程序推上来的视频流.
 
网页测试截图 
 
 
 
 
总结:聊一聊关于腾讯云实时流媒体服务
有些同学如果关心腾讯云实时流媒体服务怎么用的话, 可以进入腾讯云申请直播服务即可, 腾讯云有免费的20GB流量 供大家测试使用。(结尾有链接)至于具体的使用方法与上面的例子是一样的, 从腾讯云网页获取推流/拉流的地址就可以测试了。
 
如果你深入测试会发现腾讯云的速度比较快, 那是因为:腾讯云的RTMP服务是私有的 UDP + RTMP 协议, 传输层使用UDP协议在实时视频中可以将延时控制在 400ms左右。实际测试过程中发现,腾讯云使用的传输层协议是Google的QUIC协议, QUIC协议是基于UDP的提供了一整套拥塞控制等方案的传输层协议。
 
而我们自己搭建的RTMP服务是基于 TCP 传输的, 我在测试过程中发现宽带情况, 好的4G, 5G下, 基于TCP传输协议的实时视频的延时大概在1秒钟左右. 但是对于WIFI等网络波动大的情况下大概会有2秒的延时。
 
那你就想问, 我们把自己的RTMP服务改成UDP传输不好吗?
不行。在微信小程序环境只有腾讯云自家的RTMP服务才能使用UDP传输层协议,其它的企业和个人要么使用腾讯云的服务,要么使用自己搭建的基于TCP的服务。
 
你说坑不坑, 腾讯实在是坑啊!大家都知道实时音视频场景,UDP传输是最佳实践!你这是捆绑销售自己的服务啊。
 
然后我测试了微信小程序环境其它家的产品:
 
声网(agora) 实时音视频 基于TCP传输
阿里云 - 实时音视频 基于TCP传输
百度云 - 实时音视频 基于TCP传输
数据真实可靠, 都是我测试或者从他们工程师那里询问得知的。腾讯粑粑再一次靠着
 
但其实使用TCP的实时视频服务没那么糟糕, 在好的4G情况下 
1秒钟的延时用户完全是可以接受的,当然如果老板没办法接受,那就只能使用腾讯云了。
本人亲测, 小鱼易联产品使用的就是腾讯云的直播服务.
 
 
 
那么微信小程序live-pusher可以获取到原始的媒体数据流吗?
 
问这个问题的人基本都做过HTML5 webrtc相关的开发工作,确实在HTML5里面,Javascript有能力通过浏览器的API获取到原始的媒体数据流,然后开发者可以对原始的数据流进行编码,转码,压缩,美颜等预处理。但是在小程序环境,微信不允许!

标签: 微信小程序
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告