一看就能学会的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)


相关推荐

  • ubuntu一步架设ftp服务器

    ubuntu一步架设ftp服务器 1.安装sudoapt-getinstallvsftpdsudomkdir/home/myftp sudo/etc/init.d/vsftpdstartsudo/etc/init.d/vsftpdstopsudo/etc/init.d/vsftpdrestart 2.配置sudovi/etc/vsftpd.conf

  • phpstorm 2021.8.4激活码(JetBrains全家桶)

    (phpstorm 2021.8.4激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~65MJ…

  • linux工具箱_docker ps命令

    linux工具箱_docker ps命令1.gdb调试利器GDB是一个由GNU开源组织发布的、UNIX/LINUX操作系统下的、基于命令行的、功能强大的程序调试工具。对于一名Linux下工作的c++程序员,gdb是必不可少的工具;1.1.启动gdb对C/C++程序的调试,需要在编译前就加上-g选项:$g++-ghello.cpp-ohello调试可执行文件:$gdbprogram也就是你的执行文件,一般在当前目录下。调试core文件(core是程序非法执行后coredump后产生的文件):$gdb$gdb

  • IDEA使用教程_intellij idea使用教程

    IDEA使用教程_intellij idea使用教程idea启动后会在cpan当前用户下生成一个C:\Users\Crystal.IntelliJIdea2018.1文件夹,这个文件夹里面有两个子文件夹config和system。删除这两个文件夹,idea在启动时候会重新配置。idea的project类似于eclipse的workspace;idea的modue类似于eclipse的project;配置都是在setti…

    2022年10月13日
  • redis查看版本号 · 进入命令行

    redis查看版本号 · 进入命令行查看服务端版本**二者都可以**redis-server-vredis-server–version查看客户端版本**二者都可以**redis-cli-vredis-cli–version进入客户端redis-cli

  • Unity3d快速入门[通俗易懂]

    Unity3d快速入门[通俗易懂]https://www.zhihu.com/question/313621072Unity3d如何快速入门前言进入一个领域,最直接有效的方法就是,寻找相关综述性文章,首先你需要对你入门的领域有个概括性的了解,这些包括:1、主流的学习社区与网站。2、该领域的知名大牛与热心分享的从业者。3、如何有效的激励自己持续学习—主要是动手实践因此,总结一下Unity相关学习资源,可能有些不足,欢迎大家指正修改,一起成长!授人与鱼,不如授人与渔!一、Unity官方学习资源1、【Unity官.

发表回复

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

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