{"id":19370160,"url":"https://github.com/phonegap/phonegap-plugin-media-recorder","last_synced_at":"2025-04-23T15:31:58.057Z","repository":{"id":57323087,"uuid":"99961322","full_name":"phonegap/phonegap-plugin-media-recorder","owner":"phonegap","description":null,"archived":false,"fork":false,"pushed_at":"2018-02-28T03:18:03.000Z","size":6443,"stargazers_count":14,"open_issues_count":9,"forks_count":17,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-18T13:11:04.149Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phonegap.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-10T20:14:33.000Z","updated_at":"2024-01-22T09:06:11.000Z","dependencies_parsed_at":"2022-08-25T21:00:49.834Z","dependency_job_id":null,"html_url":"https://github.com/phonegap/phonegap-plugin-media-recorder","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phonegap%2Fphonegap-plugin-media-recorder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phonegap%2Fphonegap-plugin-media-recorder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phonegap%2Fphonegap-plugin-media-recorder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phonegap%2Fphonegap-plugin-media-recorder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phonegap","download_url":"https://codeload.github.com/phonegap/phonegap-plugin-media-recorder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250460534,"owners_count":21434259,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T08:14:24.033Z","updated_at":"2025-04-23T15:31:57.198Z","avatar_url":"https://github.com/phonegap.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!---\n # license: Licensed to the Apache Software Foundation (ASF) under one\n #         or more contributor license agreements.  See the NOTICE file\n #         distributed with this work for additional information\n #         regarding copyright ownership.  The ASF licenses this file\n #         to you under the Apache License, Version 2.0 (the\n #         \"License\"); you may not use this file except in compliance\n #         with the License.  You may obtain a copy of the License at\n #\n #           http://www.apache.org/licenses/LICENSE-2.0\n #\n #         Unless required by applicable law or agreed to in writing,\n #         software distributed under the License is distributed on an\n #         \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n #         KIND, either express or implied.  See the License for the\n #         specific language governing permissions and limitations\n #         under the License.\n --\u003e\n\n\n# phonegap-plugin-media-recorder [![Build Status](https://travis-ci.org/phonegap/phonegap-plugin-media-recorder.svg)](https://travis-ci.org/phonegap/phonegap-plugin-media-recorder)\n\nThis plugin provides an implementation for recording video and audio on a device based on the [W3C MediaStream Recording API](https://www.w3.org/TR/mediastream-recording/) for iOS and Android. In order to achieve the recording, this plugin uses the [phonegap-plugin-media-stream](https://github.com/phonegap/phonegap-plugin-media-stream) which is based on the [W3C Media Stream API](https://www.w3.org/TR/mediacapture-streams/). The phonegap-plugin-media-stream makes the mediastream track available to the phonegap-plugin-media-recorder which allows the user to record a video/audio. The phonegap-plugin-media-stream is added as a dependency to the phonegap-plugin-media-recorder plugin.\n\n\n\n## Installation\n\n```\nphonegap plugin add phonegap-plugin-media-recorder\n\nphonegap plugin add https://github.com/phonegap/phonegap-plugin-media-recorder.git\n```\n\n## MediaRecorder Constructor\n\nThe MediaRecorder constructor uses the mediastream track obtained by using the phonegap-plugin-media-stream to create an object. An optional parameter for mimeType can also be passed.In iOS, the current suppported mimeTypes for mediaRecorder are : audio/m4a, audio/wav and video/quicktime. If options parameter is not passed the recording continues with default formats ( audio/m4a for audio recording and video/quicktime for video recording).\n\n### Example\n\n```javascript\nnavigator.mediaDevices.getUserMedia({\n    'audio': true,\n    'video': {\n        facingMode: 'user'\n    }\n}).then(function(mediastream) {\n    var options = { mimeType : 'video/quicktime'};\n    var mediaRecorder = new MediaRecorder(mediastream, options);\n});\n```\n\n## The `mediaRecorder` object\n\nThe mediaRecorder object has the following methods:\n\n- [start(optional timeslice)](https://github.com/phonegap/phonegap-plugin-media-recorder#mediarecorderstartoptional-timeslice)\n- [stop()](https://github.com/phonegap/phonegap-plugin-media-recorder#mediastop)\n- [pause()](https://github.com/phonegap/phonegap-plugin-media-recorder#mediapause)\n- [resume()](https://github.com/phonegap/phonegap-plugin-media-recorder#mediaresume)\n- [requestData()](https://github.com/phonegap/phonegap-plugin-media-recorder#mediarequestdata)\n- [isTypeSupported](https://github.com/phonegap/phonegap-plugin-media-recorder#mediarecorderistypesupported)\n\nThe mediaRecorder object also has the following events:\n\n- onstart()\n- onstop()\n- onpause()\n- onresume()\n- ondataavailable()\n\n\n##  mediaRecorder.start(optional timeslice)\n\nThe start method accepts an optional timeslice parameter (in milliseconds) and allows the user to record an audio/ video. The timeslice parameter allows the user to specify the duration of the recorded video/audio. For video recording, the implementation in iOS allows the user to open the camera view and record the video. For audio, the iOS implementation does not have a specific UI and works in the background. Android has integrated support for the [W3C Media Stream API](https://www.w3.org/TR/mediacapture-streams/) and the [W3C MediaStream Recording API](https://www.w3.org/TR/mediastream-recording/). However, Android can record the video in the background without a specific user interface which can be seen in the `Android Demo` below. A live stream,if needed, can be added using the [W3C Media Stream API](https://www.w3.org/TR/mediacapture-streams/).\n\n### Example\n\n```javascript\nmediaRecorder.onstart = function() {\n    console.log('Recording Started');\n};\nmediaRecorder.start();\n```\n\n### [iOS Demo](resources/iOS.gif)\n\n### [Android Demo](resources/Android.gif)\n\n##  mediaRecorder.stop\n\nThe stop method allows the user to stop recording an audio/ video. For video recording, the implementation in iOS allows the user to stop the video using the camera button. For audio, the iOS implementation does not have a specific UI and works in the background. For Android, the recording has to be stopped by using `mediaRecorder.stop()` or by using the optional `timeslice` parameter in `mediaRecorder.start(timeslice)`.\n\n### Example\n\n```javascript\nmediaRecorder.onstop = function() {\n    console.log('Recording Stopped');\n};\nmediaRecorder.stop();\n```\n\n## mediaRecorder.pause\n\nThis functionality is supported only for audio recording on iOS. Fully supported on Android.\n\n### Example\n\n```javascript\nmediaRecorder.onpause = function() {\n    console.log('Recording Paused');\n};\nmediaRecorder.pause();\n```\n\n## mediaRecorder.resume\n\nThis functionality is supported only for audio recording on iOS. Fully supported on Android.\n\n### Example\n\n```javascript\nmediaRecorder.onresume = function() {\n    console.log('Recording Resumed');\n};\nmediaRecorder.resume();\n```\n\n## mediaRecorder.requestData\n\nThis functionality allows us to gather the recorded video/audio data in a [blob](https://www.w3.org/TR/FileAPI/#dfn-Blob). This method is available only when the `state` of the mediaRrecorder is not `inactive`.\n\n### Example\n\n```javascript\nmediaRecorder.ondataavailable = function(blob) {\n    console.log('Data Available: blob size is ' + blob.size);\n    console.log('File URI is '+ mediaRecorder.src);\n};\nmediaRecorder.requestData();\n```\n\n## mediaRecorder.isTypeSupported\n\nThis method allows us to see if a specific mimeType is supported\n\n### Example\n\n```javascript\nmediaRecorder.isTypeSupported(\"audio/m4a\");   //  returns true\n```\n\n## Gathering and Playing the recorded data\n\nAfter the requestData() method is called and the blob is created, the `ondataavailable` event is fired which allows us to retieve and play the data. However, in iOS, playing the recorded video using a `blob` as a source for a video tag is not supported yet, and therefore, we assign the native file URI as a source to the video and audio tags.\n\n### Example\n\nRecording Video\n\n```javascript\nmediaRecorder.onstart = function() {\n    console.log('recording started');\n}\nmediaRecorder.onstop = function() {\n    console.log ('recording stopped');\n}\nmediaRecorder.ondataavailable = function(blob) {\n    var videoTag = document.getElementById(\"vid\");  // vid is the video tag\n    if(device.platform === 'iOS') {                 // iOS device ; cordova-plugin-device required for this check\n        videoTag.src = mediaRecorder.src;\n    } else {\n        var recordedChunks = [];\n        recordedChunks.push(blob.data);\n        videoTag.src = URL.createObjectURL(new Blob(recordedChunks));   // Android device\n    }\n}\nmediaRecorder.start();\n```\n\n The mediaRecorder.stop() method needs to be called explicitly for Android if the optional timeslice parameter in mediaRecorder.start() has not been provided.\n The stop(), pause() and resume() events are supported on Android but not supported on iOS for video recording.\n\n\nRecording Audio\n\n```javascript\nmediaRecorder.onstart = function() {\n    console.log('recording started');\n}\nmediaRecorder.onstop = function() {\n    console.log ('recording stopped');\n}\nmediaRecorder.ondataavailable = function(blob) {\n    var audioTag = document.getElementById(\"aud\");  // aud is the audio tag\n    if(device.platform === 'iOS') {                 // iOS ; cordova-plugin-device required for this check\n        audioTag.src = mediaRecorder.src;\n    } else {\n        var recordedChunks = [];\n        recordedChunks.push(blob.data);\n        audioTag.src = URL.createObjectURL(new Blob(recordedChunks));   // Android device\n    }\n}\nmediaRecorder.start(10000);    // stop recording audio after 10 seconds\n```\n\n## Quirks\n\nIn order to add a `blob` object as a source for a video tag, `blob:` should be added to the `media-src` part of the Content-Security-Policy meta tag in your index.html.\n\n## [Contributing](https://github.com/phonegap/phonegap-plugin-media-recorder/blob/master/.github/CONTRIBUTING.md)\n\n## [LICENSE](https://github.com/phonegap/phonegap-plugin-media-recorder/blob/master/LICENSE)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphonegap%2Fphonegap-plugin-media-recorder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphonegap%2Fphonegap-plugin-media-recorder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphonegap%2Fphonegap-plugin-media-recorder/lists"}