HTML5实现IP Camera网页输出

HTML5实现IP Camera网页输出

大家好,又见面了,我是全栈君。

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
这个demo主要是用了navigator.getUserMedia对象。执行后开以看到声音和图像,效果不错,只是不支持IE浏览器。下个月最新的Edge应该是支持的。

二、IP Camera

摄像头呢是从淘宝上买的,廉价的几十块钱,贵的几百,由于是測试就买了个廉价的。有一点,廉价的可能不带电源,自己注意下。通用的12V倒也好解决;另一点。一定要支持RTSP协议。这个能够找技术支持问,应该是大多数的有线摄像头支持,无线不支持。
1.先把摄像头调通。能够ping通或者用自带的client显示图像,有问题能够打技术支持电话。
2.由于须要输出流视频,牵扯到一个转换格式的问题,须要下载vlc软件。
3.打开VLC。“媒体”-》“流”-》“网络”。例如以下图:
![VLC](//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](//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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/116104.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 红帽linux中安装oracle数据库_红帽系统下载

    红帽linux中安装oracle数据库_红帽系统下载Linux下安装Oracle系统最好是1G内存,2G的swap空间,硬盘至少需要4.5G空间。至少环境在LinuxServerrelease5.3以上如果是LinuxServerrelease5.1,改装oracle10.2g吧一、查看Linux版本[root@localhost~]#cat/etc/issueRedHatEnterpriseLinuxServerrel…

  • 初识AngularJS

    初识AngularJS初识AngularJS一、AngularJS是什么?AngularJS,简称:ng它是一款非常优秀的前端高级JS框架由MiskoHevery等人创建2009年被Google公司收购,用于其多款产品有一个全职的开发团队继续开发和维护这个库这个框架可以轻松构建SPA应用程序通过指令扩展HTML,通过表达式将数据绑定到HTML(基本不需要DOM操作)二、SPA应用程序简单介绍单页面应用

  • rocketmq负载均衡机制_rocketmq topic

    rocketmq负载均衡机制_rocketmq topicProducer发送消息时,会首先获取Topic路由信息(通过本地+注册中心拉取),RocketMQ的架构里有多个Broker服务器,而消息队列也会存在于多个Broker服务器里,所以就需要负载均衡策略来将流量尽可能均匀的打到所有服务器上。本章节就介绍一下RocketMQ中常用的四种负载均衡策略。找到Producer发送消息时选择消息队列的逻辑,在类中定义了方法:进入到方法里:上述代码的类中定义了方法:根据源码可以很清楚地看到,默认策略就是依次选择消息队列进行发送,具体的执行细节如下:如何选一个

    2022年10月13日
  • FAE新手上路_ra上路

    FAE新手上路_ra上路2018年夏天,因为犹豫,最终放弃了一家中意的公司,选择继续留在原公司,这是我到目前为止进入互联网行业做的最错误的决定,网上无数血的教训,同事委婉的劝告,都没改变我跟随新领导的“决心”,另外自己也没有做好换一个新环境的准备,所以就留下来了,换来的是兑现不了的大饼和离职时差点闹开的不堪经历,过去的是是非非我就不作评价了,只是以我的之前的经历告诫各位,一、不要去外包公司。二、提了离职,绝…

    2022年10月28日
  • html5 sexteen,Prosecutors: Berlusconi had sex with teen 13 times

    html5 sexteen,Prosecutors: Berlusconi had sex with teen 13 timesPremierSilvioBerlusconipaidforsexwithanunder-ageMoroccanteen13timesathisvillanearMilan,prosecutorssaidinadocumentfiledTuesdayseekingindictmentsagainstthreeaidesforallege…

  • 完整的java项目_手把手搭建一个完整的javaweb项目

    完整的java项目_手把手搭建一个完整的javaweb项目手把手搭建一个完整的javaweb项目本案例使用Servlet+jsp制作,用MyEclipse和Mysql数据库进行搭建,详细介绍了搭建过程及知识点。下载地址:http://download.csdn.net/detail/qq_23994787/9904842点击下载主要功能有:1.用户注册2.用户登录3.用户列表展示4.用户信息修改5.用户信息删除涉及到的知识点有:1.JDBC2.Ser…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号