<!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. Does Hadoop require SSH?

    https://wiki.apache.org/hadoop/FAQ#Does_Hadoop_require_SSH.3F Hadoop provided scripts (e.g., start-m ...

  2. poj 1015 Jury Compromise（背包+方案输出）

    \(Jury Compromise\) \(solution:\) 这道题很有意思,它的状态设得很...奇怪.但是它的数据范围实在是太暴露了.虽然当时还是想了好久好久,出题人设了几个限制(首先要两个的 ...

  3. Spring Boot 访问静态资源

    方法1一: 在resources目录下建立static的目录,将静态资源放到此处,可以直接访问 访问:127.0.0.1:9010/img/123.png

  4. POJ1077 Eight —— A*算法

    主页面:http://www.cnblogs.com/DOLFAMINGO/p/7538588.html 关于A*算法:g(n)表示从起点到任意节点n的路径花费,h(n)表示从节点n到目标节点路径花费 ...

  5. 「LuoguP3252」 [JLOI2012]树

    Description 在这个问题中,给定一个值S和一棵树.在树的每个节点有一个正整数,问有多少条路径的节点总和达到S.路径中节点的深度必须是升序的.假设节点1是根节点,根的深度是0,它的儿子节点的深 ...

  6. 022--python 模块介绍和time模块

    一.模块的含义 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代 ...

  7. XCode10 swift4.2 适配遇到的坑

    以下是2018年10月23日更新 经过大约一个月的时间的适配,项目正式使用XCode10(以下简称为10 or XC10)大部分库都升级为Swift4.2(以下简称为 4.2 or S4.2),下面是 ...

  8. git操作实战指南

    1 背景 小白进入公司,进入日常多人开发,git的使用应该是新人要掌握的第一个技能.git是一个分布式数据存储库,分为远程存储和本地存储,本地存储的话,每一台计算机就相当于一个存储数据库,可以记录和存 ...

  9. poj1163 【记忆化搜索·水】

    题意: 一个这样的三角形,他可以往下的左或者往下的右走.求一个在最后一行的最大. 思路: 额...就是搜一下..记录一下...肯定有重合的情况. code- //#include <bits/s ...

  10. HK算法模板+小优化（跑的快一点点）

    HUST 2604 #include <iostream> #include <cstdlib> #include <cstdio> #include <cs ...