<!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. 获取Android设备无线和以太网MAC地址

    package com.raycloud.wolf.blogformac; import android.net.wifi.WifiManager; import android.support.v7 ...

  2. poj 1179 $Polygon$（断环成链）

    Polygon \(solution:\) upd:还是多讲一下,这道题基本上可以说是一道思维题.一道结论题.一道考验你动态规划基本功是否扎实的题目.因为这道题的数据范围很小,思考一下总能想到断环成链 ...

  3. RubyMine安装、破解

    经常安装东西,这是我安装过最快的ide破解版. 下载地址: http://www.jetbrains.com/ruby/download/index.html 破解序列号: name: rubymin ...

  4. field 属性操作

    首先必须明一点 Field类主要是用来辅助获取和操作类的属性的! 1.怎么通过反射获取类的属性 先来看JDK提供的方法有如下几种: a)Class.getDeclaredField(String na ...

  5. hihocoder #1068 : RMQ-ST算法 ( RMQ算法 O(nlogn)处理 O(1)查询 *【模板】 1)初始化d数组直接读入+计算k值用数学函数log2()==*节约时间 )

    #1068 : RMQ-ST算法 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho在美国旅行了相当长的一段时间之后,终于准备要回国啦!而在回国之前,他们准备 ...

  6. MYSQL初级学习笔记一：MYSQL常用命令和数据库操作（DDL）！（视频序号：初级_3,4)

    知识点一:MYSQL常用命令(3) 登入方法:一,mysql –u 账号 –p 密码 退出方法:一,EXIT,QUIT 修改MYSQL命令提示符: 连接上客户机之后,通常使用prompt命令修改: 连 ...

  7. ad广告下拉收起代码

    1. [代码][JavaScript]代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  8. jsp项目上传到服务器

    我们通过Myeclipse完成一个Java web项目时只能通过本地访问来查看,但是我们想把它上传到服务器上使用外网访问应该怎么做呢,首先肯定是要有一台服务器 个人调试项目试手的话我建议去买阿里云的云 ...

  9. 666 专题三 KMP &#38; 扩展KMP &#38; Manacher

    KMP: Problem A.Number Sequence d.求子串首次出现在主串中的位置 s. c. #include<iostream> #include<stdio.h&g ...

  10. [原创]java获取word文档的条目化内容

    在开发Web办公系统或文档系统时,PageOffice组件是众所周知的在线处理微软word/ppt/excel文档的强大工具,它对WORD文档的各种处理在API层面进行了封装,屏蔽了Office VB ...