H5可以像这样android调用系统相机相机吗

来源：蜘蛛抓取(WebSpider) 时间：2018-02-25 15:25 标签： ios 调用相机相册
5097人阅读
&!--accept表示，直接打开系统文件目录。capture表示，可以捕获到系统默认的设备，比如：camera--照相机；camcorder--摄像机；microphone--录音。--&
& & &!--调用手机的拍照功能和直接打开系统文件目录。--&
& & &input type=&file& accept=&image/*& capture=&camera&&
& & &!--调用手机的录像功能和直接打开系统文件目录。--&
& & &input type=&file& accept=&video/*& capture=&camcorder&&
& &&!--调用手机的录像功能和直接打开系统文件目录。苹果手机调出来的是拍照和录像安卓手机调出来的录音功能--&
& &&input type=&file& accept=&audio/*& capture=&microphone&&&
& & &!--nput:file标签还支持一个multiple属性，表示可以支持多选,capture就没啥用了，因为multiple是专门用来支持多选的。--&
& &&input type=&file& accept=&audio/*& multiple&
& &&!--上传文件--&
& &&input type=&file& name=&&&
访问：9577次
排名：千里之外这次又来分享个好东西！
调用手机相机拍照或者是调用手机相册选择照片，这个功能在 手机端页面 或者 webApp 应该是常用到的，就拿个人或会员资料录入那块来说就已经是经常会碰到的，
每当看到这块功能的时候，前端的小伙伴就得去找各种各样的插件。除非你收藏了什么好东西，或者是你收藏了什么比较旧的、需求跟不上的好东西，需求不一样体验不好 那你提交了，产品经理会买你账吗？
好了，咱入正题！
这里主要是针对手机端页面或者webApp的，pc端页面效果欠佳（有时候点击选择按钮，弹框要等你上完厕所才能弹得出来）
这里分两块代码，分别为 html 和 js
&input id="fileBtn"&type="file"&onchange="upload('#fileBtn',&'#img');"&accept="image/*"&capture="camera"/&
&img src="" id="img"/&
# accept 属性（允许上传两种文件类型：gif 和 jpeg）
# capture 捕获到系统默认的设备，有三个参数值可设置
camera--照相机； camcorder--摄像机； microphone--录音
# js代码我做了封装, 参数一表示 "选择文件" 的 id，参数二表示 "显示图片" 的 id，
# 若是 ios 只能调用摄像头，不能选择打开相册的话，就把这个【capture="camera"】去掉，直接加一个属性 multiple
var upload = function(c, d){
"use strict";
var $c = document.querySelector(c),
$d = document.querySelector(d),
file = $c.files[0],
reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
$d.setAttribute("src", e.target.result);
# 参数在上面 HTML 就已经讲解了，
# file 表示你选中的那个图片，然后它里面有几个属性 name、size、type、slice等，也都非常实用，
# FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
# 调用 FileReader 的 readAsDataURL 接口，将启动异步加载文件内容，通过给 reader 监听一个 onload 事件，
# 将数据加载完毕后，在onload事件处理中，通过 event 的 result 属性即可获得文件内容，然后扔进 img 的 src 即可 打开图片并预览。
这个对于前端来说是非常实用的，
不过点击选择文件这个按钮选择系统文件的时候弹出的操作菜单，是依赖你所使用的浏览器的，建议还是用 微信 来测试（最佳），而如果你刚好要弄微信端的页面，那就再好不过啦！
声明：本文未经本人允许，严禁抄袭 转载！
觉得得到帮助的可以点个推荐，让更多人也可以得到帮助。
阅读(...) 评论()
QQ邮箱(欢迎打扰):H5代码实现调用本地摄像头实现实时视频以及拍照功能
这是柚子皮&
getUserMedia API
HTML 5 的getUserMedia API提供了访问媒体的能力, 基于该特性, 开发者可以不依赖任何插件下去访问视频和音频等设备.
旧版API : navigator.getUserMedia
新版API : navigator.mediaDevices.getUserMedia
getUserMedia(constraints, successCallback, errorCallback);
getUserMedia(constraints).then(successCallback).catch(errorCallback)
参数 constraints, 请求的媒体类型, 主要包含video和audio, 例如请求不带任何参数的视频和音频: {video: true, audio: true}
也可指定视频分辨率, 代码如下: {video: {width: 640, height: 360}}
移动设备上, 可指定使用前置摄像头, 代码如下: {video: {facingMode: 'user'}}
或者使用后置摄像头, 代码如下: {video: {facingMode: {exact : 'environment'}}} 成功回调函数successCallback的参数stream, 为MediaStream对象, 表示媒体流, 可以通过URL.createObjectURL(马上废弃)转换后设置为Video或Audio元素的src属性来使用, 也可以直接使用srcObject属性来使用. 失败回调函数为errorCallback
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&meta name=&viewport& content=&width=device-width, initial-scale=1.0&&
&meta http-equiv=&X-UA-Compatible& content=&ie=edge&&
&title&摄像头拍照&/title&
&video id=&video& width=&480& height=&320& controls&
&button id=&capture&&拍照&/button&
&canvas id=&canvas& width=&480& height=&320&&&/canvas&
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints,success, error)
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
navigator.getUserMedia(constraints, success, error);
let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
function success(stream) {
//兼容webkit核心浏览器
let CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
console.log(stream);
//video.src = CompatibleURL.createObjectURL(stream);
video.srcObject =
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);
alert('不支持访问用户媒体');
document.getElementById('capture').addEventListener('click', function () {
context.drawImage(video, 0, 0, 480, 320);他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)

我要回帖

更多关于 ios 调用相机相册 的文章

 

随机推荐