背景
業務需求：用最短的時間搞定攝像頭直播到Web頁面。因為沒有過這方面經驗，所以走了很多彎路，其實也不算彎路吧，大部分時間花在學習基礎概念，尋找快速方案中。慣性思維想當然的以為找組件，配地址就能搞定的，實際困難點比想象中的多，比如說攝像頭RTSP格式是不能直接到web的、格式轉碼，推流用什么服務、如何解決延遲問題等等。
大佬鏈接奉上：基礎知識 （建議不要放棄本文，繼續往下看，因為我沒有完全使用以上方案，哈哈哈哈。。。嗝）
步驟
言歸正傳，為了實現“快速”的要求，經過摸索我使用了這款軟件：vlc，用來接收攝像頭並以指定格式推流。經過對比m3u8、MP4、Flv格式延遲及前台videojs、flv.js等播放組件對格式支持之后。選中flv格式，及flv.js播放組件。
1、攝像頭測試
本文以海康威視攝像頭為例，地址格式這樣的：rtsp://admin:123456@192.168.1.1:666，自行配置賬號、密碼、ip、端口。
（客戶廠里的攝像頭，原諒我的厚碼。。。）
2、轉碼推流
攝像頭源以flv視頻流格式進行推流
3、nginx
因為推流占用8001端口，web就需要部署在別的端口，直接訪問8001會出現跨域問題，用nginx解決，監聽6702是訪問Web頁面的端口，轉發到本機路徑的index.html，匹配路由video轉發到vlc推流的8001端口
server {
listen 6702;
server_name localhost;
location / {
root C:/Users/Administrator/Desktop/xxx;
try_files $uri $uri/ /index.html;
}
location /video/ {
proxy_pass http://localhost:8001;
}
}
4、拉流播放
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>flv.js</title>
</head>
<body>
<video id="videoElement" controls autoplay muted width="1024" height="576"></video>
<script src="flv.min.js"></script>
<script>
var player = document.getElementById('videoElement');
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://xxx.xxx.x.xxx:6702/video/camera',
isLive: true
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //加載
flvPlayer.play(); //播放
}
</script>
</body>
</html>
5、效果
