简单的 H5 视频推流解决方案

简介: 导语 随着直播平台爆发式增长,直播平台从 PC 端转战移动端,紧跟着直播的潮流,自己学习实现了一套简单的 H5 视频推流的解决方案,下面就给小伙伴们分享一下自己学习过程中的经验。 环境部署 1、 配置、安装 Nginx; # .

导语

随着直播平台爆发式增长,直播平台从 PC 端转战移动端,紧跟着直播的潮流,自己学习实现了一套简单的 H5 视频推流的解决方案,下面就给小伙伴们分享一下自己学习过程中的经验。

环境部署

1、 配置、安装 Nginx;

# ./configure --sbin-path=/usr/local/nginx/nginx --conf-path=/usr/local/nginx/nginx.pid --with-http_ssl_module --with-pcre=/usr/local/src/pcre-8.39 --with-zlib=/usr/local/src/zlib-1.2.11 --with-openssl=/usr/local/openssl/
# make
# make install
# /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf  //启动Ngnix
# netstat -ano | grep 80 

2、扩展 Nginx-rtmp-module

# ./configure --add-module=/usr/local/src/nginx-rtmp-module-master --with-openssl=/usr/local/openssl/
# make
# make install
# vim /usr/local/ngnix/conf/ngnix.conf
include /usr/localcinx-rtmp-module-master/testinx.conf; # vim /usr/localcinx-rtmp-module-master/testinx.conf rtmp { server { listen 1935; application myapp { live on; #record keyframes; #record_path /tmp; #record_max_size 128K; #record_interval 30s; #record_suffix .this.is.flv; #on_publish http://localhost:8080/publish; #on_play http://localhost:8080/play; #on_record_done http://localhost:8080/record_done; } application hls { live on; hls on; hls_path /tmp/hls; hls_fragment 10s; #每个视频切片的时长。 hls_playlist_length 60s; #总共可以回看的事件,这里设置的是1分钟。 #hls_continuous on; #连续模式。 #hls_cleanup on; #对多余的切片进行删除。 #hls_nested on; #嵌套模式。 } } } http { server { listen 8080; location /stat { rtmp_stat all; rtmp_stat_stylesheet stat.xsl; } location /stat.xsl { root /usr/local/src/nginx-rtmp-module-master/; } location /control { rtmp_control all; } location /rtmp-publisher { root /usr/local/src/nginx-rtmp-module-master/test; } location /hls { #server hls fragments types{ application/vnd.apple.mpegurl m3u8; video/mp2t ts; } #alias /tmp/app; root /tmp; expires -1; } location / { root /usr/local/src/nginx-rtmp-module-master/test/rtmp-publisher; } } } # /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf # netstat -ltn #查看端口的监听情况 

3、 安装 ffmpeg

# ./configure --prefix=/usr/local/ffmpeg
# make
# make install

至于 ffmpeg 是啥?详细介绍可以参考:《【经验分享】音频、视频利器——FFmpeg

模拟推流

  • 先来看一个简单的直播推流流程图 :

  • 用 flv 视频文件模拟 RTMP 视频流:
 # ffmpeg -re -i test.flv -vcodec copy -acodec copy -f flv rtmp://ip:1935/myapp/mystream

注:RTMP(Real Time Messaging Protocol),实时消息传输协议,用于视频直播协议,和 HLS 一样都可以应用于视频直播;

  • 用 mp4 视频文件模拟 HLS 视频流:
ffmpeg -re -i test.mp4 -c copy -f flv rtmp://ip:1935/hls/mystream

注:HLS(HTTP Live Streaming), Apple 的动态码率自适应技术,主要用于 PC 和 Apple 终端的音视频服务;

  • HLS 的请求流程:

H5 如何在页面上播放视频

<video autoplay webkit-playsinline>      
        <source src="http://ip/hls/mystream.m3u8" type="application/vnd.apple.mpegurl" /> <p class="warning">Your browser does not support HTML5 video.</p> </video> 

