一看就能学会的H5视频推流方案[通俗易懂]

一看就能学会的H5视频推流方案[通俗易懂]一看就能学会的H5视频推流方案

大家好,又见面了,我是你们的朋友全栈君。

本文由云+社区发表

作者:周超

导语

随着直播平台爆发式增长,直播平台从 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

模拟推流

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

img

  • 用 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 的请求流程:

img

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 页面上播放视频流。有兴趣的小伙伴们也可以尝试一下~

此文已由腾讯云+社区在各渠道发布

获取更多新鲜技术干货,可以关注我们腾讯云技术社区-云加社区官方号及知乎机构号

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107002.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 手机和电脑将XPS转换成PDF的免费方法

    手机和电脑将XPS转换成PDF的免费方法如何将XPS转成PDF?最近有小伙伴收到很多后缀为XPS的文件,不知道如何打开,更不懂怎么样使用,如果能转成常用的PDF格式就好了。打开XPS文件最简单的方法当然还是安装对应的阅读器,比如XPSViewer;除此之外其实很多PDF阅读器也是可以直接打开XPS文档的,比如极速PDF阅读器。用以上任意一种方式打开XPS文件后,利用PDF生成的其中方式之一,将文件进行打印并选择PDF虚拟打印机就能直接将XPS文件以PDF格式进行保存了。这种方式一般适用于电脑端,毕竟手机无法进行这种虚拟打印机的操作。但如

  • 最新Hadoop的面试题总结[通俗易懂]

    最新Hadoop的面试题总结[通俗易懂]1、集群的最主要瓶颈 磁盘IO2、Hadoop运行模式 单机版、伪分布式模式、完全分布式模式3、Hadoop生态圈的组件并做简要描述 1)Zookeeper:是一个开源的分布式应用程序协调服务,基于zookeeper可以实现同步服务,配置维护,命名服务。 2)Flume:一个高可用的,高可靠的,分布式的海量日志采集、聚合和传输的系统。 3)Hbase:是一个分布式的、面向列的开源数据库,利用HadoopHDFS作为其存储系统。 4)Hive:基于Hadoop的一个数据仓库工具

  • 第八章:sqoop数据迁移工具

    第八章:sqoop数据迁移工具第八章:sqoop数据迁移工具

  • PLSQL Developer简单使用教程[通俗易懂]

    PLSQL Developer简单使用教程[通俗易懂]PLSQLDeveloper是Oracle数据库开发工具,很牛也很好用,PLSQLDeveloper功能很强大,可以做为集成调试器,有SQL窗口,命令窗口,对象浏览器和性能优化等功能,下面简单的介绍一下如何使用PLSQLDeveloper工具,新手教程。  首先确保有oracle数据库或者有oracle服务器,然后才能使用PLSQLDeveloper连接数据库。启动P

  • js获取当前时间(特定的时间格式)[通俗易懂]

    js获取当前时间(特定的时间格式)[通俗易懂]在一个程序中需要对用户的操作进行记录,记录其操作信息,需要对操作进行归类,有时候用户的操作是重复性的操作,那对于重复的操作,也是要区分的,方便查找,可以通过设置类似GUID的唯一值,也可以获取当前的操作时间来区分,因为时间也是唯一的,在任何时候时间都不会出现重复,当然可以获取就可以设置,所以您也可以人为的去设置/修改操作时间。但是这样不好。使用javascript获取时间:在javas…

  • Ubuntu安装nginx_服务器安装Ubuntu

    Ubuntu安装nginx_服务器安装Ubuntu版本ubunt16.04nginx-1.8.1gcc-4.8.4pcre-8.38zlib-1.2.11openssl-1.0.2n前置环境配置进入到/usr/local目录下执行下面1234,此处路劲与之后安装nginx对应,需要注意*1、gcc源码编译依赖环境apt-getinstallbuild-essentialapt-

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号