<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. 全面谈谈Aspects和JSPatch兼容问题

    1. 背景 Aspects 和 JSPatch 是 iOS 开发中非常常见的两个库.Aspects 提供了方便简单的方法进行面向切片编程(AOP),JSPatch可以让你用 JavaScript 书写 ...

  2. 想学React Native？你只需要一个App！(11月5号更新)

    最近有点空闲时间,顺手研究下react-native,2013年的时候在老师的指导下使用jQuery Mobile做过手机应用,那个运行速度慢呀!让我对WebApp和PhoneGap这一类的跨平台Ap ...

  3. Direct3D11-1 初始化

        在使用一个东西之前,我们需要初始化他,好比汽车加油,手机充电.于是我们采取平时的编码习惯,试图写下如下代码         Direct3D11 _direct3d11;     事实上,我们 ...

  4. java io文件学习笔记

    File f = new file("D:"+File.separator+"test.txt"); File.separator跨系统文件分隔符 f.crea ...

  5. 开发技巧01——改变Toast显示位置

    1.获得Toast对象——Toast toast = Toast.makeText(this, "Top Left!", Toast.LENGTH_SHORT); 2.Toast对 ...

  6. java+mysql实现保存图片到数据库，以及读取数据库存储的图片

    一:建表 二:获取数据库连接 1:导入mysql的驱动jar包,mysql-connector-java-5.1.8-bin.jar 2:写代码连接数据库,如下: /** * */ package c ...

  7. (转).net项目技术选型总结

    原文作者:mcgrady 原文地址:.net项目技术选型总结 做.net开发已经几年了,也参与开发了很多大大小小的项目,所以现在希望总结出一套开发.net项目的常用技术,也为以后做项目技术选型的时候作 ...

  8. Mac环境下svn的使用（转载）

    在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境.在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还 ...

  9. 解决MS Office下载网站数据失败的问题

    最近遇到在MS Excel中建立的Web Query在创建完成后过了一段时间(或关闭文件后再次打开文件并刷新数据)出现无法刷新的问题,点击刷新时报错如下: 无法下载您要求的信息. 这是一个很不友好的报 ...

  10. HDOJ2004成绩转换

    成绩转换 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...