精华内容
下载资源
问答
  • 在网页上实现大华视频监控摄像头在线 1.编写代码 2.设置插件地址
  • 详见博客“h5无插件 RTSP 摄像头在线播放(用海康摄像头测试)”
  • Flex实现Camera摄像头在线拍照功能
  • flash调用摄像头在线拍照_支持ie8.zip
  • web页面在线照相,在线调用客户端摄像头进行拍照,同时支持手机登陆网页调用手机摄像头进行拍照,目前测试用的chrome浏览器,其他的暂时没有测试,欢迎大家提意见,后期会持续更新
  • 网页无插件RTSP 摄像头在线播放为什么要求无插件1,flv.js实现2,flv.js的利弊延迟吃资源对网络要求高流可复用对声音处理比较麻烦3,webrtc的利弊网络相关的资料少延迟低不吃资源总结项目中两者的使用视频对比 ...

    为什么要求无插件

    谷歌浏览器2020年12月将不再支持Flash(前不久…)flash插件已经逐步被替代,另外安装插件比较麻烦,用户体验其实不好,为了实现网页无插件播放ipc(网络摄像头)的视频该怎么办呢?我这里有两种方法:1,通过使用flv.js实现 2,通过使用webrtc实现 下面讲一下两种技术的利弊和实现的结果。网络上现在相关的资料不是很多,现在写一下分享一下经验(这里使用的是大华摄像头,大华一键报警,海康一键报警),文章最后有两种方案视频对比。

    1,flv.js实现

    这里指哔哩哔哩(Bilibili)开源的flv.js,后端使用ffmpeg将摄像头的rtsp流进行转码,然后将http-flv的链接返回给前端,前端通过使用开源的flv.js播放这个http-flv链接即可实现网页播放。

    2,flv.js的利弊

    延迟

    flv,js目前使用的比较多,相关资料比较多,比较容易上手,但在搭建结束后发现延迟稍高(2s左右),实际这个延迟已经很不错了,但是和想要的效果还是有点差距,在控制球型摄像机转动时总是慢半拍的感觉(有点憨憨的感觉233)下面会有视频演示。

    吃资源

    这个不是最致命的,关键是,使用ffmpeg在进行转码时,比较吃cpu和带宽,我笔记本是8代i5,在对一个摄像头进行转码时,cpu就高达70%,虽然后面对命令进行了优化,但是一直比较高,摄像头比较多的情况下可能比较难顶

    对网络要求高

    另外,在我们实验室中,遇到下午网络使用比较多的情况下,拉出的流极易丢包(但其他时段网比较好的情况下,比较流畅,没有卡顿),在网页上的表现就是一卡一卡,然后转半天…,体验十分糟糕,虽然后面在ffmpeg转码加上了“-rtsp_transport tcp”,使得情况有些好转,但是还是非常的卡!一直在转圈圈。只能说非常不理想。这些迫使我们没法使用flv,js,必须尝试下其他技术。

    流可复用

    如果一用户正在设备上查看摄像头视频,另一用户也请求了同一摄像头的视频,这时程序应进行判断,不需重复推流,直接将flv链接返回即可,避免对计算机资源的浪费,另外,用户关闭视频页面时,后端也要将其推流进程结束。

    对声音处理比较麻烦

    视频方面直接将rtsp流进行转码,那么音频呢(一键报警需要音频)?这个在当时也比较棘手,处理这个用了很长时间,使用的是pipe,但网上资料少之又少,在对ffmpeg进行转码时,两端为pipe,延迟较小,但相比与fmpeg操作文件和rtsp流的这种情况要麻烦一些,不够实现后声音延迟很小。报警器的声音发到网页时,通过rtsp流携带,但网页端的声音发回报警器时,需要使用ffmpeg对其进行转码(前端发的是webm格式的数据包,后端在拿到数据包后进行转码,然后通过sdk发给报警器即可实现)

    3,webrtc的利弊

    网络相关的资料少

    webrtc和flv.js相比,资料少的可怜,如果使用这一方案,有需要去钻研学习,消耗的时间成本较高,但是效果比较出众,网页上播放非常完美。

    延迟低

    使用webrtc,延迟极低,甚至比大华sdk中的demo还快。WebRTC,名称源自网页即时通信(英语:Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准。 real-time即体现出他在延迟方面的表现。目前主流浏览器都支持,并且微信小程序中也可以使用webrtc。兼容性很不错。

    不吃资源

    使用webrtc,不需要对流进行转码,这点就很好的避免了以后请求过多服务器顶不住的情况。并且也支持网页在播放视频的同时播放音频(海康一键报警已测)体验很好。

    总结

    如果,项目要求不高的情况下,使用flv.js也可以,上手比较容易。若是在延迟,资源等几个方面要求比较高的情况下,建议使用webrtc。测试时可以下vlc,恒星播放器等进行测试。想知道推出的流能不能再在flv.js中播放,可以使用 **http://bilibili.github.io/flv.js/demo/**这个链接进行测试。

    项目中两者的使用

    关于flv.js我是使用了一个springboot项目,向前端透出接口
    例如
    flv.js接口
    可以看到我写的接口中包含的一些参数,通过这些参数进行拉流转码。
    而webrtc我是需要首先调用add/ip地址/@dh(或者@hk)这个接口先将这个摄像头添加进去,然后调用play/ip地址来进行播放
    webrtc相关接口

    视频对比

    大华sdk,webrtc,flv.js三者延迟对比
    webrtc和北京时间对比
    flv.js和北京时间对比
    通过上面对比可以发现webrtc甚至比大华sdk速度还要快,并且支持音频(视频中没有展示),至此,项目中的音视频拉流播放算是结束了,前端将其封装进组件里也测试通过了。总的来说webrtc的效果很惊艳,想想现在央视新闻在连线记者时仍需要很长时间才有回应,我认为像这样优秀的技术在音视频方面应该更快的得到推广和使用。
    希望文章对也在做相关项目的你有所帮助。

    展开全文
  • 浏览器调用前后摄像头实现在线拍照,兼容谷歌,火狐,360,IE等大部分浏览器;实际项目中使用的代码,可以用于采集照片,人脸识别!
  • 某些摄像头(如宇视)要求发送teardown报文。 for (let session in player.client.clientSM.sessions) { await player.client.clientSM.sessions[session].sendTeardown(); } 在收发数据catch到Exception后...

    第一次写博客,留个脚印先。

    问题描述:

    用支持html5的浏览器,不安装插件,能够播放rtsp协议的视频。

    可选技术路线:

    1. nodejs + ffmpeg + jsmpeg 

    这个路线我没有亲测,有一个地方不太优雅,就是要调用ffmpeg进程进行视频重编码到mp1,有网友认为不适合在生产环境下使用。

    2. streamedian.js + streamedian server

    streamedian 是开源的,自带rtsp协议解析和h264视频格式播放功能,在github上有, streamedian server 可以从www.streamedian.com网站上下载,免费版只支持本机播放,怎么付费网站也没写。

    3. 浏览器安装vlc插件

    vlc在chrome 41以上的版本用不了,属于flash一类在网页上面将被淘汰的东西,并且要求用户都装插件也不太方便。

    搞了4天,最后我选了streamedian.js作为前端,自己写一个服务替换streamedian server

    方案构成:

    streamedian.js + websocket server(主要嫁接websocket 与 rtsp通讯)

    websocket server: 采用ASP.NET Core websocket库,其中middleware架构学习了https://radu-matei.com/blog/aspnet-core-websockets-middleware/

    rtsp通讯:由于streamedian.js自带了rtsp报文解析,因此服务端主要是解析建立双通道的RTSP报文,一个是INIT,一个是JION。INIT是控制报文使用的websocket链接,JOIN是数据报文(RTP)使用的websocket链接,两者都关联1个RTSP socket链接。

    再就是当接受rtsp报文时需要根据报文内容分流为数据报文和控制报文。

    关于rtsp的客户端代码实现主要参考了github上的sharprtsp,但这个代码性能实在不行。还有一个codeproject上的net7mma对视频流解析实现的比较完善,但代码过于复杂且没什么例子,对我这个方案借鉴意义不大。

    代码实现:

    WebSocketMiddleware.cs 通用的websocket架构,复制过来的;

    RtspProxy.cs 当收到报文时区分数据(以$字节开头)、控制,分别入队;

    CameraWebSocketHandler.cs 主要处理websocket接受转发给rtsp,以及rtsp队列出队转发给websocket。

    性能优化考虑:

    1.socket读取后不要直接转发,入队缓冲,以免堵塞rtsp流;

    2.CameraWebSocketHandler 采用异步编程;

    3.每次出队多组报文,减少lock造成的性能损失。

    代码下载:

    网盘:https://pan.baidu.com/s/1qkyWGCyrAER0DYYBwww2YA 提取码: itkt 

    CSDN: https://download.csdn.net/download/xhydongda/10761929

    关闭websocket:

    某些摄像头(如宇视)要求发送teardown报文。

    for (let session in player.client.clientSM.sessions) {
      await player.client.clientSM.sessions[session].sendTeardown();
    }

    在收发数据catch到Exception后调用await socket.CloseOutputAsync()关闭websocket链接

    注意:await socket.CloseAsync()在目前的asp.net core2.1和2.2 preview版本有bug,会抛出没有发送关闭握手异常。。

    展开全文
  • 网络摄像头,打开网页调用电脑摄像头
  • 使用手机摄像头在线阅读赛博朋克 2077 黑客小游戏的详细信息。 仅客户端 JS。 使用 OpenCV.js 和数学查找代码矩阵,校正相机视角并通过 Tesseract OCR (.js) 运行每个代码矩阵列。 发现列比行或整个块更准确。 ...
  • //用户拒绝使用,或者没有摄像头 Devicestate.catch(function(err) { console.log(err.name); }); }); //002.点击拍照按钮 $('#camera').click(function() { //视频转换到canvs ...
    <!DOCTYPE html>
    
    <html>


    <head>
    <meta charset="utf-8">
    <title>人脸采集</title>
    <script src="jquery.min.js"></script>
    </head>


    <body>
    <video src="" id="video"></video>


    <button id="rec">开始录制</button>


    <button id="camera">拍照</button>
    <!--canvs绘制-->
    <canvas width="640" height="480" id="outrec"></canvas>
    <!--base64绘制-->
    <img id="imgvideo" style="display:none;" width="640" height="480" src="" />


    <script type="text/javascript">
    var video = document.getElementById("video"); //视频dom元素


    //001.开启摄像头
    $('#rec').click(function() {
    //视频获取
    var Devicestate = navigator.mediaDevices.getUserMedia({
    video: true
    })


    Devicestate.then(function(mediaStream) {


    video.src = window.URL.createObjectURL(mediaStream);
    console.log(mediaStream)
    video.onloadedmetadata = function(e) {
    video.play();
    };


    });


    //用户拒绝使用,或者没有摄像头
    Devicestate.catch(function(err) {
    console.log(err.name);
    });


    });


    //002.点击拍照按钮
    $('#camera').click(function() {
    //视频转换到canvs
    var outrec = document.getElementById("outrec");
    var outreccon = outrec.getContext("2d");
    outreccon.drawImage(video, 0, 0, 640, 480);


    var img = outrec.toDataURL("image/jpeg", 0.5)


    $('#imgvideo').attr('src', img);


    // 调用方式
    // 参数一: 选择器,代表canvas
    // 参数二: 图片名称,可选
    downloadCanvasIamge('#outrec', 'imgvideo');
    //关闭摄像窗口页面
    setTimeout(function(){
    custom_close();
    },1100);

    });
    // 下载Canvas元素的图片
    function downloadCanvasIamge(selector, name) {
       // 通过选择器获取canvas元素
       var canvas = document.querySelector(selector)
       // 使用toDataURL方法将图像转换被base64编码的URL字符串
       var url = canvas.toDataURL('image/jpeg')
       // 生成一个a元素
       var a = document.createElement('a')
       // 创建一个单击事件
       var event = new MouseEvent('click')
       
       // 将a的download属性设置为我们想要下载的图片名称,若name不存在则使用‘下载图片名称’作为默认名称
       a.download = name || '下载图片名称'
       // 将生成的URL设置为a.href属性
       a.href = url
       
       // 触发a的单击事件
       a.dispatchEvent(event)
    }
    //关闭摄像窗口页面
    function custom_close(){
    if(confirm("摄像拍照成功,确认是否关闭本窗口")){
    //delete_file();
    window.opener=null;
    window.open('','_self');
    window.close();
    }else{


    }
    }
    //关闭窗口之后删除下载的图片文件,ActiveXObject对象只能在IE浏览器创建
    /*function delete_file(){
    alert("删除文件");
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var imgHandle = fso.GetFile("C:\\Users\\yuzhangwei\\Downloads\\imgvideo.jpg"); 
    imgHandle.Delete();
    }*/


    </script>
    </body>


    </html>
    展开全文
  • h5无插件 RTSP 摄像头在线播放代码2

    热门讨论 2018-11-03 12:05:21
    参考博客https://blog.csdn.net/xhydongda/article/details/81208192#commentsedit
  • 业务需求中,我们需要关注设备的一些在线状态。当然可以计划的扫描,显然这种不太友好和可行。那么,可以利用什么来解决呢 消息的订阅发布 device订阅 可向 Redis 订阅 device 消息以获取设备实时状态 > ...
  • 一个web网页,用HTML写的,css样式、JavaScript也在里面,会动,有特效,学习前端的朋友可以试着下载来看看,有些地方是可以借鉴的,挺不错的
  • 亲测好用 大家快来下载吧参考博客https://blog.csdn.net/xhydongda/article/details/81208192#commentsedit
  • 2020年9月26日考试为在线考试形式,考生需自行准备符合要求的考试设备带有摄像头的电脑,为了方便同学们熟悉考试系统,特申请2020年9月19日9:00-19:00安排考试系统测试,需要提前准备好电脑(带摄像头的台式电脑或者...

    2020年9月26日考试为在线考试形式,考生需自行准备符合要求的考试设备带有摄像头的电脑,为了方便同学们熟悉考试系统,特申请2020年9月19日9:00-19:00安排考试系统测试,需要提前准备好电脑(带摄像头的台式电脑或者笔记本电脑)

    考试系统客户端下载、安装和调试

    1.  考试系统客户端安装

    使用电脑,复制下方链接,在浏览器的最上方的网址栏,粘贴这个网址,跳转打开考试系统下载链接

    https://eztest.org/exam/session/92299/client/download

    会直接进入客户端的下载页面,下载界面如下图 1 所示

    注:大家得清楚自己电脑版本,Windows版或者Mac版,看清楚再下载,不要下载错了。

    367c4f87191dc12f223cb0b3a011b3bb.png

    图1

    考试系统客户端适用于 Windows或 Mac 操作系统。

    点击对应的下载安装包,客户端安装包下载完成后,以 Windows 考试设备为例,双击安装包即可安装考试系统客户端如下图 2 所示

    391f535edfbf3c8f17147fc0766f40d9.png

    图2

    点击“下一步”,推荐使用默认路径安装客户端。安装完成后,桌面上将会显示“eztest”

    图标,如下图 3 所示。

    1f5f1d1ea94622f50e97b3e11ba2dd8c.png

    图3

    注:苹果电脑在安装的时候记得选择信任该软件来源,如果尝试之后仍然安装不上,可以拍摄一个小视频,发给班主任老师,寻求班主任老师帮助

    529aa1f487a0bc64cbd9f4fe3bf655e0.png 双击运行“eztest”程序,可出现在客户端登录界面 输入 9月19日考试系统 测试 口令: 92299 特别注意9月26日正式考试的考试口令与这次的测试口令不一样,9月26日 准确的正式考试口令会另行通知 请各位同学关注老师通知和公众号通知! b9a99e06c60c62c49ed544e302bd30e8.png 图4 输入测试考试口令92299 进入测试考试登录界面,可以先进行摄像头测试,正式测试时间为19日9:00-19:00,可以在规定时间之间进行登录,输入17位准考证号,进入考试系统测试界面,核对基本信息,拍摄一张照片留存,然后进行测试, 此次测试的成绩与测试题目和我们9月26日正式考试没必然关联! 此次测试只有一次机会,交卷之后,不能再次登录,但是在没交卷之前,您还可以重复登录,请各位考生注意! 特别说明,为了保证考试正常进行,减少干扰, 进入测试界面会强制锁屏,不能退出界面,只能等待测试时间结束,或者强制关机,拔掉电源才能退出考试界面! 二、考试环境、电子设备软硬件要求 考生应自行准备符合以下要求的考试设备和考试环境: 1.  考试场所 考生应选择安静、光线充足、独立的空间独自参加考试,考试全过程严格禁止无关人员出入考试场所。 1) 考试期间将全程使用摄像头,需确保电脑摄像头开启,无遮挡; 2) 如使用笔记本电脑请保持电量充足,建议全程使用外接电源; 3) 进入考试系统前应关闭电脑上与考试无关网页和软件,包括安全卫士、电脑管家及各类通讯软件,以免由于被动弹窗导致被系统判定为作弊; 2.  网络条件要求 建议考生准备 4G 等手机移动网络作为备用网络,并事先做好调试,以便出现网络故障时能迅速切换备用网络继续考试; 特别提醒:考试期间如发生考网络故障,考试系统会即时提醒考生,请考生在看到异常提示后迅速修复网络故障。故障解决后,考生可重新进入考试继续作答,网络故障发生之前的作答结果会保存;但是,由于考试设备或网络故障导致考试时间的损失、或无法完成考试的,当期考试将不会获得补时或补考的机会。 三、考试说明 心理咨询专业技能证书考试将于2020年9月26日(周六)具体考试时间: 上午基础知识  9:00-10:30 (考生需于当天 8:30-9:00 间完成登录)  下午操作技能 14:00-15:30 (考生需于当天 13:30-14:00 间完成登录) 考试分为两科,基础知识和操作技能; 每科均为 150 题,其中单选题 100 题,每题 0.5 分,多选题 50 题,每题 1 分; 每科满分均为 100 分,两科分数分别达到 60 分为成绩合格。    四、考试系统下载流程如视频所示
    展开全文
  • <dependency> <groupId>org.bytedeco</groupId> <artifactId>javacv-platform</artifactId>...public static void main(String[] args) throws FrameGrabber.Exc.
  • 作者——徐珂靖前言:Leez学院是联想Leez SBC 推出的在线学习园地,旨在集结资深SBC 玩家和技术大神,为更多的开发者提供优质开发文档、技术资料以及创意场景Demo。同时利用互联网优势,从多渠道多形式(如录屏视频、...
  • 为什么ie打开后关闭了页面 摄像头一直不关闭,需要关闭浏览器才可以
  • });WebRTC可能是来岁最受关心的HTML5标准了,Mozilla为此开辟了一套协帮你节造...次要特征:反在线演示$( #webcam ).photobooth().on( image ,function( event, dataUrl){$( .nopic ).hide();难于实现的贸难模式...
  • 在线摄像头

    2014-10-22 10:36:54
    在线摄像头
  • 在线调试摄像头 网页测试摄像头

    千次阅读 2021-02-18 11:11:33
    金三银四,面试大潮又来了,免不了电话面试和视频面试 摄像头在线测试https://assistant.ceping.com/qrcode?type=1&lng=zh
  • 在线摄像头嘛,就那两种实现的方式:cab或者flash。暂且不论本人从没学过的flash(事实上我已经做了一个flash调用摄像头的demo,虽然是调用成功了,但是对于拍照部分我实在是无力了,况且还有js控制flash部分的代码更...
  • 摄像头

    2021-03-22 18:09:02
    摄像头 摄像头 UVC视频设备、网络视频设备 摄像头模组 图像传感器+镜头 视频设备 UVC视频设备是一种通过usb连接的外置摄像头,接上计算机就可以用相机等程序进行摄影拍照功能。网络视频设备与之类似,不同的是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,120
精华内容 9,648
关键字:

摄像头在线