WebApp调用手机相册或摄像头、拨打电话

一、总结

一句话总结:input标签,指定type为file,选择好对应的accept即可。camera——相机,相应的accept为image ; camcoder——摄像机,相应的accept为video;microphone——录音,相应的accept为audio;

    <input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">

二、WebApp调用手机相册或摄像头、拨打电话

最近在做一个项目,需到用到打开手机相册、拍照和拨打电话功能

打开相册:

<input type="file" accept="image/*">

#accept 属性只能与 <input type="file"> 配合使用

它规定能够通过文件上传进行提交的文件类型

accept="image/jpg,image/gif"

可以接受 GIF 和 JPEG 两种图像

如果不限制图像的格式,可以写为:accept="image/*"

打开相机:

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

#capture 属性表示需要使用的系统功能

camera——相机,相应的accept为image

camcoder——摄像机,相应的accept为video

microphone——录音,相应的accept为audio

打开相册或相机:

<input type="file" accept="image/*" multiple="multiple"/>

#multiple 属性规定输入的字段可以选择多个值。专门用来支持多选的,若有这个属性,capture属性无效

拨打电话:

正在尝试

三、html5怎样调用手机摄像头或者相册?

HTML5技术支持WebApp在手机上拍照,显示在页面上并上传到服务器。这是手机微博应用中常见的功能,当然你也可以在其它类型应用中适当使用此技术。
  1、 视频流
  HTML5 的 The Media Capture(媒体捕捉) API 提供了对摄像头的可编程访问,用户可以直接用 getUserMedia(请注意目前仅Chrome和Opera支持)获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签,并将从摄像头获得的视频作为这个标签的输入来源。
<video id=”video” autoplay=”"></video>
<script>
var video_element=document.getElementById(‘video’);
if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error); //success是回调函数,当然你也可以直接在此写一个匿名函数
}
function success(stream){
video_element.src=stream;
}
</script>
此时,video 标签内将显示动态的摄像视频流。下面需要进行拍照了。
  2、 拍照
  拍照是采用HTML5的Canvas功能,实时捕获Video标签的内容,因为Video元素可以作为Canvas图像的输入,所以这一点很好实现。主要代码如下: var canvas=document.createElement(‘canvas’); //动态创建画布对象
var ctx=canvas.getContext(’2d’);
var cw=vw,ch=vh;
ctx.fillStyle=”#ffffff”;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //将video对象内指定的区域捕捉绘制到画布上指定的区域,可进行不等大不等位的绘制。
document.body.append(canvas);   3、 图片获取
  从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像,类似于“data:image/png;base64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”); 这样,imgData变量就存储了一长串的字符数据内容,表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分,所以要让实际服务器接收的图像数据应该是这部分,我们可以用两种办法来获取。
  第一种:是在前端截取22位以后的字符串作为图像数据,例如:
var data=imgData.substr(22);   如果要在上传前获取图片的大小,可以使用:
var length=atob(data).length; //atob 可解码用base-64解码的字串   第二种:是在后端获取传输的数据后用后台语言截取22位以后的字符串(也就是在前台略过上面这步直接上传)。例如PHP里:
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);   4、 图片上传
  在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用:
$.post(‘upload.php’,{‘data’:data}); 在后台我们用PHP脚本接收数据并存储为图片。
function convert_data($data){
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,’w');
fwrite($fp,$image);
fclose($fp);
}   以上的解决方案不仅能用于Web App拍照上传,也可以通过Canvas的编辑功能函数提供图片编辑,例如裁剪、上色、涂鸦、圈点等功能,然后把用户编辑完的图片上传保存到服务器上。
  在还在不断补充修正的HTML5的驱动下,Web App与Native App之间的距离将越来越小。在可预见的不远的未来,越来越多老的和新的开发项目必将会迁移到WEB应用上来。
相关规范:
The MediaCapture API:http://www.w3.org/TR/media-capture-api/
Canvas:http://dev.w3.org/html5/2dcontext/
 需要加载cordova.js
方法:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
//相册
function fromCamera()
{
var source = pictureSource.PHOTOLIBRARY;
navigator.camera.getPicture(function (imageData) {
setimg(imageData);
}, function (message) {
if (source == pictureSource.CAMERA)
alert('加载照相机出错!' + message);
else
alert('加载相册出错!' + message);
}, {
quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source
});
}
//拍照
function EditImgPz()
{
navigator.camera.getPicture(function (imageData) {
setimg(imageData);
}, function (message) {
alert(message);
}, {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: true
});
}

四、HTML5调用手机摄像机、相册功能 <input>方法

最近用MUI框架做webapp项目,在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功能!

在查资料的时候,想起了另一种用input调用摄像和相册功能的方法,之前没有深入了解过,现在整理一下:

不需要特殊环境,使用input标签 type值为file,可以调用系统默认的照相机、相册、摄像机、录音功能。先上代码:

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

<input type="file" accept="video/*" capture="camcorder">

<input type="file" accept="audio/*" capture="microphone">

accept表示打开的系统文件目录

capture表示的是系统所捕获的默认设备,camera:照相机;camcorder:摄像机;microphone:录音;

其中还有一个属性multiple,支持多选,当支持多选时,multiple优先级高于capture,所以只用写成:<input type="file" accept="image/*" multiple>就可以,可以在手机上测试一下。那么选中的图片怎样获取并显示呢?

html:(css)

<form id="form1" runat="server">
<input type='file' id="imgInp" />
<div>
<img id="blah" src="#" alt="显示您上传的商品图片" />
</div> 
</form>

js:

