getUserMedia API简介

HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头、视频、音频、地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。
getUserMedia API最初是navigator.getUserMedia,目前已被最新Web标准废除,变更为navigator.mediaDevices.getUserMedia(),但浏览器支持情况不如旧版API普及。
MediaDevices.getUserMedia()方法提示用户允许使用一个视频和/或一个音频输入设备,例如相机或屏幕共享和/或麦克风。如果用户给予许可,就返回一个Promise对象,MediaStream对象作为此Promise对象的Resolved[成功]状态的回调函数参数,相应的,如果用户拒绝了许可,或者没有媒体可用的情况下PermissionDeniedError或者NotFoundError作为此PromiseRejected[失败]状态的回调函数参数。注意,由于用户不会被要求必须作出允许或者拒绝的选择,所以返回的Promise对象可能既不会触发resolve也不会触发 reject

浏览器兼容性

语法

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) { ... })
.catch(function(error) { ... })

参数

containers:指定请求的媒体类型,主要包含videoaudio,必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求,那么返回的Promise对象就会处于rejected[失败]状态,NotFoundError作为rejected[失败]回调的参数。

【例】同时请求不带任何参数的音频和视频:

 { audio: true, video: true }

【例】使用1280x720的摄像头分辨率:

{
audio: true,
video: { width: 1280, height: 720 }
}

【例】要求获取最低为1280x720的分辨率:

{
audio: true,
video: {
width: { min: 1024, ideal: 1280, max: 1920 },
height: { min: 776, ideal: 720, max: 1080 }
}
}

当请求包含一个ideal(应用最理想的)值时,这个值有着更高的权重,意味着浏览器会先尝试找到最接近指定的理想值的设定或者摄像头(如果设备拥有不止一个摄像头)。

【例】优先使用前置摄像头(如果有的话):

{ audio: true, video: { facingMode: "user" } }

【例】强制使用后置摄像头:

{ audio: true, video: { facingMode: { exact: "environment" } } }

成功回调函数seccessCallback的参数streamstreamMediaStream的对象,表示媒体内容的数据流,可以通过URL.createObjectURL转换后设置为VideoAudio元素的src属性来使用,部分较新的浏览器也可以直接设置为srcObject属性来使用。


失败回调函数errorCallback的参数error,可能的异常有:

  • AbortError:硬件问题
  • NotAllowedError:用户拒绝了当前的浏览器实例的访问请求;或者用户拒绝了当前会话的访问;或者用户在全局范围内拒绝了所有媒体访问请求。
  • NotFoundError:找不到满足请求参数的媒体类型。
  • NotReadableError:操作系统上某个硬件、浏览器或者网页层面发生的错误导致设备无法被访问。
  • OverConstrainedError:指定的要求无法被设备满足。
  • SecurityError:安全错误,在getUserMedia() 被调用的 Document
    上面,使用设备媒体被禁止。这个机制是否开启或者关闭取决于单个用户的偏好设置。
  • TypeError:类型错误,constraints对象未设置[空],或者都被设置为false

示例:HTML 5调用媒体设备摄像头

这个例子中,请求访问用户硬件设备的摄像头,并把视频流通过Video元素显示出来。网页中提供一个"拍照"的按钮,通过Canvas将Video的画面截取并绘制,核心代码如下:

HTML

<!--video用于显示媒体设备的视频流,自动播放-->
<video id="video" autoplay style="width: 480px;height: 320px"></video>
<!--拍照按钮-->
<div>
<button id="capture">拍照</button>
</div>
<!--描绘video截图-->
<canvas id="canvas" width="480" height="320"></canvas>

JavaScript

