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流媒体服务器进行分发

四、百度播放器

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

参考资源：

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

http://videojs.com/plugins/

http://www.91flv.com/