HTML5实现IP Camera网页输出

来源：互联网发布：网络代理合作协议编辑：程序博客网时间：2024/05/18 16:58

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>

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

二、IP Camera

摄像头呢是从淘宝上买的，便宜的几十块钱，贵的几百，因为是测试就买了个便宜的，有一点，便宜的可能不带电源，自己注意下，通用的12V倒也好解决；另一点，一定要支持RTSP协议，这个可以找技术支持问，应该是大多数的有线摄像头支持，无线不支持。1.先把摄像头调通，可以ping通或者用自带的客户端显示图像，有问题可以打技术支持电话。2.因为需要输出流视频，牵扯到一个转换格式的问题，需要下载vlc软件。3.打开VLC，“媒体”-》“流”-》“网络”，如下图：![VLC](http://img.blog.csdn.net/20150706104220118)4.地址栏里输入RTSP协议的地址，这个地址找厂家的技术支持要即可，我的是长这个样子的，估计大家得也差不多rtsp://192.168.1.10:554/user=admin&password=&channel=1&stream=0.sdp?real_stream5.依次点击“串流”-》“Next”，选择“HTTP”，点击“添加”，路径输入/stream，一会儿会用到6.接下来选择输出格式OGG，如下图所示：![OGG](http://img.blog.csdn.net/20150706104623759)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.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

0 0