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

番茄西红柿发布于2019-04-23 13:11 / 2188人阅读

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

在尝试使用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

idc机房托管专线服务安卓rtmp直播推流软件 rtmp直播服务器搭建简单实现web直播webrtc 直播推流服务器搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1553.html

GitChat · 架构 | 如何从零开始搭建高性能直播平台？

摘要：在本文中，我将先从协议开始，一步步带领大家搭建一个简易高性能的直播平台。停止应用简介俄罗斯人民开发的一款的流媒体插件，除了直播发布音视频流之外具备流媒体服务器的常见功能在线直播。语法上下文描述使视频流从一个关键帧开始。来自 GitChat 作者：七夜前言现在直播已经成为移动互联网时代一个新的重要流量入口，从YY、斗鱼到花椒直播，直播已经成为人们分享交流的新方式，应用场景众多，主要...

isaced 2019-06-24 17:54 评论0 收藏0
GitChat · 架构 | 如何从零开始搭建高性能直播平台？

摘要：在本文中，我将先从协议开始，一步步带领大家搭建一个简易高性能的直播平台。停止应用简介俄罗斯人民开发的一款的流媒体插件，除了直播发布音视频流之外具备流媒体服务器的常见功能在线直播。语法上下文描述使视频流从一个关键帧开始。来自 GitChat 作者：七夜前言现在直播已经成为移动互联网时代一个新的重要流量入口，从YY、斗鱼到花椒直播，直播已经成为人们分享交流的新方式，应用场景众多，主要...

Luosunce 2019-07-16 16:18 评论0 收藏0
基于 Vue 的直播播放器实战

摘要：直播协议首先，需要知道直播的常用协议，和，经过测试在七牛云直播平台不采用加速的情况下的延时在内，在。 showImg(https://segmentfault.com/img/bVFwFZ?w=2328&h=764); 前言时下直播的盛行让很多人对直播技术产生浓厚的兴趣，orange 本人也不例外，本文借着实战的目的完成一个 demo，并没有深入的讲解直播技术的实现原理以及推流和拉流...

xcc3641 2019-07-16 16:15 评论0 收藏0
【腾讯Bugly干货分享】H5 视频直播那些事

摘要：每周都会举行嘉宾分享，话题讨论等活动。本期，我们邀请了腾讯前端开发工程师吕鸣，为大家分享视频直播那些事。更多关于延迟的问题可以参考苹果官方地址但是直播视频却有一些不可替代的优势传播性好，利于分享等操作。本文来自于腾讯bugly开发者社区，非经作者同意，请勿转载，原文地址：http://dev.qq.com/topic/57a42... Dev Club 是一个交流移动开发技术，结交朋...

enali 2019-08-05 10:01 评论0 收藏0
【腾讯Bugly干货分享】H5 视频直播那些事

摘要：每周都会举行嘉宾分享，话题讨论等活动。本期，我们邀请了腾讯前端开发工程师吕鸣，为大家分享视频直播那些事。更多关于延迟的问题可以参考苹果官方地址但是直播视频却有一些不可替代的优势传播性好，利于分享等操作。本文来自于腾讯bugly开发者社区，非经作者同意，请勿转载，原文地址：http://dev.qq.com/topic/57a42... Dev Club 是一个交流移动开发技术，结交朋...

Paul_King 2019-07-16 16:15 评论0 收藏0