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.通用的打印格式  2.格式和局域变量  3.选择值域格式  4.输出值域字符四.输出到 ...

  2. 盘点：移动服务 #AzureChat

    感谢大家帮助我们顺利推出史无前例的 #AzureChat.移动服务和 Notification Hub 是 Windows Azure 平台上令人振奋的服务.我们很高兴能借这次在线讨论的机会,倾听各位 ...

  3. android AChartEngine源代码

    昨天翻自己曾经下过的apache开源project项目,看到一个AChartEnginee看了一下自带的Demo才意识到这个东西的强大.立刻想把源代码down一份,在CSDN上有人挂5分让人下载,实在 ...

  4. js 精美倒计时

    精美倒计时*{ padding:0; margin:0;}.colockbox{width:250px;height:30px;background:url(/jscss/demoimg/201312 ...

  5. Error D8016 '/ZI' and '/Gy-' command-line options are incompatible

    使用vs运行工程时出现错误: Severity Code Description Project File Line Suppression StateError D8016 '/ZI' and '/ ...

  6. git配合tortoiseGit的基础使用

    转载自:http://www.cnblogs.com/ssor/archive/2012/02/04/2337823.html 一定要自己写出来才能牢记,所以我来写一下 git确实比svn好用的多了, ...

  7. （Problem 47）Distinct primes factors

    The first two consecutive numbers to have two distinct prime factors are: 14 = 2  7 15 = 3  5 The fi ...

  8. （Problem 22）Names scores

    Using names.txt (right click and 'Save Link/Target As...'), a 46K text file containing over five-tho ...

  9. Xamarin.Android开发实践（一）

    原文:Xamarin.Android开发实践(一) 一.准备工作 1.创建一个空的解决方案,并命名为Phoneword 2.右击解决方案 新建->新建项目 并命名为Phoneword_Droid ...

  10. java学习之线程池的实现

    package com.gh.threadpoor; import java.util.concurrent.ExecutorService; import java.util.concurrent. ...