移动端H5，拍照，录制视频以及录音功能的调用

什么都不说，先上代码（原创）

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width"><meta name="format-detection" content="telephone=no"><meta name="apple-touch-fullscreen" content="YES"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="x5-fullscreen" content="true"/><title>调用手机功能</title><style>.btn {border-bottom: 2px solid #fff;display: block;text-align: center;padding: 2px 10%;margin: 2px 0;}.btn:first-child {border-top: 2px solid #fff;margin-top: 20px;;}</style>
</head>
<body>
<a class="btn picture">调用拍照</a>
<a class="btn camera">调用视频</a>
<a class="btn voice">调用录音</a>
<div class="pic_Box" style="height: 100px;text-align: center;margin:20px"><img src="" alt="" style="height: 100%"/>
</div>
</body>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">//创建全局变量var oCache = {};//全局方法var fn = {//录制视频OpenNorVideo: function () {$("#vedioVerify").remove();$("body").append('<div style="display:none;position:relative;" id="vedioVerify"><input type="file" name="record_file" id="vedio_file" accept="video/*" capture="camcorder" style="width:50%;height:0px;display:none;"></div>');$("#vedio_file").click(function (e) {$(this).attr('currenttime', new Date().getTime());}).trigger("click");},//调用拍照OpenCamera: function () {$("#picture").remove();$("body").append('<div style="display:none;position:relative;" id="picture"><input type="file" name="record_file" id="image_file" accept="image/*" capture="camera" style="width:50%;height:0px;display:none;"></div>');$("#image_file").click(function (e) {$(this).attr('currenttime', new Date().getTime());}).trigger("click");},//调用录音OpenMicrophone: function () {$("#audio").remove();$("body").append('<div style="display:none;position:relative;" id="audio"><input type="file" name="record_file" id="audio_file" accept="audio/*" capture="microphone" style="width:50%;height:0px;display:none;"></div>');$("#audio_file").click(function (e) {$(this).attr('currenttime', new Date().getTime());}).trigger("click");},//判断file 的apicheckFileApi: function () {if (window.File && window.FileReader && window.FileList && window.Blob) {document.write("Great success! All the File APIs are supported.");} else {document.write('The File APIs are not fully supported in this browser.');}},//判断类型是否为图片isImage:function(type){return type.match(/image\/.*/i);}};//拍照oCache.pic = $('.picture');oCache.pic.on('click', function () {fn.OpenCamera();});//摄像oCache.cr = $('.camera');oCache.cr.on('click', function () {fn.OpenNorVideo();});//录音oCache.audio = $('.voice');oCache.audio.on('click', function () {fn.OpenMicrophone();});//判断是否支持文件操作的apifn.checkFileApi();oCache.fr= window.plus?new plus.io.FileReader(): new FileReader;/*** FileReader的onload事件，文件读取成功完成时触发*另外还有onloadstart：读取开始时触发；onprogress：读取中；*onerror：出错时触发；onabort：中断时触发；onloadend：读取完成触发，无论成功或失败；**/oCache.fr.οnlοad=function(e){console.log(this.result);$('.pic_Box img').attr('src',this.result);};/*** 为动态添加的元素绑定事件，用live，jquery 1.7之前的特性* readAsDataURL为FileReader的方法，另外还有以下三种：* readAsBinaryString，读取为二进制码；readAsText，读取为文本；abort，中断读取* 另外，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中（回调中可用）。* **/$('#image_file').live('change' ,function(e){//取得文件列表FileListvar $files = e.target.files;if(!fn.isImage($files[0].type)){alert('不是图片');}else{//通过readAsDataURL，将数据读取为base64；（FileReader对象的4种方法）oCache.fr.readAsDataURL($files[0]);}});
</script>
</html>

以上的代码，使用的是input标签的type=file的方法

需要浏览器支持FileReader，兼容方面可能稍微有些小问题，比如某些浏览器无法调用摄像头只能从文件选择，比如有些只能拍照而无法进行文件选择

简单的说明下上面代码的原理。

1）点击拍照按钮（其他两个按钮也是一样的）之后，为页面添加一个隐藏的input标签，type=file，并且立刻触发click，调起拍照（或者另外两个）功能

2）不管是拍照还是从文件选择，完成之后都会触发input的change事件

3）change事件回调里可以取得文件，对文件判断类型的判断，通过FileReader的readAsDataUrl方法，将文件读取为base64数据

4）readAsDataUrl方法并不会返回读取结果，这一结果存储在 result属性中（onload回调中可用），在onload回调中，将数据获取到并放入img标签内的src属性中

移动端H5，拍照，录制视频以及录音功能的调用相关推荐

Android 使用CameraX实现预览/拍照/录制视频/图片分析/对焦/缩放/切换摄像头等操作
1. CameraX架构看官方文档 CameraX架构有如下这一段话使用CameraX,借助名为"用例"的抽象概念与设备的相机进行交互. 预览 : 接受用于显示预览的Surf ...
移动端h5唤起键盘_移动端H5界面打开后，如何自动调用软键盘
test(){ // let aa = this.$refs.input1.blur(); // this.$nextTick((x)=>{ //正确写法 // // this.$refs.in ...
AVCaptureDevice中通过调用VideoZoomFactor方法调整焦距实现拉近拉远镜头进行拍照录制视频（动画缩放画面，不闪屏）
做人脸识别的项目中用到,顺便做了下笔记 //上锁 -(void)changeDevicePropertySafety:(void (^)(AVCaptureDevice *captureDevice) ...
移动端 H5 实现拍照功能
下面是实现移动端 H5 拍照功能的几种方法: 1.使用 <input type="file">:通过 HTML5 规范中的 <input type="f ...
移动端 H5 实现拍照功能的几种方法
下面是实现移动端 H5 拍照功能的几种方法: 1.使用 <input type="file">:通过 HTML5 规范中的 <input type="f ...
微信小程录制视频上传服务器,微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器nodejs版接收-微信小程序视频上传功能-微信小程序视频上传...
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的.本文知识点:1. ...
android录制视频横向,Android从零开始(26)(设置全屏+横屏、相机拍照、视频录制)(新)...
相机拍照.视频录制相机拍照全屏显示有两种方式: 在androidManifest.xml里面的application标签下设置 android:theme="@android:style/ ...
iOS开发系列--音频播放、录音、视频播放、拍照、视频录制(转)
概览随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制,还是对麦克风.摄像 ...
牛人iOS开发系列--音频播放、录音、视频播放、拍照、视频录制
概览随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制,还是对麦克风.摄像 ...

移动端H5，拍照，录制视频以及录音功能的调用

移动端H5，拍照，录制视频以及录音功能的调用相关推荐

最新文章

热门文章