微信小程序推流拉流live-pusher/live-player示例，使用本地搭建RTMP服务_微信小程序 测试可以使用 live-pusher吗

适用读者:

• 对微信小程序已经有基本的了解。 例如：小程序账号申请、 常用组件、小程序开发工具
• 对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获取到原始的媒体数据流，然后开发者可以对原始的数据流进行编码，转码，压缩，美颜等预处理。但是在小程序环境，微信不允许！

 

以上所述都是截止于 2019年3月5日 , 后面微信小程序的策略发生变动我会第一时间更新。

逃~~~

链接

• Node-Media-Server
• 腾讯云直播服务, 免费20GB流量登录 - 腾讯云​console.cloud.tencent.com腾讯云直播服务, 免费20GB流量
• 小程序live-pusher/player小栗子Github源码地址

一些配置截图AJLoveChina/wechat-pusher-player一些配置截图

 

小程序开发接口设置

 

 

小程序页面ip地址配置

 

关于微信小程序实时视频有什么问题可以和我交流, https://zhuanlan.zhihu.com/p/58342507