极速搭建RTMP直播流服务器+webapp (vue) 简单实现直播效果

摘要：极速搭建简单直播流服务器开发环境需要安装并启动如果是自己使用搭建直播服务器，毕竟是接触这个不到半天，还是有点复杂，编译设置有点繁琐。

  在尝试使用webRTC实现webapp直播失败后，转移思路开始另外寻找可行的解决方案。在网页上尝试使用webRTC实现视频的直播与看直播，在谷歌浏览器以及safari浏览器上测试是可行的。但是基于基座打包为webapp后不行，所以直播的话建议还是原生的好。HBuilder自带的H5+有提供了原生的视频播放和推流录制上传，但是需要有一个rtmp直播流服务器，用于测试和开发，这时就需要自建rtmp服务推流了。

极速搭建简单RTMP直播流服务器

开发环境：macOS

需要安装并启动docker：➡️ Docker Community Edition for Mac

$ docker --version
Docker version 18.06.1-ce, build e68fc7a

$ docker-compose --version
docker-compose version 1.22.0, build f46880f

$ docker-machine --version
docker-machine version 0.15.0, build b48dc28d

  如果是自己使用nginx搭建rtmp直播服务器，毕竟是接触这个不到半天，还是有点复杂，编译设置有点繁琐。好在docker上有大把别人编译设置好的rtmp环境，所以先拿来玩着先，有空还是自己要来搞搞的。这里用到的是alfg/nginx-rtmp库。

• Pull docker image and run:

docker pull alfg/nginx-rtmp
docker run -it -p 1935:1935 -p 8080:80 --rm alfg/nginx-rtmp

• Build and run container from source:

docker build -t nginx-rtmp .
docker run -it -p 1935:1935 -p 8080:80 --rm nginx-rtmp

直播推流地址 

rtmp://:1935/stream/$STREAM_NAME

播流地址

http://:8080/live/$STREAM_NAME.m3u8

使用OBS测试rtmp直播流服务器

下载安装 OBS，在随便网上找一条视频在obs无限循环播放。obs=>设置=>流

开始推流

safari浏览器测试效果

RTMP直播流服务器简单搭建成功，这个只是简单的实现了 推流播流而已，测试发现直播有延迟大概10s左右。还需要调配像素以及贞。或者说使用成熟的第三方的推流地址与播流地址。

webapp（vue）移动端直播

新建一个vue 项目

livepusher.vue

videoplayer.vue

推流效果与播流效果

参考链接：

nginx-rtmp

http://ask.dcloud.net.cn/article/13416

https://imququ.com/post/html5-live-player-3.html

https://blog.csdn.net/yelin042/article/details/78133945