vlc+flv.js 攝像頭 H5 直播

冬先生發表於2021-07-23
JSH5

背景

業務需求：用最短的時間搞定攝像頭直播到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、效果

相關文章