HTML5实现IP Camera网页输出

2019年9月14日 172次阅读 来源: 景初

HTML5实现IP Camera网页输出

这两天做OA项目，有一个要通过IP Camera将视频流输出到浏览器端的模块。虽然现在买到的摄像头都会提供浏端的实现，但是一般来说都是只支持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>

《HTML5实现IP Camera网页输出》

这个demo主要是用了navigator.getUserMedia对象，运行后开以看到声音和图像，效果不错，不过不支持IE浏览器， 下个月最新的Edge应该是支持的。

二、IP Camera

摄像头呢是从淘宝上买的，便宜的几十块钱，贵的几百，因为是测试就买了个便宜的，有一点，便宜的可能不带电源，自己注意下，通用的12V倒也好解决；另一点，一定要支持RTSP协议，这个可以找技术支持问，应该是大多数的有线摄像头支持，无线不支持。
1.先把摄像头调通，可以ping通或者用自带的客户端显示图像，有问题可以打技术支持电话。
2.因为需要输出流视频，牵扯到一个转换格式的问题，需要下载vlc软件。
3.打开VLC，“媒体”-》“流”-》“网络”，如下图：
《HTML5实现IP Camera网页输出》
4.地址栏里输入RTSP协议的地址，这个地址找厂家的技术支持要即可，我的是长这个样子的，估计大家得也差不多
rtsp://192.168.1.10:554/user=admin&password=&channel=1&stream=0.sdp?real_stream
5.依次点击“串流”-》“Next”，选择“HTTP”，点击“添加”，路径输入/stream，一会儿会用到
6.接下来选择输出格式OGG，如下图所示：
《HTML5实现IP Camera网页输出》
7.再点击“Next”-》“Stream”，当播放器标题栏显示Streaming或者流的时候就证明正在转换了，跟大家下载的版本
不同，可能会有某些选项翻译不当的问题，相信大家的英语能力。
8.开启自己的服务器，这些代码必须在服务器下运行，不能通过浏览器打开的方式：

<!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
    原文作者：景初
    原文地址: https://segmentfault.com/a/1190000003095702
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