HTML5實現IP Camera網頁輸出
這兩天做OA項目。有一個要通過IP Camera將視頻流輸出到瀏覽器端的模塊。盡管如今買到的攝像頭都會提供瀏覽器和client的實現，可是一般來說都是僅僅支持IE瀏覽器。通過安裝ActiveX控件的方式來實現的。IE實在太爛，而且僅僅能用IE還得安裝控件。對用戶體驗非常不好，而且最新的Windows也拋棄了現有的IE瀏覽器，叫做Edge，取消了對ActiveX的支持，於是考慮到HTML5新支持的video標簽來實現這項功能。
一、本機攝像頭案例
首先上一個用筆記本電腦的攝像頭輸出的案例。代碼例如以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="run">開啟網絡攝像頭</button><Br/>
<video id="webcam"></video>
</body>
</html>
<script type="text/javascript"> navigator.getUserMedia || (navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia); if (!navigator.getUserMedia) { alert("您的瀏覽器不支持"); } var btn = document.getElementById('run'); btn.onclick = startWebcam; function startWebcam(e) { navigator.getUserMedia({ video: true, audio: true }, onSuccess, onError); function onSuccess(stream) { var video = document.getElementById('webcam'); if (window.URL) { video.src = window.URL.createObjectURL(stream); } else { video.src = stream; } video.autoplay = true; } function onError() {} } </script>
這個demo主要是用了navigator.getUserMedia對象。執行后開以看到聲音和圖像，效果不錯，只是不支持IE瀏覽器。下個月最新的Edge應該是支持的。
二、IP Camera
攝像頭呢是從淘寶上買的，廉價的幾十塊錢，貴的幾百，由於是測試就買了個廉價的。有一點，廉價的可能不帶電源，自己注意下。通用的12V倒也好解決；另一點。一定要支持RTSP協議。這個能夠找技術支持問，應該是大多數的有線攝像頭支持，無線不支持。 1.先把攝像頭調通。能夠ping通或者用自帶的client顯示圖像，有問題能夠打技術支持電話。 2.由於須要輸出流視頻，牽扯到一個轉換格式的問題，須要下載vlc軟件。 3.打開VLC。“媒體”-》“流”-》“網絡”。例如以下圖：  4.地址欄里輸入RTSP協議的地址。這個地址找廠家的技術支持要就可以，我的是長這個樣子的，預計大家得也差點兒相同 rtsp://192.168.1.10:554/user=admin&password=&channel=1&stream=0.sdp?
real_stream 5.依次點擊“串流”-》“Next”，選擇“HTTP”，點擊“加入”，路徑輸入/stream。一會兒會用到 6.接下來選擇輸出格式OGG。例如以下圖所看到的：  7.再點擊“Next”-》“Stream”，當播放器標題欄顯示Streaming或者流的時候就證明正在轉換了，跟大家下載的版本號不同。可能會有某些選項翻譯不當的問題，相信大家的英語能力。 8.開啟自己的server，這些代碼必須在server下執行，不能通過瀏覽器打開的方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<video controls>
<source src="http://localhost:8080/stream" type="video/ogg" />
Your browser does no support the video tag.
</video>
</body>
</html>執行一下點擊播放就OK了。另一點須要提到的是。由於轉換所以會有延時，我這里標清的攝像頭的話大約是4秒。高清的大約就是8秒左右了。視硬件而定，另外還有由於轉換的存在CPU會占用非常多資源，我這里是I7 4760HQ的處理器，大約占用了17%左右，假設做多個視頻源的話就須要考慮考慮了。事實上VLC提供命令行的方式操作，過兩試一下然后再來更新文章。由於我們這個項目也須要多視頻源。配置麻煩的話肯定是不可取的，另一個關鍵詞叫做“WebRTC”。這個也還沒有搞清楚。過兩天看看。
另附，我的幾篇參考文章：
[這里寫鏈接內容](http://blog.csdn.net/luoqindong/article/details/24632509)
[這里寫鏈接內容](http://www.codeproject.com/Articles/800910/Broadcasting-of-a-Video-Stream-from-an-IP-camera-U)
[這里寫鏈接內容](http://blog.sina.com.cn/s/blog_69a04cf401016gz4.html)
命令行模式已經實現：
vlc -vvv "rtsp://192.168.1.10:554/user=admin&password=&channel=1&stream=0.sdp?real_stream" :sout=#transcode{vcodec=theo,vb=800,acodec=vorb,ab=128,channels=2,samplerate=44100}:http{mux=ogg,dst=:8080/stream} :sout-keep