HTML5实现IP Camera网页输出 分类: HTML5 2015-07-06 10:56 262人阅读 评论(0) 收藏
2015-07-06 10:56
591 查看
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主要是用了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_stream 5.依次点击“串流”-》“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
相关文章推荐
- html5游戏开发实战-----大家来找茬
- 分享3一个博客HTML5模板
- html5 java多图片上传
- HTML5新增的8类INPUT输入类型介绍
- 10款优秀的 HTML5 动画工具
- html5 canvas 实现一个简单的叮当猫头部
- HTML5本地存储之Web Storage篇
- html5 canvas 实现一个简单的叮当猫头部
- H5版俄罗斯方块(3)---游戏的AI算法
- 基于HTML5气3D仿真培训系统
- HTML5开发之获取设备的地理坐标
- HTML5 history
- HTML5 Canvas 获取网页的像素值。
- HTML5 Canvas 获取网页的像素值。
- 提高HTML5 canvas性能的几种方法(转)
- H5大会之后,未来指向何方?
- HTML5 Canvas简简单单实现手机九宫格手势密码解锁
- 10个最常见的 HTML5 面试题及答案
- html5开发之viewport使用
- html5 学习笔记