HTML5 视频流控制与传输之RSTP+HTML5+HLS+RTMP

海康等普通网络摄像头均仅支持RSTP实时流传输协议,但是此协议各大浏览器均不直接支持,需要采用N中复杂的架构,才可以支持浏览器端显示实时流。

今天中午发现了HTML5开始主推HSL(HTTP Live Streaming)流传输协议,经过短暂学习后,发现此种流传输完全可以替代以前架构,应用到目前的产品中,所有进行了测试。

总则:实时性要求不高的(10~90秒)应用采用HTML5+HLS的方式,实时性要求高的(<10S)采用RTMP+HTML5方式

一、技术架构:

1、采用海康网络摄像头捕获视频,并转成RTSP流。

rtsp://user:password@192.168.1.1:554/h265/ch1/main/av_stream

2、采用RTSP转HLS工具,实时转编码HLS流。(目前使用91flv工具,但此工具免费版仅支持30min实时流。单最终会使用ffmpeg直接转流。详见:https://lists.ffmpeg.org/pipermail/ffmpeg-user/2013-November/018558.html)

3、采用nginx反代理,规范化传输。(此步骤可不需要。但是普通hls server不支持跨域,需要nginx添加cors头,支持其跨域)

server
{
    listen 80;
    server_name live.dev.claves.me;
    location / {
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://192.168.1.1:80;
        add_header  Access-Control-Allow-Origin '*' ; 
    }
   
}

 

4、使用ngrok内网穿透,支撑外网访问。

5、编写html5,实现流媒体传输与控制。

二、HTML5+HLS

 

三、HTML5+RTMP

1、流程

  1. 摄像头捕获RTSP流
  2. ffmpeg转rtsp流为rtmp流,发送至red5服务器
  3. red5流媒体服务器进行分发

https://github.com/Red5/red5-server

https://www.cnblogs.com/lidabo/p/7325037.html

四、百度播放器

http://cyberplayer.bcelive.com/demo/new/index.html

参考资源:

http://cyberplayer.bcelive.com/demo/new/index.html

https://github.com/video-dev/hls.js

https://github.com/videojs/video.js

http://videojs.com/plugins/

http://www.91flv.com/

https://github.com/EasyDSS/EasyNVR

https://github.com/xiongziliang/ZLMediaKit

https://lists.ffmpeg.org/pipermail/ffmpeg-user/2013-November/018558.html