UNPKG

24.8 kBMarkdownView Raw
1---
2title: Media Capture
3description: Capture audio, video, and images.
4---
5<!--
6# license: Licensed to the Apache Software Foundation (ASF) under one
7# or more contributor license agreements. See the NOTICE file
8# distributed with this work for additional information
9# regarding copyright ownership. The ASF licenses this file
10# to you under the Apache License, Version 2.0 (the
11# "License"); you may not use this file except in compliance
12# with the License. You may obtain a copy of the License at
13#
14# http://www.apache.org/licenses/LICENSE-2.0
15#
16# Unless required by applicable law or agreed to in writing,
17# software distributed under the License is distributed on an
18# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
19# KIND, either express or implied. See the License for the
20# specific language governing permissions and limitations
21# under the License.
22-->
23
24|Android|iOS| Windows 8.1 Store | Windows 8.1 Phone | Windows 10 Store | Travis CI |
25|:-:|:-:|:-:|:-:|:-:|:-:|
26|[![Build Status](http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=android,PLUGIN=cordova-plugin-media-capture)](http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=android,PLUGIN=cordova-plugin-media-capture/)|[![Build Status](http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=ios,PLUGIN=cordova-plugin-media-capture)](http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=ios,PLUGIN=cordova-plugin-media-capture/)|[![Build Status](http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=windows-8.1-store,PLUGIN=cordova-plugin-media-capture)](http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=windows-8.1-store,PLUGIN=cordova-plugin-media-capture/)|[![Build Status](http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=windows-8.1-phone,PLUGIN=cordova-plugin-media-capture)](http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=windows-8.1-phone,PLUGIN=cordova-plugin-media-capture/)|[![Build Status](http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=windows-10-store,PLUGIN=cordova-plugin-media-capture)](http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=windows-10-store,PLUGIN=cordova-plugin-media-capture/)|[![Build Status](https://travis-ci.org/apache/cordova-plugin-media-capture.svg?branch=master)](https://travis-ci.org/apache/cordova-plugin-media-capture)|
27
28# cordova-plugin-media-capture
29
30This plugin provides access to the device's audio, image, and video capture capabilities.
31
32__WARNING__: Collection and use of images, video, or
33audio from the device's camera or microphone raises important privacy
34issues. Your app's privacy policy should discuss how the app uses
35such sensors and whether the data recorded is shared with any other
36parties. In addition, if the app's use of the camera or microphone is
37not apparent in the user interface, you should provide a just-in-time
38notice before the app accesses the camera or microphone (if the
39device operating system doesn't do so already). That notice should
40provide the same information noted above, as well as obtaining the
41user's permission (e.g., by presenting choices for __OK__ and __No
42Thanks__). Note that some app marketplaces may require your app to
43provide just-in-time notice and obtain permission from the user prior
44to accessing the camera or microphone. For more information, please
45see the Privacy Guide.
46
47This plugin defines global `navigator.device.capture` object.
48
49Although in the global scope, it is not available until after the `deviceready` event.
50
51 document.addEventListener("deviceready", onDeviceReady, false);
52 function onDeviceReady() {
53 console.log(navigator.device.capture);
54 }
55
56Report issues with this plugin on the [Apache Cordova issue tracker](https://issues.apache.org/jira/issues/?jql=project%20%3D%20CB%20AND%20status%20in%20%28Open%2C%20%22In%20Progress%22%2C%20Reopened%29%20AND%20resolution%20%3D%20Unresolved%20AND%20component%20%3D%20%22Plugin%20Media%20Capture%22%20ORDER%20BY%20priority%20DESC%2C%20summary%20ASC%2C%20updatedDate%20DESC)
57
58## Installation
59
60 cordova plugin add cordova-plugin-media-capture
61
62## Supported Platforms
63
64- Amazon Fire OS
65- Android
66- BlackBerry 10
67- Browser
68- iOS
69- Windows Phone 7 and 8
70- Windows 8
71- Windows
72
73## Objects
74
75- Capture
76- CaptureAudioOptions
77- CaptureImageOptions
78- CaptureVideoOptions
79- CaptureCallback
80- CaptureErrorCB
81- ConfigurationData
82- MediaFile
83- MediaFileData
84
85## Methods
86
87- capture.captureAudio
88- capture.captureImage
89- capture.captureVideo
90- MediaFile.getFormatData
91
92## Properties
93
94- __supportedAudioModes__: The audio recording formats supported by the device. (ConfigurationData[])
95
96- __supportedImageModes__: The recording image sizes and formats supported by the device. (ConfigurationData[])
97
98- __supportedVideoModes__: The recording video resolutions and formats supported by the device. (ConfigurationData[])
99
100## capture.captureAudio
101
102> Start the audio recorder application and return information about captured audio clip files.
103
104 navigator.device.capture.captureAudio(
105 CaptureCB captureSuccess, CaptureErrorCB captureError, [CaptureAudioOptions options]
106 );
107
108### Description
109
110Starts an asynchronous operation to capture audio recordings using the
111device's default audio recording application. The operation allows
112the device user to capture multiple recordings in a single session.
113
114The capture operation ends when either the user exits the audio
115recording application, or the maximum number of recordings specified
116by `CaptureAudioOptions.limit` is reached. If no `limit` parameter
117value is specified, it defaults to one (1), and the capture operation
118terminates after the user records a single audio clip.
119
120When the capture operation finishes, the `CaptureCallback` executes
121with an array of `MediaFile` objects describing each captured audio
122clip file. If the user terminates the operation before an audio clip
123is captured, the `CaptureErrorCallback` executes with a `CaptureError`
124object, featuring the `CaptureError.CAPTURE_NO_MEDIA_FILES` error
125code.
126
127### Supported Platforms
128
129- Amazon Fire OS
130- Android
131- BlackBerry 10
132- iOS
133- Windows Phone 7 and 8
134- Windows 8
135- Windows
136
137### Example
138
139 // capture callback
140 var captureSuccess = function(mediaFiles) {
141 var i, path, len;
142 for (i = 0, len = mediaFiles.length; i < len; i += 1) {
143 path = mediaFiles[i].fullPath;
144 // do something interesting with the file
145 }
146 };
147
148 // capture error callback
149 var captureError = function(error) {
150 navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
151 };
152
153 // start audio capture
154 navigator.device.capture.captureAudio(captureSuccess, captureError, {limit:2});
155
156### iOS Quirks
157
158- iOS does not have a default audio recording application, so a simple user interface is provided.
159
160### Windows Phone 7 and 8 Quirks
161
162- Windows Phone 7 does not have a default audio recording application, so a simple user interface is provided.
163
164## capture.captureImage
165
166> Start the camera application and return information about captured image files.
167
168 navigator.device.capture.captureImage(
169 CaptureCB captureSuccess, CaptureErrorCB captureError, [CaptureImageOptions options]
170 );
171
172### Description
173
174Starts an asynchronous operation to capture images using the device's
175camera application. The operation allows users to capture more than
176one image in a single session.
177
178The capture operation ends either when the user closes the camera
179application, or the maximum number of recordings specified by
180`CaptureImageOptions.limit` is reached. If no `limit` value is
181specified, it defaults to one (1), and the capture operation
182terminates after the user captures a single image.
183
184When the capture operation finishes, it invokes the `CaptureCB`
185callback with an array of `MediaFile` objects describing each captured
186image file. If the user terminates the operation before capturing an
187image, the `CaptureErrorCB` callback executes with a `CaptureError`
188object featuring a `CaptureError.CAPTURE_NO_MEDIA_FILES` error code.
189
190### Supported Platforms
191
192- Amazon Fire OS
193- Android
194- BlackBerry 10
195- Browser
196- iOS
197- Windows Phone 7 and 8
198- Windows 8
199- Windows
200
201### iOS Quirks
202
203Since iOS 10 it's mandatory to add a `NSCameraUsageDescription`, `NSMicrophoneUsageDescription` and `NSPhotoLibraryUsageDescriptionentry` in the info.plist.
204
205* `NSCameraUsageDescription` describes the reason that the app accesses the user’s camera.
206* `NSMicrophoneUsageDescription` describes the reason that the app accesses the user’s microphone.
207* `NSPhotoLibraryUsageDescriptionentry` describes the reason the app accesses the user's photo library.
208
209When the system prompts the user to allow access, this string is displayed as part of the dialog box.
210
211To add this entry you can pass the following variables on plugin install.
212
213* `CAMERA_USAGE_DESCRIPTION` for `NSCameraUsageDescription`
214* `MICROPHONE_USAGE_DESCRIPTION` for `NSMicrophoneUsageDescription`
215* `PHOTOLIBRARY_USAGE_DESCRIPTION` for `NSPhotoLibraryUsageDescriptionentry`
216
217-
218Example:
219
220`cordova plugin add cordova-plugin-media-capture --variable CAMERA_USAGE_DESCRIPTION="your usage message"`
221
222If you don't pass the variable, the plugin will add an empty string as value.
223
224### Windows Phone 7 Quirks
225
226Invoking the native camera application while your device is connected
227via Zune does not work, and the error callback executes.
228
229### Browser Quirks
230
231Works in Chrome, Firefox and Opera only (since IE and Safari doesn't supports
232navigator.getUserMedia API)
233
234Displaying images using captured file's URL available in Chrome/Opera only.
235Firefox stores captured images in IndexedDB storage (see File plugin documentation),
236and due to this the only way to show captured image is to read it and show using its DataURL.
237
238### Example
239
240 // capture callback
241 var captureSuccess = function(mediaFiles) {
242 var i, path, len;
243 for (i = 0, len = mediaFiles.length; i < len; i += 1) {
244 path = mediaFiles[i].fullPath;
245 // do something interesting with the file
246 }
247 };
248
249 // capture error callback
250 var captureError = function(error) {
251 navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
252 };
253
254 // start image capture
255 navigator.device.capture.captureImage(captureSuccess, captureError, {limit:2});
256
257## capture.captureVideo
258
259> Start the video recorder application and return information about captured video clip files.
260
261 navigator.device.capture.captureVideo(
262 CaptureCB captureSuccess, CaptureErrorCB captureError, [CaptureVideoOptions options]
263 );
264
265### Description
266
267Starts an asynchronous operation to capture video recordings using the
268device's video recording application. The operation allows the user
269to capture more than one recordings in a single session.
270
271The capture operation ends when either the user exits the video
272recording application, or the maximum number of recordings specified
273by `CaptureVideoOptions.limit` is reached. If no `limit` parameter
274value is specified, it defaults to one (1), and the capture operation
275terminates after the user records a single video clip.
276
277When the capture operation finishes, it the `CaptureCB` callback
278executes with an array of `MediaFile` objects describing each captured
279video clip file. If the user terminates the operation before
280capturing a video clip, the `CaptureErrorCB` callback executes with a
281`CaptureError` object featuring a
282`CaptureError.CAPTURE_NO_MEDIA_FILES` error code.
283
284### Supported Platforms
285
286- Amazon Fire OS
287- Android
288- BlackBerry 10
289- iOS
290- Windows Phone 7 and 8
291- Windows 8
292- Windows
293
294### Example
295
296 // capture callback
297 var captureSuccess = function(mediaFiles) {
298 var i, path, len;
299 for (i = 0, len = mediaFiles.length; i < len; i += 1) {
300 path = mediaFiles[i].fullPath;
301 // do something interesting with the file
302 }
303 };
304
305 // capture error callback
306 var captureError = function(error) {
307 navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
308 };
309
310 // start video capture
311 navigator.device.capture.captureVideo(captureSuccess, captureError, {limit:2});
312
313
314### BlackBerry 10 Quirks
315
316- Cordova for BlackBerry 10 attempts to launch the __Video Recorder__ application, provided by RIM, to capture video recordings. The app receives a `CaptureError.CAPTURE_NOT_SUPPORTED` error code if the application is not installed on the device.
317
318
319## CaptureAudioOptions
320
321> Encapsulates audio capture configuration options.
322
323### Properties
324
325- __limit__: The maximum number of audio clips the device user can record in a single capture operation. The value must be greater than or equal to 1 (defaults to 1).
326
327- __duration__: The maximum duration of an audio sound clip, in seconds.
328
329### Example
330
331 // limit capture operation to 3 media files, no longer than 10 seconds each
332 var options = { limit: 3, duration: 10 };
333
334 navigator.device.capture.captureAudio(captureSuccess, captureError, options);
335
336### Amazon Fire OS Quirks
337
338- The `duration` parameter is not supported. Recording lengths cannot be limited programmatically.
339
340### Android Quirks
341
342- The `duration` parameter is not supported. Recording lengths can't be limited programmatically.
343
344### BlackBerry 10 Quirks
345
346- The `duration` parameter is not supported. Recording lengths can't be limited programmatically.
347- The `limit` parameter is not supported, so only one recording can be created for each invocation.
348
349### iOS Quirks
350
351- The `limit` parameter is not supported, so only one recording can be created for each invocation.
352
353
354## CaptureImageOptions
355
356> Encapsulates image capture configuration options.
357
358### Properties
359
360- __limit__: The maximum number of images the user can capture in a single capture operation. The value must be greater than or equal to 1 (defaults to 1).
361
362### Example
363
364 // limit capture operation to 3 images
365 var options = { limit: 3 };
366
367 navigator.device.capture.captureImage(captureSuccess, captureError, options);
368
369### iOS Quirks
370
371- The __limit__ parameter is not supported, and only one image is taken per invocation.
372
373
374## CaptureVideoOptions
375
376> Encapsulates video capture configuration options.
377
378### Properties
379
380- __limit__: The maximum number of video clips the device's user can capture in a single capture operation. The value must be greater than or equal to 1 (defaults to 1).
381
382- __duration__: The maximum duration of a video clip, in seconds.
383
384### Example
385
386 // limit capture operation to 3 video clips
387 var options = { limit: 3 };
388
389 navigator.device.capture.captureVideo(captureSuccess, captureError, options);
390
391### BlackBerry 10 Quirks
392
393- The __duration__ property is ignored, so the length of recordings can't be limited programmatically.
394
395### iOS Quirks
396
397- The __limit__ property is ignored. Only one video is recorded per invocation.
398
399### Android Quirks
400
401- Android supports an additional __quality__ property, to allow capturing video at different qualities. A value of `1` ( the default ) means high quality and value of `0` means low quality, suitable for MMS messages.
402 See [here](http://developer.android.com/reference/android/provider/MediaStore.html#EXTRA_VIDEO_QUALITY) for more details.
403
404### Example ( Android w/ quality )
405
406 // limit capture operation to 1 video clip of low quality
407 var options = { limit: 1, quality: 0 };
408 navigator.device.capture.captureVideo(captureSuccess, captureError, options);
409
410
411## CaptureCB
412
413> Invoked upon a successful media capture operation.
414
415 function captureSuccess( MediaFile[] mediaFiles ) { ... };
416
417### Description
418
419This function executes after a successful capture operation completes.
420At this point a media file has been captured, and either the user has
421exited the media capture application, or the capture limit has been
422reached.
423
424Each `MediaFile` object describes a captured media file.
425
426### Example
427
428 // capture callback
429 function captureSuccess(mediaFiles) {
430 var i, path, len;
431 for (i = 0, len = mediaFiles.length; i < len; i += 1) {
432 path = mediaFiles[i].fullPath;
433 // do something interesting with the file
434 }
435 };
436
437## CaptureError
438
439> Encapsulates the error code resulting from a failed media capture operation.
440
441### Properties
442
443- __code__: One of the pre-defined error codes listed below.
444
445### Constants
446
447- `CaptureError.CAPTURE_INTERNAL_ERR`: The camera or microphone failed to capture image or sound.
448
449- `CaptureError.CAPTURE_APPLICATION_BUSY`: The camera or audio capture application is currently serving another capture request.
450
451- `CaptureError.CAPTURE_INVALID_ARGUMENT`: Invalid use of the API (e.g., the value of `limit` is less than one).
452
453- `CaptureError.CAPTURE_NO_MEDIA_FILES`: The user exits the camera or audio capture application before capturing anything.
454
455- `CaptureError.CAPTURE_PERMISSION_DENIED`: The user denied a permission required to perform the given capture request.
456
457- `CaptureError.CAPTURE_NOT_SUPPORTED`: The requested capture operation is not supported.
458
459## CaptureErrorCB
460
461> Invoked if an error occurs during a media capture operation.
462
463 function captureError( CaptureError error ) { ... };
464
465### Description
466
467This function executes if an error occurs when trying to launch a
468media capture operation. Failure scenarios include when the capture
469application is busy, a capture operation is already taking place, or
470the user cancels the operation before any media files are captured.
471
472This function executes with a `CaptureError` object containing an
473appropriate error `code`.
474
475### Example
476
477 // capture error callback
478 var captureError = function(error) {
479 navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
480 };
481
482## ConfigurationData
483
484> Encapsulates a set of media capture parameters that a device supports.
485
486### Description
487
488Describes media capture modes supported by the device. The
489configuration data includes the MIME type, and capture dimensions for
490video or image capture.
491
492The MIME types should adhere to [RFC2046](http://www.ietf.org/rfc/rfc2046.txt). Examples:
493
494- `video/3gpp`
495- `video/quicktime`
496- `image/jpeg`
497- `audio/amr`
498- `audio/wav`
499
500### Properties
501
502- __type__: The ASCII-encoded lowercase string representing the media type. (DOMString)
503
504- __height__: The height of the image or video in pixels. The value is zero for sound clips. (Number)
505
506- __width__: The width of the image or video in pixels. The value is zero for sound clips. (Number)
507
508### Example
509
510 // retrieve supported image modes
511 var imageModes = navigator.device.capture.supportedImageModes;
512
513 // Select mode that has the highest horizontal resolution
514 var width = 0;
515 var selectedmode;
516 for each (var mode in imageModes) {
517 if (mode.width > width) {
518 width = mode.width;
519 selectedmode = mode;
520 }
521 }
522
523Not supported by any platform. All configuration data arrays are empty.
524
525## MediaFile.getFormatData
526
527> Retrieves format information about the media capture file.
528
529 mediaFile.getFormatData(
530 MediaFileDataSuccessCB successCallback,
531 [MediaFileDataErrorCB errorCallback]
532 );
533
534### Description
535
536This function asynchronously attempts to retrieve the format
537information for the media file. If successful, it invokes the
538`MediaFileDataSuccessCB` callback with a `MediaFileData` object. If
539the attempt fails, this function invokes the `MediaFileDataErrorCB`
540callback.
541
542### Supported Platforms
543
544- Amazon Fire OS
545- Android
546- BlackBerry 10
547- iOS
548- Windows Phone 7 and 8
549- Windows 8
550- Windows
551
552### Amazon Fire OS Quirks
553
554The API to access media file format information is limited, so not all
555`MediaFileData` properties are supported.
556
557### BlackBerry 10 Quirks
558
559Does not provide an API for information about media files, so all
560`MediaFileData` objects return with default values.
561
562### Android Quirks
563
564The API to access media file format information is limited, so not all
565`MediaFileData` properties are supported.
566
567### iOS Quirks
568
569The API to access media file format information is limited, so not all
570`MediaFileData` properties are supported.
571
572## MediaFile
573
574> Encapsulates properties of a media capture file.
575
576### Properties
577
578- __name__: The name of the file, without path information. (DOMString)
579
580- __fullPath__: The full path of the file, including the name. (DOMString)
581
582- __type__: The file's mime type (DOMString)
583
584- __lastModifiedDate__: The date and time when the file was last modified. (Date)
585
586- __size__: The size of the file, in bytes. (Number)
587
588### Methods
589
590- __MediaFile.getFormatData__: Retrieves the format information of the media file.
591
592## MediaFileData
593
594> Encapsulates format information about a media file.
595
596### Properties
597
598- __codecs__: The actual format of the audio and video content. (DOMString)
599
600- __bitrate__: The average bitrate of the content. The value is zero for images. (Number)
601
602- __height__: The height of the image or video in pixels. The value is zero for audio clips. (Number)
603
604- __width__: The width of the image or video in pixels. The value is zero for audio clips. (Number)
605
606- __duration__: The length of the video or sound clip in seconds. The value is zero for images. (Number)
607
608### BlackBerry 10 Quirks
609
610No API provides format information for media files, so the
611`MediaFileData` object returned by `MediaFile.getFormatData` features
612the following default values:
613
614- __codecs__: Not supported, and returns `null`.
615
616- __bitrate__: Not supported, and returns zero.
617
618- __height__: Not supported, and returns zero.
619
620- __width__: Not supported, and returns zero.
621
622- __duration__: Not supported, and returns zero.
623
624### Amazon Fire OS Quirks
625
626Supports the following `MediaFileData` properties:
627
628- __codecs__: Not supported, and returns `null`.
629
630- __bitrate__: Not supported, and returns zero.
631
632- __height__: Supported: image and video files only.
633
634- __width__: Supported: image and video files only.
635
636- __duration__: Supported: audio and video files only
637
638### Android Quirks
639
640Supports the following `MediaFileData` properties:
641
642- __codecs__: Not supported, and returns `null`.
643
644- __bitrate__: Not supported, and returns zero.
645
646- __height__: Supported: image and video files only.
647
648- __width__: Supported: image and video files only.
649
650- __duration__: Supported: audio and video files only.
651
652### iOS Quirks
653
654Supports the following `MediaFileData` properties:
655
656- __codecs__: Not supported, and returns `null`.
657
658- __bitrate__: Supported on iOS4 devices for audio only. Returns zero for images and videos.
659
660- __height__: Supported: image and video files only.
661
662- __width__: Supported: image and video files only.
663
664- __duration__: Supported: audio and video files only.
665
666## Android Lifecycle Quirks
667
668When capturing audio, video, or images on the Android platform, there is a chance that the
669application will get destroyed after the Cordova Webview is pushed to the background by
670the native capture application. See the [Android Lifecycle Guide][android-lifecycle] for
671a full description of the issue. In this case, the success and failure callbacks passed
672to the capture method will not be fired and instead the results of the call will be
673delivered via a document event that fires after the Cordova [resume event][resume-event].
674
675In your app, you should subscribe to the two possible events like so:
676
677```javascript
678function onDeviceReady() {
679 // pendingcaptureresult is fired if the capture call is successful
680 document.addEventListener('pendingcaptureresult', function(mediaFiles) {
681 // Do something with result
682 });
683
684 // pendingcaptureerror is fired if the capture call is unsuccessful
685 document.addEventListener('pendingcaptureerror', function(error) {
686 // Handle error case
687 });
688}
689
690// Only subscribe to events after deviceready fires
691document.addEventListener('deviceready', onDeviceReady);
692```
693
694It is up you to track what part of your code these results are coming from. Be sure to
695save and restore your app's state as part of the [pause][pause-event] and
696[resume][resume-event] events as appropriate. Please note that these events will only
697fire on the Android platform and only when the Webview was destroyed during a capture
698operation.
699
700[android-lifecycle]: http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#lifecycle-guide
701[pause-event]: http://cordova.apache.org/docs/en/latest/cordova/events/events.html#pause
702[resume-event]: http://cordova.apache.org/docs/en/latest/cordova/events/events.html#resume