光電視訊流在html5中展示
版權宣告：本文為博主原屙文章，喜歡你就擔走。 https://blog.csdn.net/leftfist/article/details/86699371
光電，其實是一種類似攝像頭的裝置，有點怪異，呵？它比一般的攝像頭看得清，看得遠，還有紅外功能。
如何在頁面中展示它？
三個步驟：
1、將光電視訊流轉碼
2、網站要支援轉碼後的視訊檔案
2、HTML5中播放視訊檔案
邊轉邊播放。
一、將光電視訊流轉碼
為什麼要轉碼？
當然是不轉的話，瀏覽器無法識別咯。
轉成啥？怎麼轉？
轉成hls。用一個ffmepg的東東轉。
具體步驟：
1、下載一個ffmpeg，解壓，設定環境變數path
下載： http://ffmpeg.zeranoe.com/builds/
下載並解壓FFmpeg資料夾，配置環境變數：在“Path”變數原有變數值內容上加上d:\ffmpeg\bin，驗證：ffmpeg -version 出現版本號則成功。
2、執行命令，視訊流轉換格式並儲存在硬碟
ffmpeg -rtsp_transport tcp -i "rtsp://賬號:密碼@IP:埠/路徑" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 D:/soft/nginx/html/hls/test.m3u8
上述命令中， -rtsp_transport tcp 這個比較關鍵，因為下載的這個版本似乎不支援udp，要改用tcp。參考文章中沒有給出該引數。而且這個命令似乎要寫在前面，緊跟ffmpeg命令才有效。
同時，這個命令好像是長期執行的，如果不喊停，理論上會一直執行下去。不過應該也不會導致硬碟撐爆，因為這裡指定了15塊？
ffmpeg有許多引數，可以用 ffmpeg -help 來檢視。
二、網站要支援這個視訊格式
轉碼，視訊流生成了視訊檔案：***.m3u8。
參考文章中用nginx來做WEB伺服器。我們就試試這個nginx。大名鼎鼎，如雷貫耳的nginx。哎，它不是用於做反向代理嗎？好像在這裡，我們只用來做WEB伺服器。
nginx.exe -c D:\soft\nginx\conf\nginx.conf
按照參考文章的指導去做。但有一些坑需要提醒一下：
1、nginx不能位於有中文的路徑裡
2、執行nginx，要用管理員身份執行
三、HTML5中播放
轉碼，視訊流生成了視訊檔案：***.m3u8。html5也並不天然支援這種格式。還要一些JS外掛的支援。
下載 hls.js
<!DOCTYPE html>
<html>
<head>
<script src="dist/hls.js"></script>
</head>
<body>
<center>
<video height="600" id="video" controls></video>
</center>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://192.168.0.98:20000/hls/test.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'http://192.168.0.98:20000/hls/test.m3u8';
video.addEventListener('canplay',function() {
video.play();
});
}
</script>
</body>
</html>
你是光，你是電，你是唯一的神話，我只愛你、you are my super star。
參考文章：