phonegap 捕获图片,音频,视屏 api capture
一、 capture Api 简单介绍
capture 对象用于获取视屏,音频和图像,它是一个全局对象,通过 navigator.device.capture 来访问
方法：
capture.captureAudio 捕获音频
capture.captureImage 捕获图片
capture.captureVideo 捕获视屏
MediaFile.getFormatData 获取媒体文件的格式信息
二、 captureAudio 捕获音频
该方法通过设备默认的音频录制应用程序开始一个异步操作以采集音频录制。该操作允许设 备用户在一个会话中同时采集多个录音。
当用户退出音频录制应用程序，或系统到达 CaptureAudioOptions 的 limit 参数所定义的最 大录制数时都会停止采集操作。
如果没有设置 limit 参数的值，则使用其默认值 1，也就是 说当用户录制好一个音频剪辑后采集操作就会终止。
当采集操作结束后，系统会调用 CaptureCB 回调函数，传递一个包含所有采集到的音频剪辑 文件的 MediaFile 对象数组。
如果用户在完成一个音频剪辑采集之前终止采集操作，系统会 调用 CaptureErrorCB 回调函数，并传递一个包含 CaptureError.CAPTURE_NO_MEDIA_FILES 错误代码的 CaptureError 对象。
limit：在单个采集操作期间能够记录的音频剪辑数量最大值，必须设定为大于等于 1(默认 值为 1)。
duration：一个音频剪辑的最长时间，单位为秒。
mode：选定的音频模式，必须设定为 capture.supportedAudioModes 枚举中的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<style>
#supportedMode{
width: 288px; height: 100px;position:relative;border:1px solid #b8b8b8;
}
#message{
width: 288px; height: 100px;position:relative;border:1px solid #b8b8b8;
}
#audiocontainer{
width: 288px; height: 100px; position:relative;border:1px solid #b8b8b8;
}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){ document.addEventListener("deviceready",onDeviceReady,false); });
function onDeviceReady(){ $('#captureAudioBtn').click(function(){
navigator.device.capture.captureAudio(captureSuccess, captureError, {limit:2,duration:5});//limit:2表示录音的次数，duration表示一个音频剪辑的最长时间，单位为秒。 })
}
//成功
function captureSuccess(mediaFiles){
var i;
for(i=0;i<mediaFiles.length;i++){
var fullPath= mediaFiles[i].fullPath;
var name= mediaFiles[i].name
/*
console.log('第'+i+'个音频');
console.log('fullPath-->'+fullPath);
console.log('name-->'+name);
console.log("type--->" + mediaFiles[i].type);
console.log("lastModifiedDate--->" + mediaFiles[i].lastModifiedDate);
console.log("size--->" + mediaFiles[i].size);
*/
$("#message").append ("filename:"+name +"path:"+fullPath+"<br/>");
$("#audiocontainer").append("<audio autoplay=true controls='controls' src='"+fullPath+"' >your browder doesn't support audio tag</audio>"); }
} //失败的回调函数
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
} </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>phonegap100.com</h1>
</div>
<div data-role="content" >
<a data-role="button" id="captureAudioBtn" >Capture Audio</a>
<div id="audiocontainer"></div>
<div id="message"></div>
</div>
<div data-role="footer">
<h4>phonegap中文网</h4>
</div>
</div> </body>
</html>
三、 capture.captureImage 捕获图片
开启摄像头应用程序，返回采集到的图像文件信息。
该方法通过设备的摄像头应用程序开始一个异步操作以采集图像。该操作允许设备用户在一个会话中同时 采集多个图像。
当用户退出摄像头应用程序，或系统到达 CaptureImageOptions 的 limit 参数所定义的最大图像数时都会 停止采集操作。
如果没有设置 limit 参数的值，则使用其默认值 1，也就是说当用户采集到一个图像后采 集操作就会终止。
当 采集操作结束后，系统会调用 CaptureCB 回调函数，传递一个包含每个采集到的图像文件的 MediaFile 对象数组。
如果用户在完成一个图像采集之 前终止采集操作，系统会调用 CaptureErrorCB 回调函数，并 传递一个包含 CaptureError.CAPTURE_NO_MEDIA_FILES 错误代码的 CaptureError 对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<style>
#supportedMode{
width: 288px; height: 100px;position:relative;border:1px solid #b8b8b8;
}
#message{
width: 288px; height: 100px;position:relative;border:1px solid #b8b8b8;
}
#audiocontainer{
width: 288px; height: 100px; position:relative;border:1px solid #b8b8b8;
}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
document.addEventListener("deviceready",onDeviceReady,false);
});
function onDeviceReady(){
// alert("device ready");
$(".captureAudioBtn").click(function(){
navigator.device.capture.captureImage(captureSuccess, captureError, {limit:2}); //这个方法可以多次调用，调用次数由 limit:2决定
}) }
//成功 回调函数里包含一个数组 数组里是每次拍照的信息
function captureSuccess(mediaFiles){
var i;
for(i=0;i<mediaFiles.length;i++){
var fullPath= mediaFiles[i].fullPath;
var name= mediaFiles[i].name
/*
console.log('第'+i+'张图片');
console.log('fullPath'+fullPath); //文件路径
console.log('name'+name); //文件名
console.log("type--->" + mediaFiles[i].type); //文件类型
console.log("lastModifiedDate--->" + mediaFiles[i].lastModifiedDate); //最后修改文件的时间
console.log("size--->" + mediaFiles[i].size); //文件大小
*/
$('#message').append('fullPath->'+fullPath+','+'name->'+name+'<br>');
$("#imgcontainer").append("<img width=300 height=300 src='"+fullPath+"' />"); }
} //失败的回调函数
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');//这里是调用原生的alert
} </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>phonegap100.com</h1>
</div>
<div data-role="content" >
<a data-role="button" class="captureAudioBtn" >拍照</a>
<div id="imgcontainer"></div>
<div id="message"></div>
</div>
<div data-role="footer">
<h4>phonegap中文网</h4>
</div>
</div> </body>
</html>
四、 capture.captureVideo 捕获视屏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<style>
#supportedMode{
width: 288px; height: 100px;position:relative;border:1px solid #b8b8b8;
}
#message{
width: 288px; height: 100px;position:relative;border:1px solid #b8b8b8;
}
#audiocontainer{
width: 288px; height: 100px; position:relative;border:1px solid #b8b8b8;
}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
document.addEventListener("deviceready",onDeviceReady,false); });
function onDeviceReady(){
$(".captureVideoBtn").click(function(){
navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 2});
})
} function captureSuccess(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
var fullPath= mediaFiles[i].fullPath; var name= mediaFiles[i].name
console.log('第'+i+'个音频');
console.log('fullPath-->'+fullPath);
console.log('name-->'+name);
console.log("type--->" + mediaFiles[i].type);
console.log("lastModifiedDate--->" + mediaFiles[i].lastModifiedDate);
console.log("size--->" + mediaFiles[i].size); mediaFiles[i].getFormatData(onSuccess,onError);
function onSuccess(fileData){
console.log("codecs---->" + fileData.codecs);
console.log("bitrate--->" + fileData.bitrate);
console.log("height---->" + fileData.height);
console.log("width---->" + fileData.width);
console.log("duration---->" + fileData.duration); }
function onError(err){
console.log("失败"+err);
} }
} // Called if something bad happens.
//
function captureError(error) {
if (error.code == CaptureError.CAPTURE_INTERNAL_ERROR){
navigator.notification.alert("CaptureError.CAPTURE_INTERNAL_ERROR");
}
else if (error.code == CaptureError.CAPTURE_APPLICATION_BUSY){
navigator.notification.alert("CaptureError.CAPTURE_APPLICATION_BUSY");
}
else if (error.code == CaptureError.CAPTURE_INVALID_ARGUMENT){
navigator.notification.alert("CaptureError.CAPTURE_INVALID_ARGUMENT");
}
else if (error.code == CaptureError.CAPTURE_NO_MEDIA_FILES){
navigator.notification.alert("CaptureError.CAPTURE_NO_MEDIA_FILES");
}
else if (error.code == CaptureError.CAPTURE_NOT_SUPPORTED){
navigator.notification.alert("CaptureError.CAPTURE_NOT_SUPPORTED");
}
} </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>phonegap100.com</h1>
</div>
<div data-role="content" >
<a data-role="button" class="captureVideoBtn" >Capture Video</a>
<div id="videocontainer"></div>
<div id="message"></div>
</div>
<div data-role="footer">
<h4>phonegap中文网</h4>
</div>
</div> </body>
</html>
五、 MediaFile.getFormatData 获取媒体文件的格式信息
MediaFileData “ 封装媒体文件的格式信息。
属性：
codecs： 音频及视频内容的实际格式。（DOMString 类型）
bitrate：文件内容的平均比特率。对于图像文件，属性值为 0。（数字类型）
height： 用像素表示的图像或视频高度，音频剪辑的该属性值为 0。（数字类型）
width： 用像素表示的图像或视频的宽度，音频剪辑的该属性值为 0。（数字类型）
duration： 以秒为单位的视频或音频剪辑时长，图像文件的该属性值为 0。（数字类型）
mediaFiles[i].getFormatData(onSuccess,onError);
function onSuccess(fileData){
console.log("codecs---->" + fileData.codecs);
console.log("bitrate--->" + fileData.bitrate);
console.log("height---->" + fileData.height);
console.log("width---->" + fileData.width);
console.log("duration---->" + fileData.duration); }
function onError(err){
console.log("失败"+err);
}
详细代码参考第四capture.captureVideo 捕获视屏
phonegap 捕获图片,音频,视屏 api capture的更多相关文章
- 读取视屏文件，保存帧图片为ppm文件
ffmpeg跟sdl的学习过程:一.版本信息:ffmpeg-3.0.2.tar.bz2SDL2-2.0.4.tar.gz二.编译过程:1.ffmgeg的编译:./configure --enable- ...
- 点击图片video全屏
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- iOS：简易的音视屏播放框架XYQPlayer
一.前缀 一直都想好好学学音视频这方面的知识,抽了几个周末参考一些资料,尝试着写了一个简易的音视频播放框架,支持音视频播放.视频截图.音乐缓存,其实吧,也就是尽可能的封装罢了,方便以后自己使用.目前只 ...
- opencv读取并播放avi视屏
视屏的本质是一些静态的图像的集合,opencv可以不断读取视屏中的图片,显示,就产生了类似电影的效果. 这样也就可以通过opencv对实时的视屏流进行处理了. #include "stdaf ...
- ffmpeg 编码（视屏）
分析ffmpeg_3.3.2 muxing 1:分析主函数,代码如下: int main(int argc, char **argv) { OutputStream video_st = { }, a ...
- 全屏API接口
HTML5的诞生给我们提供了很多精彩的JavaScript和HTML新功能和新特征.有些新特征我们已知多年并大量的使用,而另外一些主要是用在前沿的手机移动技术上,或者桌面应用中起辅助作用.不管这些HT ...
- FFmpeg + php 视屏转换
什么是FFmpeg? FFmpeg是一个开源免费跨平台的视频和音频流方案,属于自由软件,采用LGPL或GPL许可证(依据你选择的组件).它提供了录制.转换以及流化音视频的完整解决方案.它包含了非常先进 ...
- Windows 10 的音频和 MIDI API将统一
微软一统 Windows 10 的音频和 MIDI API 微软在夏季NAMM上的A3E大会上做了主题演讲,他们对Windows 10的音频和MIDI API都做了新的规划,开发者针对Windows ...
- opencv视屏流嵌入wxpython框架
前几篇博客分享搭建人脸识别与情绪判断的环境和源码,但是没有UI,界面很难看,一打开就是opencv弹出的一个视屏框.处女座的我看着非常难受,于是决定做一个UI,稍微规矩好看一点,再怎么说,这样的话也算 ...
随机推荐
- React.js 小书 Lesson19 - 挂载阶段的组件生命周期（二）
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson19 转载请注明出处,保留原文链接和作者信息. 这一节我们来讨论一下对于一个组件来说,cons ...
- JavaEE 7 最全教程集锦(转)
转自 http://www.iteye.com/news/28009 甲骨文公司已经在6月份正式发布了JavaEE 7,该版本带来了诸多新的规范及特性,将企业级开发提升到了一个新的层次. Java E ...
- bzoj 5368: [Pkusc2018]真实排名
Description 小C是某知名比赛的组织者,该比赛一共有n名选手参加,每个选手的成绩是一个非负整数,定义一个选手的排名是 :成绩不小于他的选手的数量(包括他自己).例如如果3位选手的成绩分别是[ ...
- 纯手写实现HashMap
1.hashmap的实现 ① 初始化 1)定义一个Node<K, V>的数组来存放元素,但不立即初始化,在使用的时候再加载 2)定义数组初始大小为16 3)定义负载因子,默认为0.75, ...
- Spring Cloud实战之初级入门（六）— 服务网关zuul
目录 1.环境介绍 2.api网关服务 2.1 创建工程 2.3 api网关中使用token机制 2.4 测试 2.5 小结 3.一点点重要的事情 1.环境介绍 好了,不知不觉中我们已经来到了最后一篇 ...
- Java基础（九）多线程
一.线程和进程 进程(Process): 1.是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础. 2.在早期面向进程设计的计算机结构中,进程是程 ...
- No.4一步步学习vuejs之表单输入绑定
基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以 ...
- Spring课程 Spring入门篇 6-1 Spring AOP API的PointCut、advice的概念及应用
本节主要是模拟spring aop 的过程. 实现spring aop的过程 这一节老师虽然说是以后在工作中不常用这些api,实际上了解还是有好处的, 我们可以从中模拟一下spring aop的过程. ...
- flask 继承模版的基本使用1
- 子级用css float浮动 而父级不能自适应高度解决方法
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...