<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>摄像头的调用</title>

</head>

<body>

    <video autoplay id="sourcevid" style="width:320;height:240px"></video>

    <canvas id="output" style="display:none"></canvas>

    <script type="text/javascript" charset="utf-8">

        // 发送画面

        //var socket = new WebSocket("ws://"+document.domain+":8080");

        var back = document.getElementById('output');

        var backcontext = back.getContext('2d');

        var video = document.getElementsByTagName('video')[0];

        var success = function(stream){

            video.src = window.URL.createObjectURL(stream);

        }

        /*

        socket.onopen = function(){

            draw();

        }

        */

        var draw = function(){

            try{

                backcontext.drawImage(video,0,0, back.width, back.height);

            }catch(e){

                if (e.name == "NS_ERROR_NOT_AVAILABLE") {

                    return setTimeout(draw, 100);

                } else {

                    throw e;

                }

            }

            // socket.send(back.toDataURL("image/jpeg", 0.5));

            setTimeout(draw, 100);

        }

        navigator.getUserMedia = navigator.getUserMedia

            || navigator.webkitGetUserMedia

            || navigator.mozGetUserMedia

            || navigator.msGetUserMedia;

        navigator.getUserMedia({video:true, audio:false}, success, console.log);

        /*

        // 接收画面

        var receiver_socket = new WebSocket("ws://"+document.domain+":8008");

        var image = document.getElementById('receiver');

        receiver_socket.onmessage = function(data)

        {

            image.src=data.data;

        }

        */

    </script>

</body>

</html>

　　

利用javascript调用摄像头，可以配合socket开发监控系统的更多相关文章

  1. 开博第二篇：记一个利用JavaScript，编写PS脚本，开发图片量产工具

    背景:身在一个有实业的电商公司,设计部的妹子们总是会有做不完的商品图片,当然了,要是做点有技术含量的美化工作也罢,但是最近她们很是无聊,总是要做一些重复性的工作,就比如如题所说的,图片量产,量产什么呢 ...

  2. Python 3 利用 Dlib 实现摄像头实时人脸检测和平铺显示

    1. 引言 在某些场景下,我们不仅需要进行实时人脸检测追踪,还要进行再加工:这里进行摄像头实时人脸检测,并对于实时检测的人脸进行初步提取: 单个/多个人脸检测,并依次在摄像头窗口,实时平铺显示检测到的 ...

  3. 利用html5调用本地摄像头拍照上传图片[转]

    利用html5调用本地摄像头拍照上传图片   html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...

  4. Android开发中如何调用摄像头的功能

    我们要调用摄像头的拍照功能,显然 第一步必须加入调用摄像头硬件的权限,拍完照后我们要将图片保存在SD卡中,必须加入SD卡读写权限,所以第一步,我们应该在Android清单文件中加入以下代码     & ...

  5. 微信公众号开发调用摄像头、拍摄或选择图片、OCR识别

     一 .准备工作       <1> 域名认证准备工作 在需要调用摄像头的接口页面引入微信的js,具体地址为:(支持https):http://res.wx.qq.com/open/js/ ...

  6. 利用face_recognition，dlib与OpenCV调用摄像头进行人脸识别

    用已经搭建好 face_recognition,dlib 环境来进行人脸识别 未搭建好环境请参考:https://www.cnblogs.com/guihua-pingting/p/12201077. ...

  7. HTML之调用摄像头实现拍照和摄像功能

    应该有很多人知道,我们的手机里面有个功能是“抓拍入侵者”,说白了就是在解锁应用时如果我们输错了密码手机就会调用这一功能实现自动拍照. 其实在手机上还有很多我们常用的软件都有类似于这样的功能,比如微信扫 ...

  8. [置顶] android利用jni调用第三方库——第二篇——编写库android程序直接调用第三方库libhello.so

    0:前言 1:本文主要作为丙方android公司的身份来写 2:作者有不对的地方,请指出,谢谢 ［第一篇:android利用jni调用第三方库——编写库libhello.so］ ［第二篇:androi ...

  9. html5调用摄像头实现拍照

    技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...

随机推荐

  1. MYSQL 分析表、检查表和优化表

    1. 对表进行优化 ( 优化表主要作用是消除删除或者更新造成的空间浪费) 2. 对表进行分析(分析关键字的分布, 分析并存储MyISAM和BDB表中键的分布) 3. 对表进行检查(检查表的错误,并且为 ...

  2. Linux编程之《进程/线程绑定CPU》

    Intro----- 通常我们在编写服务器代码时,可以通过将当前进程绑定到固定的CPU核心或者线程绑定到固定的CPU核心来提高系统调度程序的效率来提高程序执行的效率,下面将完整代码贴上. /***** ...

  3. Jquery解析Json字符串,并且动态生成数据表格Table

    //ajax获得后台传来的json字符串 $.post("UserInfo.ashx", function (data) { //假设data="{T1:[{User_I ...

  4. Java字符流和字节流对文件操作

    记得当初自己刚开始学习Java的时候,对Java的IO流这一块特别不明白,所以写了这篇随笔希望能对刚开始学习Java的人有所帮助,也方便以后自己查询.Java的IO流分为字符流(Reader,Writ ...

  5. cocos2d-x lua 触摸事件

    cocos2d-x lua 触摸事件 version: cocos2d-x 3.6 1.监听 function GameLayer:onEnter() local eventDispatcher = ...

  6. 第一节：Maven 下载，安装和配置

    Maven是Apache的一个产品所以要下载Maven的话可以到https://www.apache.org网站上下载 进入到APache这个网站后看一下几部操作 第一: 选择点击导航栏上面的proj ...

  7. android开发推荐书籍列表

    1.  <第一行android代码> 入门,简单易懂,全面. 2. << Android群英传 >> 特点:UI部分相当详细 3. <<深入理解Andr ...

  8. 转：XMPP协议、MQTT协议、HTTP协议、CoAP协议的基本比较

    一.先看下相关国外的专业数据对四大协议的比较: Protocol                                    CoAP                         XMP ...

  9. 刚更新的css hack技巧

    一 一般Hack 1概念: 不同的浏览器对CSS的解析效果不同,为了达到相同的效果,就得根据不同浏览器写不同的css 2规则: CSS Hack大致有3种表现形式,CSS类内部Hack.选择器Hack ...

  10. Javascript中的冒泡排序，插入排序，选择排序，快速排序，归并排序，堆排序 算法性能分析

    阿里面试中有一道题是这样的: 请用JavaScript语言实现 sort 排序函数,要求:sort([5, 100, 6, 3, -12]) // 返回 [-12, 3, 5, 6, 100],如果你 ...