WEBAPP开发之WebApp调用手机相册或摄像头、拨打电话
凌雪 2018-09-13 来源 :网络 阅读 1589 评论 0

摘要:本文将带你了解WEBAPP开发之WebApp调用手机相册或摄像头、拨打电话,希望本文对大家学微信有所帮助。

本文将带你了解WEBAPP开发之WebApp调用手机相册或摄像头、拨打电话,希望本文对大家学微信有所帮助。


WebApp调用手机相册或摄像头、拨打电话
     
     
     
     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.getUserMedianownavigator.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://www.w3.org/TR/media-capture-api/Canvas://dev.w3.org/html5/2dcontext/
     
   
     1 需要加载cordova.js
 2 方法:
 3   document.addEventListener("deviceready", onDeviceReady, false);
 4 function onDeviceReady() {
 5 pictureSource =   navigator.camera.PictureSourceType;
 6 destinationType = navigator.camera.DestinationType;
 7 }
 8 //相册
 9   function fromCamera()
    10 {
    11 var source = pictureSource.PHOTOLIBRARY;
    12 navigator.camera.getPicture(function (imageData) {
    13 setimg(imageData);
    14 }, function   (message) {
    15 if (source == pictureSource.CAMERA)
    16 alert('加载照相机出错!' +   message);
    17 else
    18 alert('加载相册出错!' +   message);
    19 }, {
    20 quality: 50,
21 destinationType: destinationType.FILE_URI,
22 sourceType: source
    23 });
    24 }
    25 //拍照
26 function EditImgPz()
    27 {
    28 navigator.camera.getPicture(function (imageData) {
    29 setimg(imageData);
    30 }, function   (message) {
    31 alert(message);
    32 }, {
    33 quality: 50,
34 destinationType:   navigator.camera.DestinationType.FILE_URI,
35 sourceType: Camera.PictureSourceType.CAMERA,
36 allowEdit: true,
37 encodingType: Camera.EncodingType.JPEG,
38 popoverOptions: CameraPopoverOptions,
39 saveToPhotoAlbum: true
    40 });
    41 }
   
     
    四、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用来支持多选的。
 
限制只能选择图片
   
    <input type="file" accept="image/*">   
   
   
   
    限制只能选择视频
   
    <input type="file" accept="video/*">   
   
   
   
    限制只能选择音频
   
    <input type="file" accept="audio/*">   
   
   
   
    直接打开摄像头录像
   
    <input type="file" accept="video/*" capture="camera">   
   
        

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之webapp频道!

本文由 @凌雪 发布于职坐标。未经许可,禁止转载。
喜欢 | 1 不喜欢 | 0
看完这篇文章有何感觉?已经有1人表态,100%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程