<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <meta name="viewport" content="width=device-width, initial-scale=1">

    </head>

    <body>

        <video id="video" width="640" height="480" autoplay></video>

    </body>

    <script type="text/javascript">

        var promisifiedOldGUM = function(constraints) {

            // 第一个拿到getUserMedia，如果存在

            var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);

            // 有些浏览器只是不实现它-返回一个不被拒绝的承诺与一个错误保持一致的接口

            if (!getUserMedia) {

                return Promise.reject(new Error('getUserMedia is not implemented in this browser-getUserMedia是不是在这个浏览器实现'));

            }

            // 否则，调用包在一个旧navigator.getusermedia承诺

            return new Promise(function(resolve, reject) {

                getUserMedia.call(navigator, constraints, resolve, reject);

            });

        }

        // 旧的浏览器可能无法实现mediadevices可言，所以我们设置一个空的对象第一

        if (navigator.mediaDevices === undefined) {

            navigator.mediaDevices = {};

        }

        // 一些浏览器部分实现mediadevices。我们不能只指定一个对象

        // 随着它将覆盖现有的性能getUserMedia。.

        // 在这里，我们就要错过添加getUserMedia财产。.

        if (navigator.mediaDevices.getUserMedia === undefined) {

            navigator.mediaDevices.getUserMedia = promisifiedOldGUM;

        }

        // Prefer camera resolution nearest to 1280x720.

        var constraints = {

            audio: true,

            video: {

                width: 1280,

                height: 720

            }

        };

        navigator.mediaDevices.getUserMedia(constraints)

            .then(function(stream) {

                var video = document.querySelector('video');

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

                video.onloadedmetadata = function(e) {

                    video.play();

                };

            }).catch(function(err) {

                console.log(err.name + ": " + err.message);

            });

    </script>

</html>

可用调用摄像头

通过

catch(function(err) {

      console.log(err.name + ": " + err.message);

});可用判断是否有可使用的摄像头但是错误信息有限无法详细判断
NavigatorUserMediaError {name: "DevicesNotFoundError", message: "", constraintName: ""}

constraintName:""

message:""

name:"DevicesNotFoundError"

目前没时间详细查看先记录下来以后看

参考：http://blog.csdn.net/qq_16559905/article/details/51743588

https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

下面是H5调用摄像头进行扫一扫的功能，https://github.com/zhiqiang21/WebComponent（开发者所有的插件）
https://github.com/zhiqiang21/WebComponent/tree/master/html5-Qrcode（扫一扫功能）
http://www.cnblogs.com/yisuowushinian/p/5145262.html
亲测有效，但是兼容性不是很好

实现是调用拍照或者调用相册获取到二维码图片，用jsqrcode进行二维码分析 地址
然后获取到实际的二维码内写的字符串
后续实现自行可以处理

摄像头调用,h5调用摄像头进行扫一扫插件备份的更多相关文章

  1. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

  2. 移动端H5调用摄像头(选择上传图片)

    <label>照相机</label> <input type="file" id='image' accept="image/*" ...

  3. h5调用手机前后摄像头，拍照

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pacam.aspx.cs& ...

  4. 树莓派自身摄像头的opencv调用

    很多人知道,opencv不能直接对树莓派原装摄像头进行调用,因为raspicam不是V4L驱动,怎样才能使用树莓派原装摄像头,它可比多数usb摄像头清晰和小巧. 具体方法,给树莓派原装摄像头安装一个可 ...

  5. javacpp-opencv图像处理3：使用opencv原生方法遍历摄像头设备及调用(增加实时帧率计算方法)

    javaCV图像处理系列: javaCV图像处理之1:实时视频添加文字水印并截取视频图像保存成图片,实现文字水印的字体.位置.大小.粗度.翻转.平滑等操作 javaCV图像处理之2:实时视频添加图片水 ...

  6. javacv开发详解之1：调用本机摄像头视频（建议使用javaCV1.3版本）

    javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...

  7. javacv开发详解之1：调用本机摄像头视频（建议使用javaCV最新版本）

    javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...

  8. javacv开发详解之1：调用本机摄像头视频

    前言:javacv开发包是用于支持java多媒体开发的一套开发包,可以适用于本地多媒体(音视频)调用以及音视频,图片等文件后期操作(图片修改,音视频解码剪辑等等功能),这里只使用最简单的本地摄像头调用 ...

  9. 使用JS调用手机本地摄像头或者相册图片识别二维码/条形码

    接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍 ...

随机推荐

  1. Tomcat的虚拟主机的配置

    比如:配置一个虚拟主机的名字是www.sina.com 1 改动window系统中的HOST文件[C:\WINDOWS\system32\drivers\etc\hosts]   127.0.0.1 ...

  2. linux shell 突破

    targetDate=$(cat maxdayid); targartMonth=${targetDate::}; targartYear=${targetDate::}; echo $targart ...

  3. Linux时间子系统之（一）：时间的基本概念【转】

    本文转载自:http://www.wowotech.net/timer_subsystem/time_concept.html 本文使用Q & A的方式来和大家以前探讨一下时间的基本概念 一. ...

  4. POJ2728 Desert King —— 最优比率生成树 二分法

    题目链接:http://poj.org/problem?id=2728 Desert King Time Limit: 3000MS   Memory Limit: 65536K Total Subm ...

  5. YTU 2392: 求各位数字之和

    2392: 求各位数字之和 时间限制: 1 Sec  内存限制: 128 MB 提交: 1253  解决: 292 题目描述 编写一个程序,计算任意输入的正整数的各位数字之和.(输入的位数不要超过10 ...

  6. 织梦DEDE多选项筛选_联动筛选功能的实现_二次开发

    织梦默认的列表页没有筛选功能,但有时候我们做产品列表页的时候,产品的字段比较多,很多人都需要用到筛选功能,这样可以让用户更方便的找到自己所需要的东西,实现这个联动筛选功能需要对织梦进行二次开发,下面就 ...

  7. Tomcat版本是32位、64位问题

    最近遇到一个Tomcat windows安装版本是32位还是64位问题.由于一系列原因,已经无从知晓生产系统上的该程序是32位还是64位. 后来经过仔细查阅资料,得知: 1. tomcat 从6.0. ...

  8. apache 安装及配置

    近期想用apache运行网站,在网上查询windows 版本的中文说明文档有特别少,所以将学习到的在这里做个笔记,以便日后学习以及大家相互交流. 相关文档:http://httpd.apache.or ...

  9. 【NOIP2017Day1T1】 小凯的疑惑

    [题目链接] 点击打开链接 [算法] px + qy不能表示的最大整数为 pq - p - q 证明见这篇博客,过程很详细,推荐阅读 : https://blog.csdn.net/qwerty112 ...

  10. python(一)：multiprocessing——死锁

    前言近年来,使用python的人越来越多,这得益于其清晰的语法.低廉的入门代价等因素.尽管python受到的关注日益增多,但python并非完美,例如被人诟病最多的GIL(值得注意的是,GIL并非py ...