getUserMedia API及HTML5 调用手机摄像头拍照
getUserMedia API简介
HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头、视频、音频、地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。
getUserMedia API最初是navigator.getUserMedia
,目前已被最新Web标准废除,变更为navigator.mediaDevices.getUserMedia()
,但浏览器支持情况不如旧版API普及。 MediaDevices.getUserMedia()
方法提示用户允许使用一个视频和/或一个音频输入设备,例如相机或屏幕共享和/或麦克风。如果用户给予许可,就返回一个Promise
对象,MediaStream
对象作为此Promise
对象的Resolved
[成功]状态的回调函数参数,相应的,如果用户拒绝了许可,或者没有媒体可用的情况下PermissionDeniedError
或者NotFoundError
作为此Promise
的Rejected
[失败]状态的回调函数参数。注意,由于用户不会被要求必须作出允许或者拒绝的选择,所以返回的Promise
对象可能既不会触发resolve
也不会触发 reject
。
浏览器兼容性
语法
navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) { ... })
.catch(function(error) { ... })
参数
containers:
指定请求的媒体类型,主要包含video
和audio
,必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求,那么返回的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
的参数stream
:stream
是MediaStream
的对象,表示媒体内容的数据流,可以通过URL.createObjectURL
转换后设置为Video
或Audio
元素的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 调用手机摄像头拍照的更多相关文章
- 怎样让HTML5调用手机摄像头拍照——实践就是一切
原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...
- html5调用手机摄像头,实现拍照上传功能
今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...
- HTML5调用手机摄像头,仅仅支持OPPOHD浏览器
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 利用html5调用本地摄像头拍照上传图片[转]
利用html5调用本地摄像头拍照上传图片 html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...
- getUserMedia API及HTML5 调用摄像头和麦克风
getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...
- 使用HTML5+调用手机摄像头和相册
前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...
- html5调用手机摄像头
<input type="file" accept="image/*" capture="camera"><input t ...
- 利用html5调用本地摄像头拍照上传图片
这个是前台HTML的代码. <div id="contentHolder"> <video id="video" width="32 ...
- html5调用手机摄像头(图片可多选 限pc)
html5自带的 input file=”” ,纯html5,并且不涉及到js ,就可以实现.代码如下: <input type="file" accept="im ...
随机推荐
- log4j日志配置和使用
一.日志配置变量参数说明 1. 日志设置说明:# log4j.rootLogger = debug,stdout,D,E# 等号之后的值表示appender对象,每个apperder对象表示一个日志输 ...
- iOS补位动画、沙漏效果、移动UITableViewCell、模拟贪吃蛇、拖拽进度等源码
iOS精选源码 JHAlertView - 一款黑白配色的HUD之沙漏效果 继承UIButton的自定义按钮SPButton 用递归算法实现iOS补位动画 iOS 长按移动UITableViewCel ...
- FIT AP和FAT AP的区别
1.Fat模式是传统的WLAN组网方案,无线AP本身承担了认证终结.漫游切换.动态密钥产生等复杂功能,相对来说AP的功能较重,因此称为Fat AP. 2.Fit模式是新兴的一种WLAN组网模式,其相 ...
- day42-进程池
#进程池Pool:apply apply_async-close-join-get map callback #1.进程池Pool:执行下面代码发现任务012先执行,345后执行,因为进程池只有3个进 ...
- kubernets轻量 contain log 日志收集技巧
首先这里要收集的日志是容器的日志,而不是集群状态的日志 要完成的三个点,收集,监控,报警,收集是基础,监控和报警可以基于收集的日志来作,这篇主要实现收集 不想看字的可以直接看代码,一共没几行,尽量用调 ...
- VS各种错误集成总结,持续更新
1.error C4996: 'GetVersionExW': 被声明为已否决 解决办法:工程 -- 配置属性 --C/ C++ -- 常规 -- SDL check 关掉 2.fatal error ...
- WWT在中国:一个改变了人类探索宇宙方式的少年梦想
想象一下,在宇宙中超光速飞行,访问行星.星云.恒星和小行星将是多么美妙的体验.现在,中国的孩子们已经可以坐在屋子里,仰望穹顶,去探索星球之间无穷的奥秘. 在微软研究院.微软亚洲研究院及中国科学院国家天 ...
- cs231n spring 2017 lecture3 Loss Functions and Optimization
1. Loss function是用来量化评估当前预测的好坏,loss function越小表明预测越好. 几种典型的loss function: 1)Multiclass SVM loss:一般的S ...
- php配置memcached的扩展。
(一)安装memcached服务器 1根据系统下载相应版本的memcached服务器版本:如win7(64位=====>memcached-win64/memcached.exe 2.解压到目录 ...
- JAVA中String类的比较
首先给大家看一段代码 package javaapptest; public class JavaAppTest { public static void main(String[] args) { ...