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