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. C++模板：欧拉函数

    单个欧拉函数 int eular(int n){ int ret=1,i; for(i=2;i*i<=n;i++) if(n%i==0){ n/=i,ret*=i-1; while(n%i==0 ...

  2. swjtu 2213 A Game About Cards（模拟题）

    题目链接:http://acm.swjtu.edu.cn/JudgeOnline/showproblem?problem_id=2213 思路分析:该问题与约瑟夫问题相似:每次将前n张牌放到队列的最后 ...

  3. beini破解无线

    软件介绍 当你的笔记本有无线网卡却不能上网的时刻,也许你会很焦急. 又或许你的隔壁就有无线网络可以接的时刻,但你却由于米有密码而不能上网.下面我将简介一款可以令你惊讶的软件,奶瓶 有了奶瓶以上疑问都可 ...

  4. Android手机之间通过声音传输信息方法——声波通信（含project代码）

    大家可能都用过支付宝的声波支付.即两个终端同一时候打开该功能,一个终端作为发送端send,一个终端作为接收端get,send将本终端上发出的请求信息依照约定规则的算法进行声音编码,并播放出来,get端 ...

  5. Sharepoint 2013 启用搜做服务

    参考文件: http://www.cnblogs.com/jianyus/archive/2013/02/04/2891801.html 1. 创建好网站集,进入网站内容,点击搜素,会出现如下错误:( ...

  6. 使用超链接跳转页面（GridView）

    1. the html markup <div> <asp:GridView ID=" OnPageIndexChanging="GridView1_PageIn ...

  7. JQuery隔行变色

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  8. AnsiString 在 Delphi 中虽然不可用，但是，在 C++ 中可以用

    [C++] C++ Builder 中 Ansi 编码的字符串在Android/iOS程序中显示的问题 呃,这个问题说起来,其实也不麻烦,C++ Builder 本身在 TEncoding 做了处理, ...

  9. 禁用 Windows Azure 网站中的 ARR 实例关联

    编辑人员注释: 本博客文章由 Windows Azure 网站团队的项目经理 Erez Benari 撰写. 在 Windows Azure 网站中设置网站的多个实例是横向扩展网站的绝佳方式,Azur ...

  10. Cloud Foundry中warden的网络设计实现——iptable规则配置

    在Cloud Foundry v2版本号中,该平台使用warden技术来实现用户应用实例执行的资源控制与隔离. 简要的介绍下warden,就是dea_ng假设须要执行用户应用实例(本文暂不考虑ward ...