HTML5实现IP Camera网页输出

这两天做OA项目。有一个要通过IP Camera将视频流输出到浏览器端的模块。尽管如今买到的摄像头都会提供浏览器和client的实现，可是一般来说都是仅仅支持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通或者用自带的client显示图像，有问题能够打技术支持电话。

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.开启自己的server，这些代码必须在server下执行，不能通过浏览器打开的方式：


<!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实现IP Camera网页输出的更多相关文章

  1. 谢绝艳照门 - 手把手教你把当今很hit的家庭监控IP Camera变得网络安全起来

    IP Camerars现在已经越来越便宜了,很多人都可以买得起,并且大家也乐意去购买,因为它们的确是用来监控你在高房价的中国购买的爱巢的非常便利的设备.当然,配套的监控应用也层出不穷,从通用的家庭安全 ...

  2. 15款免费的 HTML5/CSS3 响应式网页模板

    如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...

  3. 【HTML5+MVC4】xhEditor网页编辑器图片上传

    准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...

  4. EasyN IP Camera

    Android App:  "EasyN P" How to access EasyN HD ip camera web interface by browser: http:// ...

  5. 基于html5实现的愤怒的小鸟网页游戏

    之前给大家分享一款基于html5 canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏.这款游戏适用浏览器:360.FireFox.Chrome.Safar ...

  6. CROW-5 WEB APP引擎商业计划书（HTML5方向）-微信网页版微信公众平台登录-水仙谷

    CROW-5 WEB APP引擎商业计划书(HTML5方向)-微信网页版微信公众平台登录-水仙谷 CROW-5 WEB APP引擎商业计划书(HTML5方向)

  7. IP Camera 和 Web Camera 差分

    一直以来,,没太注意IP camera 和 Web Camera之间的差,这两个摄像头,昨天晚上.闲来无事Google少数,我们发现,还有两者之间的差异. 1) IP Camera IP Camera ...

  8. 如何使用HTML5的WebSocket实现网页与服务器的双工通信(二)

    本系列服务端双工通信包括两种实现方式:一.使用Socket构建:二.使用WCF构建.本文为使用WCF构建服务端的双工通信,客户端同样使用Html5的WebSocket技术进行调用. 一.创建WCF服务 ...

  9. 如何使用HTML5的WebSocket实现网页与服务器的双工通信(一)

    本系列服务端双工通信包括两种实现方式:一.使用Socket构建:二.使用WCF构建.本文为使用Socket构建服务端的双工通信,客户端同样使用Html5的WebSocket技术进行调用. 一.网页客户 ...

随机推荐

  1. perl5 第二章 简单变量

    第二章 简单变量  by flamephoenix 一.整型 二.浮点数 三.字符串 基本上,简单变量就是一个数据单元,这个单元可以是数字或字符串.一.整型 1.整型   PERL最常用的简单变量,由 ...

  2. opencv-python 学习笔记2：实现目光跟随（又叫人脸跟随）

    如果机器人的脸能随着前方人脸而转动,你会不会觉得这种互动很有意思.年前的时候,学习了一下opencv,通过opencv可以简单的实现人脸跟随.再加上几个舵机控制头部转动,机器人就可以互动了.呵呵 这里 ...

  3. 使用jetty和mongodb实现简易网盘接口

    依赖库: 1,jetty(提供http方式接口) 2,mongodb的java驱动(访问mongodb存取文件) 3,thumbnailator包,进行缩略图生成 4,commons-fileuplo ...

  4. OFbiz--HelloWorld

    上篇博客<OFbiz--简单介绍>我们介绍了OFbiz是什么,以下我们就開始用OFbiz开发我们的第一个程序--HelloWorld. 过程例如以下: 首先在hot-deploy下新建文件 ...

  5. Mini-project # 4 - "Pong"___An Introduction to Interactive Programming in Python"RICE"

    Mini-project #4 - "Pong" In this project, we will build a version of Pong, one of the firs ...

  6. CSS3框架！

    http://usablica.github.io/front-end-frameworks/compare.html?v=2.0

  7. qstring.h赏析

    https://github.com/qtproject/qtbase/blob/dev/src/corelib/tools/qstring.h C:\Qt\Qt5.3.2_min\5.3\mingw ...

  8. [WPF疑难]如何禁用WPF窗口的系统菜单（SystemMenu)

    原文 [WPF疑难]如何禁用WPF窗口的系统菜单(SystemMenu) [WPF疑难]如何禁用WPF窗口的系统菜单(SystemMenu) 周银辉 点击窗口左上角图标时弹出来的菜单也就是这里所说的系 ...

  9. BZOJ 1631: [Usaco2007 Feb]Cow Party

    题目 1631: [Usaco2007 Feb]Cow Party Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 491  Solved: 362[Sub ...

  10. 移植FreeModbus+ModbusMaster+STM32至RT-Thread（3、4阶段）

    一.简介及进展 经过一个多月的努力,目前项目开发已进入最后阶段.虽然比预期时间有些延迟,但也收获不少,边工作边开源的效率确实还有待提高. 简单说下目前的进展吧 1.目前项目已经在Github中开源,大 ...