<!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. virtualbox创建centos7虚拟机

    安装Virtualbox 下载安装: 直接到官网上下载,https://www.virtualbox.org/wiki/Downloads 然后一键傻瓜式的安装即可. 设置默认虚拟电脑位置: 管理=& ...

  2. Java类加载器(ClassLoader)

    类加载的机制的层次结构 每个编写的”.java”拓展名类文件都存储着需要执行的程序逻辑,这些”.java”文件经过Java编译器编译成拓展名为”.class”的文件,”.class”文件中保存着Jav ...

  3. SpringMVC配置环境中一般用的jar包

    配置SpringMVC需要把这些jar包加入lib目录下 下载地址,复制到地址栏.回车即可下载 http://files.cnblogs.com/files/QW-lzm/SpringMVC----. ...

  4. Java经典算法大全

    1.河内之塔.. 2.Algorithm Gossip: 费式数列. 3. 巴斯卡三角形 4.Algorithm Gossip: 三色棋 5.Algorithm Gossip: 老鼠走迷官(一) 6. ...

  5. C++ main函数中参数argc和argv含义及用法

    argc 是 argument count的缩写,表示传入main函数的参数个数: argv 是 argument vector的缩写,表示传入main函数的参数序列或指针,并且第一个参数argv[0 ...

  6. GCD的使用（1）使用GCD保护property

    作为一个iOS开发者,必须要熟练使用GCD,本文是站在实际应用的角度总结GCD的用法之一: 使用barrier保护property.在多线程环境下,如果有多个线程要执行同一份代码,那么有时会出现问题, ...

  7. Laravel配置nginx环境

    前言: 之前坑的!一直在尝试配置,但都失败了,只能用着apache,但是最近想整合swoole到laravel,无奈当前测试服务器是nginx,我只能再尝试在nginx上搭laravel环境 方法如下 ...

  8. 【iOS】KVC 和 KVO 的使用场景

    http://blog.csdn.net/chenglibin1988/article/details/38259865   Key Value Coding Key Value Coding是coc ...

  9. HBase之四--(1)：Java操作Hbase进行建表、删表以及对数据进行增删改查，条件查询

    1.搭建环境 新建JAVA项目,添加的包有: 有关Hadoop的hadoop-core-0.20.204.0.jar 有关Hbase的hbase-0.90.4.jar.hbase-0.90.4-tes ...

  10. 【198】Synergy - 鼠标键盘共享软件

    参考:Synergy X64 v1.7.4 官方最新版 参考:Synergy安装方法 功能介绍: 可以将配置局域网的电脑实现同一个鼠标键盘控制两台电脑,效果类似一台电脑使用双屏的效果,键盘会根据鼠标的 ...