//访问用户媒体设备的兼容方法
function getUserMedia(constrains,success,error){
if(navigator.mediaDevices.getUserMedia){
//最新标准API
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
} else if (navigator.webkitGetUserMedia){
//webkit内核浏览器
navigator.webkitGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.mozGetUserMedia){
//Firefox浏览器
navagator.mozGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.getUserMedia){
//旧版API
navigator.getUserMedia(constrains).then(success).catch(error);
}
} var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); //成功的回调函数
function success(stream){
//兼容webkit内核浏览器
var CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
video.src = CompatibleURL.createObjectURL(stream);
//播放视频
video.play();
} //异常的回调函数
function error(error){
console.log("访问用户媒体设备失败:",error.name,error.message);
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
//调用用户媒体设备,访问摄像头
getUserMedia({
video:{width:480,height:320}
},success,error);
} else {
alert("你的浏览器不支持访问用户媒体设备");
} //注册拍照按钮的单击事件
document.getElementById("capture").addEventListener("click",function(){
//绘制画面
context.drawImage(video,0,0,480,320);
});

进阶

对本示例进行功能加强,比如使用CSS 3 的滤镜实现模糊、黑白等效果。

getUserMedia API及HTML5 调用手机摄像头拍照的更多相关文章

  1. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

  2. html5调用手机摄像头,实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

  3. HTML5调用手机摄像头,仅仅支持OPPOHD浏览器

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 利用html5调用本地摄像头拍照上传图片[转]

    利用html5调用本地摄像头拍照上传图片   html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...

  5. getUserMedia API及HTML5 调用摄像头和麦克风

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  6. 使用HTML5+调用手机摄像头和相册

    前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...

  7. html5调用手机摄像头

    <input type="file" accept="image/*" capture="camera"><input t ...

  8. 利用html5调用本地摄像头拍照上传图片

    这个是前台HTML的代码. <div id="contentHolder"> <video id="video" width="32 ...

  9. html5调用手机摄像头(图片可多选 限pc)

    html5自带的 input file=”” ,纯html5,并且不涉及到js ,就可以实现.代码如下: <input type="file" accept="im ...

随机推荐

  1. 工作常见的git命令

     Git创建项目仓库: 1.git init 初始化   2.git remote add origin url 关联远程仓库   3.git pull  拉取远程仓库到本地  相当于(git fet ...

  2. css3应用

    画出一个禁行标志 border-radius: 50%; width: 100px; height: 100px; border: 10px solid red; background: linear ...

  3. 多因素线性回归|adjusted R^2|膨胀系数|非线性回归|Second-order model with 1 independent variable|Interaction model with 2 independent variables|偏相关|fraction[a]|contribution

    多因素线性回归 系数由最小二乘法得到 R^2;adjusted R^2:变量变多之后,r^2自然变大,但是这不是反应客观事实,所以引入了adjusted R^2 使用散点图看独立性,也可以使用软件,c ...

  4. javascript 获取 sx:datetimepicker 的值

     <div align="center"><sx:datetimepicker label="Start_Time" id="S ...

  5. Java 集合的迭代方式

    集合的迭代流使得程序员得以站在更高的抽象层次上对集合进行操作.传统的迭代方法直接看代码: List<Dog> dogs = new ArrayList<>();        ...

  6. 学习python-20191108(1)Mysql、Flask

    一.使用pymysql模块操作MYSQL 导入pymysql模块: pip install pymysql 1.增删改 import pymysql # 定义数据库连接信息 config = {    ...

  7. python往mysql数据库中写入数据和更新插入数据

    本文链接:https://blog.csdn.net/Mr__lqy/article/details/85719603 1. 连接mysql import pymysql db = pymysql.c ...

  8. es6变量和函数的提升、暂时性死区?

    es6变量和函数的提升.暂时性死区?

  9. 1043 输出PATest (20 分)

    题目:1043 输出PATest (20 分) 给定一个长度不超过 1 的.仅由英文字母构成的字符串.请将字符重新调整顺序,按 PATestPATest.... 这样的顺序输出,并忽略其它字符.当然, ...

  10. 简单说说PHP优化

    我们在编写程序时,总是想要使自己的程序占用资源最小,运行速度更快,代码量更少.往往我们在追求这些的同时却失去了很多东西.下面我想讲讲我对PHP优化的理解.优化的目的是花最少的代价换来最快的运行速度与最 ...