如何使用视频流媒体服务器支持HTML5直播?

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

H5 到底能不能做视频直播?

当然可以了,H5火了这么久,涵盖了各个方面的技术,我们的流媒体服务器就可以支持H5的直播。

如何使用视频流媒体服务器支持HTML5直播?_第1张图片

 

对于视频录制,可以使用强大的 WebRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音对话或视频对话的技术,缺点是只在PC的chrome上支持较好,移动端支持不太理想。

简单的推流服务器搭建,由于我们上传的视频流都是基于rtmp协议的,所以服务器也必须要支持 rtmp才行,大概需要以下几个步骤:

1 安装一台 nginx 服务器。

2 安装 nginx 的 rtmp 扩展,目前使用比较多的是https://github.com/arut/nginx-rtmp-module。

3 配置 nginx 的 conf 文件:

 rtmp {  

     server {  

         listen 1935;  #监听的端口

         chunk_size 4000;  


         application hls {  #rtmp推流请求路径
             live on;  
             hls on;  
             hls_path /usr/local/var/www/hls;  
             hls_fragment 5s;  
         }  
     }  
 }  

4 重启 nginx,将 rtmp 的推流地址写为 rtmp://ip:1935/hls/mystream,其中 hls_path 表示生成的 .m3u8 和 ts 文件所存放的地址,hls_fragment 表示切片时长,mysteam 表示一个实例,即将来要生成的文件名可以先自己随便设置一个。更多配置可以参考:https://github.com/arut/nginx-rtmp-module/wiki/

根据以上步骤基本上已经实现了一个支持 rtmp 的视频服务器了。

对于视频播放,可以使用 HLS(HTTP Live Streaming)协议播放直播流,iOS 和 Android 都天然支持这种协议,配置简单,直接使用 video 标签即可。

简单来说,直接使用 video 标签即可播放 hls 协议的直播视频:

  

需要注意的是,给 video 标签增加 webkit-playsinline 属性,这个属性是为了让 video 视频在 ios 的 uiwebview 里面可以不全屏播放,默认 ios 会全屏播放视频,需要给 uiwebview 设置 allowsInlineMediaPlayback=YES。业界比较成熟的videojs可以根据不同平台选择不同的策略,例如 iOS 使用 video 标签,pc 使用 flash 等。

你可能感兴趣的:(EasyNVR功能,流媒体服务器,视频流媒体直播,安防监控,网页直播,HTML5直播)