您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > H5

一看就能学会的H5视频推流方案

时间:2022-08-27 14:01:07  来源:  作者:音视频开发老舅

环境部署

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

 

模拟推流

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

 

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



Tags:H5   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
H5开发框架
跨平台移动应用开发框架允许开发者使用一套代码在多个操作系统上构建应用程序,从而节省时间和资源。以下是一些常见的跨平台移动应用开发框架以及它们的特点,希望对大家有所帮...【详细内容】
2023-08-11  Search: H5  点击:(252)  评论:(0)  加入收藏
一次弄懂H5原型图,轻松搞定H5活动开发
初入职场的新手产品经理或者设计师,很多都曾疑惑过,H5的设计需求是什么?其实H5还有一个比较易于理解的称呼,就是H5营销页面。在当今移动互联网的快速发展的数字化时代,H5页面活动...【详细内容】
2023-07-21  Search: H5  点击:(159)  评论:(0)  加入收藏
京东快递H5项目接入vite实战
本文介绍了如何在开发阶段将vite应用于vue 2.x 工程,从而提高研发的开发体验与效率。主要涉及如何兼容process变量,如何处理 node-sass 与 dart-sass冲突,以及路径别名的兼容处...【详细内容】
2023-03-17  Search: H5  点击:(232)  评论:(0)  加入收藏
H5直播技术起航
作者:京东科技 吴磊音视频基本概念视频格式就是通常所说的.mp4,.flv,.ogv,.webm等。简单来说,它其实就是一个盒子,用来将实际的视频流以一定的顺序放入,确保播放的有序和完整性...【详细内容】
2023-01-10  Search: H5  点击:(239)  评论:(0)  加入收藏
外部h5页面如何通过跳转引流到微信小程序
由于Html5来了,为了曾热点,所以都叫H5了。 而且,现在很多的APP开发,其实就是一个软件的壳,内部都是H5,但实际上外部也是h5,谈不上原生应用,至于H5有什么BUG,就是很多东西都无法解决的...【详细内容】
2023-01-05  Search: H5  点击:(269)  评论:(0)  加入收藏
怎样从微信公众号h5跳转小程序,难度大吗,具体是如何操作的?
微信公众号h5应该如何转跳到小程序,难度大吗?很多人心里会有这样的疑问也是正常的,认为只有“专业人员”才能够进行操作,其实不然,普通人也是能够进行操作的。实际上很简单,“专业...【详细内容】
2022-11-09  Search: H5  点击:(385)  评论:(0)  加入收藏
一看就能学会的H5视频推流方案
环境部署1、 配置、安装 Nginx;# ./configure --sbin-path=/usr/local/nginx/nginx --conf-path=/usr/local/nginx/nginx.pid --with-http_ssl_module --with-pcre=/usr/loca...【详细内容】
2022-08-27  Search: H5  点击:(619)  评论:(0)  加入收藏
H5实时解码音频并播放
音视频的格式是一个有歧义的说法。我们熟知的诸如Flv、Mp4、Mov啥的都是包装格式,可以理解为一种容器,就像一个盒子。里面放到是经过编码的音视频数据,而这些音视频数据都有自...【详细内容】
2022-08-17  Search: H5  点击:(686)  评论:(0)  加入收藏
ElasticSearch5.5.1 单台服务器部署多个节点
在单台服务器上部署多个节点,一般主要针对的是学习阶段,正式环境一台服务器只会部署一个节点,以实现分布式效果。下面是在单台服务器部署两个节点的方法。1、将安装好的elastic...【详细内容】
2022-07-06  Search: H5  点击:(441)  评论:(0)  加入收藏
微信小程序跳转H5,配置业务域名教程
随着微信小程序的运营场景不断丰富,不少openinstall客户希望通过小程序拓展App落地页下载场景。但由于微信小程序本身的限制,企业主体的小程序必须配置业务域名,才能在web-view...【详细内容】
2022-07-01  Search: H5  点击:(918)  评论:(0)  加入收藏
▌简易百科推荐
京东快递H5项目接入vite实战
本文介绍了如何在开发阶段将vite应用于vue 2.x 工程,从而提高研发的开发体验与效率。主要涉及如何兼容process变量,如何处理 node-sass 与 dart-sass冲突,以及路径别名的兼容处...【详细内容】
2023-03-17  东东程序猿  今日头条  Tags:H5   点击:(232)  评论:(0)  加入收藏
什么是HTML5?HTML5的含义、元素和好处
译者 | 李睿审校 | 孙淑娟HTML5是超文本标记语言(HTML)的第五版,网络浏览器使用它来可视化代码。它在网站功能、网页内容开发等方面有一些改进。 ​HTML的发展 ​在万维网的...【详细内容】
2023-03-16  李睿  51CTO  Tags:HTML5   点击:(262)  评论:(0)  加入收藏
H5直播技术起航
作者:京东科技 吴磊音视频基本概念视频格式就是通常所说的.mp4,.flv,.ogv,.webm等。简单来说,它其实就是一个盒子,用来将实际的视频流以一定的顺序放入,确保播放的有序和完整性...【详细内容】
2023-01-10  京东云开发者  今日头条  Tags:H5   点击:(239)  评论:(0)  加入收藏
Canvas从入门到实战
1、什么是Canvas?HTML5 提供Canvas API,其本质上是一个DOM元素,可以看成是浏览器提供一块画布供我们在上面渲染2D或者3D图形。由于3D绘制上下文(webgl)目前在很多浏览器上兼...【详细内容】
2022-12-24  闪念基因  今日头条  Tags:Canvas   点击:(223)  评论:(0)  加入收藏
网站程序开发使用的html5你了解吗
首先可以肯定,html5(简称h5)将在很多年内成为互联网的主流。那到底什么是h5呢?想了解h5,先要了解它的前身html和被它终结的flash:2000年左右的前端静态网页格式是html的,仅支持ie,n...【详细内容】
2022-09-26  易企优     Tags:html5   点击:(499)  评论:(0)  加入收藏
使用 JavaScript 和 HTML5 Canvas 绘制图表
你将要创造什么在本教程中,我将向您展示如何使用 JavaScript 和画布以饼图和圆环图的形式显示数字信息。什么是饼图?图表是一种统计工具,用于以图形方式表示数值数据。饼图将...【详细内容】
2022-08-31  兴趣编程网  今日头条  Tags:   点击:(505)  评论:(0)  加入收藏
一看就能学会的H5视频推流方案
环境部署1、 配置、安装 Nginx;# ./configure --sbin-path=/usr/local/nginx/nginx --conf-path=/usr/local/nginx/nginx.pid --with-http_ssl_module --with-pcre=/usr/loca...【详细内容】
2022-08-27  音视频开发老舅    Tags:H5   点击:(619)  评论:(0)  加入收藏
H5实时解码音频并播放
音视频的格式是一个有歧义的说法。我们熟知的诸如Flv、Mp4、Mov啥的都是包装格式,可以理解为一种容器,就像一个盒子。里面放到是经过编码的音视频数据,而这些音视频数据都有自...【详细内容】
2022-08-17  音视频开发老舅    Tags:音频   点击:(686)  评论:(0)  加入收藏
实战演示 H5 性能分析
W3C标准是浏览器标准,一般浏览器都支持W3C标准,它规定使用者可以通过api查询性能信息,可借用W3C协议完成自动化H5性能测试。 W3C官网: https://www.w3.org/TR/navigation-timing...【详细内容】
2022-06-06  CeshirenTester    Tags: H5   点击:(329)  评论:(0)  加入收藏
HTML5新特性
①语义化标签,可以让页面有更加完善的结构,让页面的元素有含义,同时利于被搜索引擎解析,有利于SEO,主要标签包括下面的标签:html5新的常用标签②增强型表单可以通过input的type属...【详细内容】
2022-05-07  Celinf    Tags:HTML5   点击:(415)  评论:(0)  加入收藏
站内最新
站内热门
站内头条