专栏首页云加头条简单的 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

模拟推流

  • 先来看一个简单的直播推流流程图 :
  • 用 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 页面上播放视频流。有兴趣的小伙伴们也可以尝试一下~

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML5如何实现直播推流?值得学习一下!

    自从RTMP推流协议诞生以来,依靠RTMP协议做的推流开发就一直都未停歇,在没有找到更加完善的替代品前,市面的主流推流仍将会由RTMP协议来实现。如大众所熟知的...

    TSINGSEE青犀视频
  • Easy系列开源与免费流媒体音视频方案汇总(持续更新)

    Easy系列从开源到SDK组件,再到产品、解决方案、硬件,从2012年EasyDarwin开始,专注于流媒体音视频这一领域已经非常多年了,积累了丰富的行业经验,...

    EasyNVR
  • H5和WebRTC实时通讯方案对比

    如果想要在浏览器上实现音视频的实时通讯,H5和WebRTC是两种可选方案,但是二者有明显的区别,优劣也比较突出。今天,我们就来简单了解一下。

    liuzhen007
  • 微信跨平台硬件直播组件

         听说微信视频号前阵子又上(gao)新(shi)啦,悄悄告诉你,手机外的硬件设备也能通过微信视频号直播啦,利用专业的设备提供第一视角的直播体验。  ...

    微信终端开发团队
  • Web H5视频滤镜的“百搭”解决方案——WebGL着色器

    视频滤镜,顾名思义,是在视频素材上duang特效的一种操作。 随着H5页面越做越炫酷的趋势,单一的视频播放已经不能满足我们的需求,视频滤镜在Web页面上的应用越...

    WendyGrandOrder
  • 实时视频直播客户端技术盘点:Native、HTML5、WebRTC、微信小程序

    用户1263954
  • EasyNVR是如何做到无插件播放RTSP摄像机,完美将海康、大华、宇视等安防设备向互联网转化的

    5G快来了,视频将会是跑在网络上流量最多的东西,短视频、长视频、电影、视频通话、视频监控,各种各样的,而在消费级领域,监控视频近些年也越来越受到关注和欢迎,从萤...

    EasyNVR
  • 【方案】专业视频网站H5页面如何解决视频加密问题?

    网页端观看视频操作简单方便,打开网页就可以直接观看,无需安装任何程序,很多在线教育机构都开辟了网页端的在线观看业务,网页端观看视频如何实现视频加密播放呢?网页端...

    点量小崔
  • 实时视频直播客户端技术盘点:Native、HTML5、WebRTC、微信小程序

    2017 年 12 月,微信小程序向开发者开放了实时音视频能力,给业内带来广阔的想象空间。连麦互动视频直播技术在 2016 年直播风口中成为视频直播的标配,然而...

    JackJiang
  • 视频“云、边、端”一体化全面支持H.265编码,实现更低的流量成本与更高的视频质量

    作为新一代的安防视频编码技术,H.265编码视频对比同一片源的H.264,H.265视频的码率为610kbps,文件大小3.10MB,而H.264视频的码率达到...

    EasyNVR
  • EasyNVR推流平台实现海康大华宇视网络摄像头内容网页无插件播放的方法介绍

    众所周知,EasyNVR可以将局域网/广域网上的海康/大华等网络摄像头由rtsp转换为rtmp、rtsp、hls、flv协议转换,并提供推流服务,可以将拉到的网...

    EasyNVR
  • 【Dev Club 分享】H5 视频直播那些事

    Dev Club 是一个交流移动开发技术,结交朋友,扩展人脉的社群,成员都是经过审核的移动开发工程师。每周都会举行嘉宾分享,话题讨论等活动。 本期,我们邀请了腾...

    腾讯Bugly
  • H5视频会议,摄像头监控,Web推流直播一体化的方案

    Web视频应用已经越来越深入生活,特别的常用的业务平台都是B/S系统,直播,监控,会议也正在走入生活,人们已经把这些视频应用当成办公必需,现在的大部分业务平台要...

    用户1144498
  • 如何实现低延时直播——支持多终端H5播放的超低延时直播方案

    随着互联网视频应用的普及,各行各业对直播的应用需求越来越多,作为一名流媒体行业的从业者,亲眼目睹了视频行业的发展轨迹。

    用户7045070
  • H5和WebRTC实时通讯方案对比

    “ 目前,实时音视频通讯的实现方案在浏览器上有两种,分别是H5和WebRTC,前者可以拉流观看,后者可以实现推流和拉流。”

    liuzhen007
  • 谷歌、微软抛弃Flash:HTML5播放器的时代即将到来

    时间到了2020年,大家打开Chrome浏览器,“又”会收到一条警告。转眼之间,离Chrome停用Flash只剩8个月。

    保利威视频云
  • 郭卓惺:互动课堂的搭建实例及相关领域应用

    随着在线教育覆盖面的增加,互动课堂授课方式正在向多样化发展,为了适应新形式的发展,腾讯视频云推出了全平台覆盖的互动课堂解决方案。为客户打通了直播、实时音视频、点...

    云加社区技术沙龙
  • 易观数科与易企秀达成战略合作!赋能企业数字内容营销升级|腾讯SaaS加速器·学员动态

    ? 来源| 腾讯SaaS加速器 二期项目-易观数科&一期项目-易企秀 ---- 近日,专注于智能用户运营产品与行业解决方案的提供商易观数科(腾讯SaaS加速器...

    腾讯SaaS加速器
  • HTML 5 视频直播一站式扫盲

    视频直播这么火,再不学就 out 了。 为了紧跟潮流,本文将向大家介绍一下视频直播中的基本流程和主要的技术点,包括但不限于前端技术。 1. H5 到底能不能做视...

    腾讯Bugly

扫码关注云+社区

领取腾讯云代金券