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. Azure 网站的新增功能：可配置的环境变量

     编辑人员注释:本文章由 WindowsAzure 网站团队的项目经理Erez Benari撰写. Azure最常用的强大功能之一是 XML文档转换 (XDT),通过此功能,您可以在Windows ...

  2. Qtwebkit配置，设置交叉编译环境 - croop520的专栏 - 博客频道 - CSDN.NET

    Qtwebkit配置,设置交叉编译环境 - croop520的专栏 - 博客频道 - CSDN.NET Qtwebkit配置,设置交叉编译环境 分类: Qt Webkit 2012-04-12 15: ...

  3. spring注解controller示例

    依赖库 spring 3.0 配置web.xml文件如下: <?xml version="1.0" encoding="UTF-8"?> <w ...

  4. android service和activity的通讯

    我们须要用下面方式来启动service: </pre><pre name="code" class="java"><span st ...

  5. adb shell 命令

    adb 概述 SDK的Tools文件夹下包含着Android模拟器操作的重要命令adb,adb的全称为(Android Debug Bridge就是调试桥的作用.通过adb我们可以在Eclipse中方 ...

  6. zookeeper集群配置

    zookeeper集群网上demo一大堆,补充一下一些不明白的地方 1 复制2份zookeeper,savle作为备份节点 2.配置zoo.cfg # The number of millisecon ...

  7. AseoZdpAseo.init(this, AseoZdpAseo.INSERT_TYPE)；

    让以后的人知道吧,这就是一个广告包,相当于广告插件.

  8. Fedora 17 安装 完全 指南

    一.了解Fedora 17先来了解一下Fedora吧.它是由Red Hat赞助的一个全球性开源项目,秉承“自由”.“友爱”.“杰出”.“前卫”宗旨. 1.Fedora 17的主要系统改进内核:采用3. ...

  9. BZOJ 1726: [Usaco2006 Nov]Roadblocks第二短路

    1726: [Usaco2006 Nov]Roadblocks第二短路 Description 贝茜把家搬到了一个小农场,但她常常回到FJ的农场去拜访她的朋友.贝茜很喜欢路边的风景,不想那么快地结束她 ...

  10. android一个弹出菜单的动画(二)

    假设做一个弹出的控件,我们能够进行加入view: 写class SatelliteMenu extends FrameLayout private void init(Context context, ...