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

◊作者:周超

H5 视频直播推流解决方案

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

环境部署:

1、 配置、安装 Nginx;

  1. # ./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/
  2. # make
  3. # make install
  4. # /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf  //启动Ngnix
  5. # netstat -ano | grep 80

2、安装扩展 Nginx-rtmp-module

  1. # ./configure --add-module=/usr/local/src/nginx-rtmp-module-master --with-openssl=/usr/local/openssl/
  2. # make
  3. # make install
  4. # vim /usr/local/ngnix/conf/ngnix.conf
  5. include /usr/localcinx-rtmp-module-master/testinx.conf;
  6. # vim /usr/localcinx-rtmp-module-master/testinx.conf
  7. rtmp {
  8.     server {
  9.         listen 1935;
  10.         application myapp {
  11.             live on;
  12.             #record keyframes;
  13.             #record_path /tmp;
  14.             #record_max_size 128K;
  15.             #record_interval 30s;
  16.             #record_suffix .this.is.flv;
  17.             #on_publish http://localhost:8080/publish;
  18.             #on_play http://localhost:8080/play;
  19.             #on_record_done http://localhost:8080/record_done;
  20.         }
  21.             application hls {
  22.             live on;
  23.             hls on;
  24.             hls_path /tmp/hls;
  25.             hls_fragment 10s;     #每个视频切片的时长。
  26.             hls_playlist_length 60s;  #总共可以回看的事件,这里设置的是1分钟。
  27.             #hls_continuous on; #连续模式。
  28.             #hls_cleanup on;    #对多余的切片进行删除。
  29.             #hls_nested on;     #嵌套模式。
  30.         }
  31.     }
  32. }
  33. http {
  34.     server {
  35.         listen      8080;
  36.         location /stat {
  37.             rtmp_stat all;
  38.             rtmp_stat_stylesheet stat.xsl;
  39.         }
  40.         location /stat.xsl {
  41.             root /usr/local/src/nginx-rtmp-module-master/;
  42.         }
  43.         location /control {
  44.             rtmp_control all;
  45.         }
  46.         location /rtmp-publisher {
  47.             root /usr/local/src/nginx-rtmp-module-master/test;
  48.         }
  49.             location /hls {
  50.             #server hls fragments
  51.             types{
  52.                 application/vnd.apple.mpegurl m3u8;
  53.                 video/mp2t ts;
  54.             }
  55.             #alias /tmp/app;
  56.             root /tmp;
  57.             expires -1;
  58.         }
  59.         location / {
  60.             root /usr/local/src/nginx-rtmp-module-master/test/rtmp-publisher;
  61.         }
  62.     }
  63. }
  64. # /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
  65. # netstat -ltn  #查看端口的监听情况

3、安装 ffmpeg

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

至于ffmpeg是啥?可以查看官网http://ffmpeg.org/

模拟推流:

1、推流流程图示。

H5直播推流

2、用 flv 视频文件模拟 RTMP 视频流:

  1. # ffmpeg -re -i test.flv -vcodec copy -acodec copy -f flv rtmp://ip:1935/myapp/mystream

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

3、用 mp4 视频文件模拟 HLS 视频流:

  1. ffmpeg -re -i test.mp4 -c copy -f flv rtmp://ip:1935/hls/mystream

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

附HLS 的请求流程:

h5直播推流

H5 如何在页面上播放视频?

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

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

原文地址:https://cloud.tencent.com/developer/article/1020503

  • 版权声明: 本文源自 腾讯云, 于7年前,由整理发表,共 3157字。
  • 原文链接:点此查看原文
你想把广告放到这里吗?

发表评论

您必须 登录 才能发表留言!