<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. Python学习 之 函数

    1.为什么要使用函数 (1)降低编程难度:将复杂的问题分解成简单的小问题 (2)代码重用 2.函数的定义 def 函数名(参数列表):#可以没有参数 函数体 3.函数缺省参数(默认参数):设置默认参数 ...

  2. 用联想wndows8系统做android调试开发，adb server无法启动的原因

    今天换了台笔记本,联想V480的,装好开发软件,配置好一环境,于是打算先试一下能不能用,结果在eclipse devices中死活看不到设备,于是开如找各种问题,最后在度娘的帮助下终于找到了答案,我的 ...

  3. 更改gps.conf来加快GPS搜星速度

    国内NTP ServerNTP全称是Network Time Protocol,是用来让计算机之间实现时间同步的协议,而发布这种校对时间的服务器,就是NTP Server!一般来说客户端与服务器之间的 ...

  4. 小白日记36：kali渗透测试之Web渗透-手动漏洞挖掘（二）-突破身份认证,操作系统任意命令执行漏洞

    手动漏洞挖掘 ###################################################################################### 手动漏洞挖掘 ...

  5. T-SQL 之 概述

    T-SQL(Transact Structured Query Language )它是ANSI和ISO SQL 标准的Microsoft SQL Server方言或扩展,SQL SERVER专用标准 ...

  6. javascript 编写的贪吃蛇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 关于php一些数组函数

    array_column($array,"key") 将二维数组中的键名为key的数据生成一个新数组 array_unique($array) 去除重复值

  8. [转]T4模版引擎之生成数据库实体类

    本文转自:http://www.cnblogs.com/lzrabbit/archive/2012/07/18/2597953.html 在通过T4模版引擎之基础入门 对T4有了初步印象后,我们开始实 ...

  9. ConcurrentHashMap和Hashtable区别

    Hashtable:synchronized是针对整张Hash表的,即每次锁住整张表让线程独占安全的背后是巨大的浪费 ConcurrentHashMap和Hashtable主要区别就是围绕着锁的粒度以 ...

  10. jquery基础教程读书总结

    最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...