总结

根据以上的流程,简单的实现了一个视频直播的流服务器来推送直播流,并且可以在 H5 页面上播放视频流。有兴趣的小伙伴们也可以尝试一下~

目录
相关文章
|
2月前
|
Web App开发 网络协议 算法
WebRTC 和一些常见的直播方案
【10月更文挑战第25天】
|
4月前
|
编解码 流计算
直播推流的工作原理是什么
直播推流将视频和音频数据从设备实时传输到服务器并分发给观众,涉及采集、编码、推流、传输、拉流和显示六个关键步骤。首先通过摄像机或麦克风采集音视频,再利用编码器如OBS压缩数据,采用H.264等格式编码,接着通过RTMP等协议推流至服务器,服务器调整格式后通过HLS等协议分发给不同设备,观众即可实时观看。此流程确保了低延迟的全球内容传递。
|
4月前
|
编解码 Dart 网络协议
Flutter如何玩转超低延迟RTSP/RTMP播放,跨平台视频流体验大升级,让你的应用秒变直播神器!
【9月更文挑战第3天】Flutter作为谷歌推出的跨平台移动UI框架,凭借高性能和丰富的生态系统广受好评。本文详细介绍如何在Flutter应用中实现低延迟的跨平台RTSP/RTMP播放,并提供具体示例代码。首先介绍了如何使用`flutter_vlc_player`播放RTSP流,然后讨论了优化视频播放以降低延迟的方法,包括调整播放器配置等。通过选用合适的播放器插件并进行优化,Flutter可在视频流播放领域提供卓越的用户体验。随着生态的发展,Flutter有望成为视频流媒体开发的首选框架。
481 6
|
5月前
|
编解码 网络协议 开发工具
Android平台RTSP|RTMP直播播放器技术接入说明
大牛直播SDK自2015年发布RTSP、RTMP直播播放模块,迭代从未停止,SmartPlayer功能强大、性能强劲、高稳定、超低延迟、超低资源占用。无需赘述,全自研内核,行业内一致认可的跨平台RTSP、RTMP直播播放器。本文以Android平台为例,介绍下如何集成RTSP、RTMP播放模块。
202 0
|
网络协议 算法 网络性能优化
【流媒体】推流与拉流简介
【流媒体】推流与拉流简介
539 0
|
8月前
|
Web App开发 移动开发 前端开发
web端实现rtsp实时推流视频播放可行性方案
总之,要在Web端实现RTSP实时推流视频播放,需要使用适当的前端技术(如HTML5 Video或WebRTC),以及媒体服务器或流转换器来处理RTSP流。这需要一些开发和配置工作,但是可以实现实时视频流的播放。具体的实现方案可能会根据您的需求和技术栈而有所不同,所以需要仔细评估和选择适合您的解决方案。
891 0
|
开发工具 流计算
一点就通,解析直播源码拉流技术
之前我们分析了直播源码的推流技术,今天来简单分析下直播拉流技术怎么实现的。
|
Web App开发 存储 编解码
成为大主播的必懂知识:直播源码推流
相信直播用过OBS的人都大体了解直播源码推流,那具体逻辑和技术方面是怎么样实现的呢?今天山东布谷网络科技IT商务来告诉你。
成为大主播的必懂知识:直播源码推流
|
编解码 开发工具 图形学
Unity环境下RTMP推流+RTMP播放低延迟解决方案
在本文之前,我们发布了Unity环境下的RTMP推流(Windows平台+Android平台)和RTMP|RTSP拉流(Windows平台+Android平台+iOS平台)低延迟的解决方案,今天做个整体汇总,权当抛砖引玉。
589 0
|
编解码 监控 网络协议
什么是视频推流和视频拉流?视频推流和视频拉流都涉及哪些技术?一文带您了解!
什么是视频推流和视频拉流?视频推流和视频拉流都涉及哪些技术?一文带您了解!
6477 0