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,稍微规矩好看一点,再怎么说,这样的话也算 ...
随机推荐
- zato集群部署
注: SQL ODB和Cluster’s config需要首先依次创建,其他三个次序随意 对不熟悉的命令,使用server create *** -h 查看帮助文档 修改完后配置文件,要重启(zato ...
- ApplicationHost.config文件被破坏导致IIS崩溃
“”Application Host Helper Service 在尝试删除历史目录“C:\inetpub\history\CFGHISTORY_0000000475”时遇到错误.将跳过并忽略此目录 ...
- 全面理解Java内存模型(JMM)及volatile关键字（转）
原文地址:全面理解Java内存模型(JMM)及volatile关键字 关联文章: 深入理解Java类型信息(Class对象)与反射机制 深入理解Java枚举类型(enum) 深入理解Java注解类型( ...
- phpmyadmin登录报错crypt_random_string requires at least one symmetric cipher be loaded 解决方法
通过phpmyadmin登陆时提示以下错误: phpmyadmin crypt_random_string requires at least one symmetric cipher be load ...
- Linux Loop设备 使用
有时候需要一个独立的块设备,loop设备是个方便的选择,可通过如下方式创建 dd if=/dev/zero of=./loopback_file bs=1M count=1000 losetup /d ...
- php explode时间分割
<?php $str = "2017-02-27 13:40:42"; $first=explode(' ',$str); $second=explode('-', $fir ...
- promose
function runAsync1(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function() ...
- aop postsharp的使用:在方法进入/成功/失败/退出时获取方法名和参数值
1.nuget安装postsharp 2.编写attribute标记 [Serializable] [AttributeUsage(AttributeTargets.Method, AllowMult ...
- CSS3,3D效果轮播图
---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...
- input框中如何添加搜索
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...