function readURL(input) {
   if (input.files && input.files[0]) {
       var reader = new FileReader();
       reader.onload = function (e) {
           $('#blah').attr('src', e.target.result);
       }
       reader.readAsDataURL(input.files[0]);
   }
}
$("#imgInp").change(function(){
   readURL(this);
});

样式自己调整,这样就能显示刚拍下的照片或者从相册中选中的图片了。

五、(亲测可用)html5 file调用手机摄像头

在切图网一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api  然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 input file=""  ,纯html5,并且不涉及到js ,就可以实现。代码如下:

(亲测可用)html5调用手机摄像头

html 代码效果预览

<input type="file" accept="image/*" capture="camera">
    <input type="file" accept="video/*" capture="camcorder">
    <input type="file" accept="audio/*" capture="microphone">

capture表示,可以捕获到系统默认的设备,比如:camera--照相机;camcorder--摄像机;microphone--录音。
accept表示,直接打开系统文件目录。

其实html5的input:file标签还支持一个multiple属性,表示可以支持多选,如:

html 代码效果预览

<input type="file" accept="image/*" multiple>

加上这个multiple后,capture就没啥用了,因为multiple是专门yong用来支持多选的。

限制只能选择图片

    1. <input type="file" accept="image/*">

限制只能选择视频

    1. <input type="file" accept="video/*">

限制只能选择音频

    1. <input type="file" accept="audio/*">

直接打开摄像头录像

    1. <input type="file" accept="video/*" capture="camera">

WebApp调用手机相册或摄像头、拨打电话的更多相关文章

  1. HTML5 调用手机相册和摄像头的方法并上传微信下测试通过

    <input type="file" capture="camera" accept="image/*" id="camer ...

  2. ios最新调用手机相册选取头像(UIActionSheet过期)

    由于 UIActionSheet过期所以可以使用如下调用手机相册 前提不要忘记添加代理如下两个 UIImagePickerControllerDelegate,UINavigationControll ...

  3. iOS调用其它App,如拨打电话、发送邮件等。UIApplication:openURL:方法是实现这一目的的

    在iOS开发中,经常需要调用其它App,如拨打电话.发送邮件等.UIApplication:openURL:方法是实现这一目的的最简单方法,该方法一般通过提供的url参数的模式来调用不同的App. 通 ...

  4. h5调用手机相册摄像头以及文件夹

    在之前一家公司的时候要做一个app里面有上传头像的功能,当时研究了好久,找到了一篇文章关于h5摄像头以及相册的调用的,所以就解决了这个问题了!!我这里记录一下以便后面有人需要,可以参考一下!!!! 下 ...

  5. web调用手机相册,并实现动态增加图片功能

    注:经测试h5调用相册效果有兼容性问题,安卓仅能调用拍照功能(部分安卓可能会调不起来,所以建议用app原生调用),ios可调起拍照和相册功能. <html xmlns="http:// ...

  6. a标签的妙用-拨打电话、发送短信、发送邮件

    前端时间在做手机WAP网站时,遇到需要点击页面上显示的电话号能直接拨号的需求,查找资料发现可以使用html的a标签完美实现该需求!记录下来以备后用...... 目前主流手机浏览器对H5的支持已经很不错 ...

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

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

  8. 使用JS调用手机本地摄像头或者相册图片识别二维码/条形码

    接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍 ...

  9. ionic调用手机系统的拨打电话

    android调用如下: 在config.xml中添加 <access origin="tel:*" launch-external="yes" /> ...

随机推荐

  1. 进阶《Python高性能编程》中文PDF+英文PDF+源代码

    入门使用高性能 Python,建议参考<Python高性能编程>,例子给的很多,讲到高性能就会提到性能监控,里面有cpu mem 方法的度量,网络讲了一点异步,net profiler 没 ...

  2. 一个Web报表项目的性能分析和优化实践(五):重构有助于性能优化么?

    项目从初次开发到现在,已经快3年了.期间,有N个工程师参与过. 需求方面:增加减少,反反复复,无数次:人力方面:增加减少,不稳定:时间方面:功能开发着急上线,Bug开发紧急修复. 因此,代码臃肿,问题 ...

  3. [Javascript] this in Function Calls

    In most cases, the value of a function's this argument is determined by how the function is called. ...

  4. JAVA学习第五十四课 — IO流(八)打印流 &amp; 序列流

    一.综合练习-文件清单列表 获取指定文件夹下,指定扩展名的文件(含子文件夹),并将这些文件的绝对路径写到一个文本文件里.也就是建立一个指定扩展名的文件列表 1.深度遍历 2.过滤器->容器 3. ...

  5. Oracle的表空间和sqlplus

    1.  表空间的概念 曾经接触过的数据库都没有听到过表空间这个词,在前一段时间看到Oracle数据库的时候发现表空间无处不在. 所以表空间在Oracle数据库中应该是一个非经常常使用而且非常重要的概念 ...

  6. jQuery11 data() : 数据缓存

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. vim 配置.vimrc文件

    下面这个.vimrc文件是根据公司里的一个前辈配置的,这里记录下,方便以后使用.它的功能,其实跟网上很多.vimrc配置的相比,还是小儿科.我记录下来,主要还是因为自己已经习惯了这个工作环境跟快捷键. ...

  8. 42.cnpm不是内部命令的解决方案:配置环境变量

    转自:https://blog.csdn.net/u014540814/article/details/78777961

  9. Android Studio 解决unspecified on project app resolves to an APK archive which is not supported

    出现该问题unspecified on project app resolves to an APK archive which is not supported as a compilation d ...

  10. CF 843 A. Sorting by Subsequences

    A. Sorting by Subsequences You are given a sequence a1, a2, ..., an consisting of different integers ...