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,稍微规矩好看一点,再怎么说,这样的话也算 ...
随机推荐
- WPF实现无刷新动态切换多语言(国际化)
1. 在WPF中国际化使用的是 .xaml文件的格式 如图:Resource Dictionary (WPF) 2. 创建默认的语言文件和其他语言文件 这里以英语为默认语言,新建一个 Resource ...
- 【c++】iostreeam中的类为何不可以直接定义一个无参对象呢
缘起 #include <iostream> #include <fstream> #include <sstream> using namespace std; ...
- 二叉树链表C++实现
结点的构造 源代码:https://github.com/cjy513203427/C_Program_Base/tree/master/57.%E4%BA%8C%E5%8F%89%E6%A0%91% ...
- mariadb sequence
MariaDB 10.3 正式版推出后,有了像 Oracle.PostgreSQL 里的序列特性. 同时表字段AUTO_INCREMENT原特性还保持,但是sequence特性在某些特定情境还是很有用 ...
- Mysql插入Emoji表情出错
Caused by: java.sql.SQLException: Incorrect at com.mysql.jdbc.SQLError.createSQLException(SQLError.j ...
- Java - 关于扩展线程安全类的一些思考
重用可以节省我们进行开发和测试(测试比我们自己测严谨地多)的时间和其他各种成本. 但是,对一个线程安全类进行扩展的时候就需要思考一些问题. 比如我们熟知的线程安全类Vector,该类中对所有的公有方法 ...
- 流畅的python和cookbook学习笔记（二）
1.元组拆包和解压序列赋值 任何的序列 (或者是可迭代对象) 可以通过一个简单的赋值语句解压并赋值给多个 变量.唯一的前提就是变量的数量必须跟序列元素的数量是一样的. 1.平行赋值: >> ...
- canvas image array(canvas图片阵列)
code: <!DOCTYPE html> <html> <head> <title>hehe</title> </head& ...
- FCKeditor 添加行距、字体功能 （转载）
一.首先为FCKeditor添加外部插件在fckeditor/editor/plugins文件夹下建立新文件夹lineHeight,并在其中创建fckplugin.js文件,在其文件中办輸入代码:FC ...
- CentOS 7运维管理笔记(2)----修改命令提示符颜色
使用 su 命令切换到root用户: 使用 vi /etc/bashrc 命令插入如下代码: PS1="[\e[1;32m\u\e[m\e[1;33m@\e[m\e[1;35m\h\e[m ...