<!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. [RK3399][Android7.1] 调试笔记 --- 模块编译32位动态库【转】

    本文转载自:http://blog.csdn.net/kris_fei/article/details/78923784 Platform: RK3399 OS: Android 7.1 Board: ...

  2. 织梦DEDEcms首页调用文档整篇内容

    DedeCMS在首页调用内容页中的整篇文章 织梦程序是一个很强大的程序,也有很多朋友使用织梦程序来做博客,想要像是在博客中一样能在首页中调用一整篇文章,其实在织梦程序中页可以很完美的实现这个功能. 在 ...

  3. poj 2923 Relocation 解题报告

    题目链接:http://poj.org/problem?id=2923 题目意思:给出两部卡车能装的最大容量,还有n件物品的分别的weight.问以最优方式装入,最少能运送的次数是多少. 二进制表示物 ...

  4. [Selenium] Grid 介绍

    Selenium Grid 支持分布式测试,使测试人员可在分布式环境中进行测试 一般而言,在面临以下情况时可考虑使用Selenium Grid : 1.测试多个浏览器或单个浏览器多个版本,或测试不同操 ...

  5. iOS多线程 NSThread/GCD/NSOperationQueue

    无论是GCD,NSOperationQueue或是NSThread, 都没有线程安全 在需要同步的时候需要使用NSLock或者它的子类进行加锁同步 "] UTF8String], DISPA ...

  6. ASP.NET Core：WebAppCoreApi

    ylbtech-ASP.NET Core:WebAppCoreApi 1.返回顶部 1. 2. 3.           4. 2. Controllers返回顶部 1.ValuesControlle ...

  7. node npm 总结

    是nodejs的软件包管理器,用于node插件管理 npm install <name> [-g] [--save -dev] name:安装模块的名称 -g:全局安装 --save:将保 ...

  8. Redis高级

    Redis高级 redis数据备份与恢复 Redis SAVE 命令用于创建当前数据库的备份. redis Save 命令基本语法如下: redis 127.0.0.1:6379> SAVE 实 ...

  9. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 08. 输入Model和防止重复Post

    通过action的参数传入一个model 通过input的name属性和model属性对应上 通常是使用Http post去做 快速创建了这个Action 这个Action很简单我们只需要返回View ...

  10. error: expected ‘)’ before ‘PRId64’（转载）

    转自:www.xuebuyuan.com/2077822.html error: expected ‘)’ before ‘PRId64’ 原来这个宏定义给c用的,C++要用它,就要定义一个__STD ...