HTML5實現IP Camera網頁輸出

時間 2019-12-07

標籤 html5 html 實現 camera 網頁輸出欄目 HTML5 简体版

原文原文鏈接

HTML5實現IP Camera網頁輸出

這兩天作OA項目，有一個要經過IP Camera將視頻流輸出到瀏覽器端的模塊。雖然如今買到的攝像頭都會提供瀏端的實現，可是通常來講都是隻支持IE瀏覽器，經過安裝ActiveX控件的方式來實現的。IE實在太爛，而且只能用IE還得安裝控件對用戶體驗很是很差，而且最新的Windows也拋棄了現有的IE瀏覽器，叫作Edge，取消了對ActiveX的支持，因而考慮到HTML5新支持的video標籤來實現這項功能。javascript

1、本機攝像頭案例

首先上一個用筆記本電腦的攝像頭輸出的案例，代碼以下：html

<!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應該是支持的。java

2、IP Camera

攝像頭呢是從淘寶上買的，便宜的幾十塊錢，貴的幾百，由於是測試就買了個便宜的，有一點，便宜的可能不帶電源，本身注意下，通用的12V倒也好解決；另外一點，必定要支持RTSP協議，這個能夠找技術支持問，應該是大多數的有線攝像頭支持，無線不支持。
1.先把攝像頭調通，能夠ping通或者用自帶的客戶端顯示圖像，有問題能夠打技術支持電話。
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.開啓本身的服務器，這些代碼必須在服務器下運行，不能經過瀏覽器打開的方式：web

<!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.sina.com.cn/s/blog_69a04cf401016gz4.html>
<http://blog.csdn.net/luoqindong/article/details/24632509>
<http://www.codeproject.com/Articles/800910/Broadcasting-of-a-Video-Stream-from-an-IP-camera-U>

命令行模式已經實現：服務器

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。