- 科尔多瓦教程
- 科尔多瓦 - 主页
- 科尔多瓦 - 概述
- 科尔多瓦 - 环境设置
- 科尔多瓦 - 第一次申请
- Cordova - Config.xml 文件
- 科尔多瓦 - 存储
- 科尔多瓦 - 活动
- 科尔多瓦 - 后退按钮
- 科尔多瓦 - 普拉格曼
- Cordova - 电池状态
- 科尔多瓦 - 相机
- 科尔多瓦 - 联系方式
- 科尔多瓦 - 设备
- Cordova - 加速度计
- Cordova - 设备方向
- 科尔多瓦 - 对话
- 科尔多瓦 - 文件系统
- 科尔多瓦 - 文件传输
- 科尔多瓦 - 地理定位
- 科尔多瓦 - 全球化
- Cordova - InAppBrowser
- 科尔多瓦 - 媒体
- Cordova - 媒体捕获
- 科尔多瓦 - 网络信息
- 科尔多瓦 - 启动画面
- 科尔多瓦 - 振动
- 科尔多瓦 - 白名单
- 科尔多瓦 - 最佳实践
- 科尔多瓦有用资源
- 科尔多瓦 - 快速指南
- 科尔多瓦 - 有用的资源
- 科尔多瓦 - 讨论
Cordova - 媒体捕获
该插件用于访问设备的捕获选项。
第 1 步 - 安装媒体捕获插件
要安装此插件,我们将打开命令提示符并运行以下代码 -
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media-capture
第 2 步 - 添加按钮
由于我们想向您展示如何捕获音频、图像和视频,因此我们将在index.html中创建三个按钮。
<button id = "audioCapture">AUDIO</button> <button id = "imageCapture">IMAGE</button> <button id = "videoCapture">VIDEO</button>
第 3 步 - 添加事件监听器
下一步是在index.js的onDeviceReady中添加事件侦听器。
document.getElementById("audioCapture").addEventListener("click", audioCapture); document.getElementById("imageCapture").addEventListener("click", imageCapture); document.getElementById("videoCapture").addEventListener("click", videoCapture);
步骤 4A - 捕获音频功能
index.js中的第一个回调函数是audioCapture。要启动录音机,我们将使用captureAudio方法。我们使用两个选项 -限制将允许每次捕获操作仅记录一个音频剪辑,持续时间是声音剪辑的秒数。
function audioCapture() { var options = { limit: 1, duration: 10 }; navigator.device.capture.captureAudio(onSuccess, onError, options); function onSuccess(mediaFiles) { var i, path, len; for (i = 0, len = mediaFiles.length; i < len; i += 1) { path = mediaFiles[i].fullPath; console.log(mediaFiles); } } function onError(error) { navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error'); } }
当我们按下AUDIO按钮时,录音机将打开。
控制台将显示返回的用户捕获的对象数组。
步骤 4B - 捕捉图像功能
捕获图像的功能与上一个相同。唯一的区别是我们这次使用captureImage方法。
function imageCapture() { var options = { limit: 1 }; navigator.device.capture.captureImage(onSuccess, onError, options); function onSuccess(mediaFiles) { var i, path, len; for (i = 0, len = mediaFiles.length; i < len; i += 1) { path = mediaFiles[i].fullPath; console.log(mediaFiles); } } function onError(error) { navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error'); } }
现在我们可以单击IMAGE按钮来启动相机。
当我们拍照时,控制台将记录带有图像对象的数组。
步骤 4C - 捕捉视频功能
让我们重复捕捉视频的相同概念。这次我们将使用videoCapture方法。
function videoCapture() { var options = { limit: 1, duration: 10 }; navigator.device.capture.captureVideo(onSuccess, onError, options); function onSuccess(mediaFiles) { var i, path, len; for (i = 0, len = mediaFiles.length; i < len; i += 1) { path = mediaFiles[i].fullPath; console.log(mediaFiles); } } function onError(error) { navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error'); } }
如果我们按下VIDEO按钮,相机将打开,我们可以录制视频。
视频保存后,控制台将再次返回数组。这次里面有视频对象。