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,稍微规矩好看一点,再怎么说,这样的话也算 ...
随机推荐
- The Add-in 'VMDebugger' failed to load or caused an exception.....的解决办法
异常如图: 解决办法: (把VS的设置导出来,做出相应修改后,再导入,问题就可以解决了) 1. 在Visual Studio中选择 Tools --> Import and Export Set ...
- 万物智联，腾讯云 IoT 边缘计算揭秘——云+未来峰会开发者专场回顾
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 背景:现在是万物互联的时代,智能穿戴设备,智能家居,无人商业,改变了我们的生活方式.预计到2021年,全球物联网设数将达到150亿,超过手机 ...
- Zato入门part2
Zato入门part1 参考1 前提:从part已经建立了集群.服务框架并成功的调用了服务.现在我们通过HTTP.ZeroMQ和JSON使用外部服务. 除非坚持手工调用,否则服务从来不知道什么确切的U ...
- extern、 const、static的理解
1.extern:是一个声明,用来告诉编译器其它文件中存在这个变量,可以拿到使用.是文件级的 2.static: 是一个文件内的声明,只能在本文件内使用,是文件中的(函数级的) 3.const ...
- vue中echarts随窗体变化
<div id="myChart" :style="{width: '100%', height: '345px'}"></div> & ...
- java爬取百度首页源代码
爬虫感觉挺有意思的,写一个最简单的抓取百度首页html代码的程序.虽然简单了一点,后期会加深的. package test; import java.io.BufferedReader; import ...
- c# winfrom 页面的enter变为tab 功能使用 在特定的按钮里面如何继续当enter使用求大神帮忙解答一下 ！！急
enter 当tab 键用 已经实现 :例如按回车的时候切换一直走 ,走到一个按钮如何让回车键在这个按钮的时候还是执行enter按钮的功能而不是tab 求大神解答一下, 目前页面tab功能改为 ...
- Expression Blend实例中文教程(2) - 界面快速入门
上一篇主要介绍Expression系列产品,另外概述了Blend的强大功能,本篇将用Blend 3创建一个新Silverlight项目,通过创建的过程,对Blend进行快速入门学习. 在开始使用Ble ...
- BEM样式使用规范
BEM 是 Block(块) Element(元素) Modifier(修饰器)的简称 使用BEM规范来命名CSS,组织HTML中选择器的结构,利于CSS代码的维护,使得代码结构更清晰(弊端主要是名字 ...
- Mybaits插入记录返回主键值
某些情况进行insert时不知道主键值(主键为自增),例如系统新增用户时,有用户序号(主键 自增),用户名,密码.插入时只需插入用户名和密码,之后取得mysql自增的序号. 如下为mysql的usr表 ...