Hello i want to make a script in Ionic 3 to capture audio and video from device.

index.html

<button ion button (click)="captureApp()" id="captureAudio">Capture Audio</button>

index.ts

document.addEventListener("deviceready", onDeviceReady, false);

function id(element) {
    return document.getElementById(element);
}

function onDeviceReady() {
    navigator.splashscreen.hide();
    captureApp = new captureApp();
    captureApp.run();
}

function captureApp() {
}

captureApp.prototype = {
    pictureSource:null,

    destinationType:null,

    run:function() {
        var that = this;
        id("captureVideo").addEventListener("click", function() {
            that._captureVideo.apply(that, arguments);
        });
        id("captureAudio").addEventListener("click", function() {
            that._capureAudio.apply(that, arguments);
        });
        id("captureImage").addEventListener("click", function() {
            that._captureImage.apply(that, arguments);
        });
    },

    _captureVideo:function() {
        var that = this;
        navigator.device.capture.captureVideo(function() {
            that._captureSuccess.apply(that, arguments);
        }, function() { 
            captureApp._captureError.apply(that, arguments);
        }, {limit:10});
    },

    _capureAudio:function() {
        var that = this;
        navigator.device.capture.captureAudio(function() {
            that._captureSuccess.apply(that, arguments);
        }, function() { 
            captureApp._captureError.apply(that, arguments);
        }, {limit:1});
    },

    _captureImage:function() {
        var that = this;
        navigator.device.capture.captureImage(function() {
            that._captureSuccess.apply(that, arguments);
        }, function() { 
            captureApp._captureError.apply(that, arguments);
        }, {limit:1});
    },

    _captureSuccess:function(capturedFiles) {
        var i,
        media = document.getElementById("media");
        media.innerHTML = "";
        for (i=0;i < capturedFiles.length;i+=1) {
            media.innerHTML+='<p>Capture taken! Its path is: ' + capturedFiles[i].fullPath + '</p>'
        }
    },

    _captureError:function(error) {
        if (window.navigator.simulator === true) {
            alert(error);
        }
        else {
            var media = document.getElementById("media");
            media.innerHTML = "An error occured! Code:" + error.code;
        }
    },
}

any guess how to proceed?

Recommended Answers

All 7 Replies

Sorry @rproffitt, i didn't catch the irony. I take it you mean the script wouldn't apply? If yes, i came to tha same conclusion after spending a couple days on it.

I used another script and i am getting this error when i press Start Recording

ERROR
Error: Uncaught (in promise): Not supported
Stack trace:
c@http://localhost:8000/build/polyfills.js:3:19752
u/<@http://localhost:8000/build/polyfills.js:3:19174
Media.onStatus@http://localhost:8000/plugins/cordova-plugin-media/www/browser/Media.js:276:21
Media.prototype.startRecord@http://localhost:8000/plugins/cordova-plugin-media/www/browser/Media.js:192:5
callInstance@http://localhost:8000/build/vendor.js:17392:12
wrapInstance/<@http://localhost:8000/build/vendor.js:17403:20
value@http://localhost:8000/build/vendor.js:17581:24
[649]/AudioRecorder.prototype.startRecording@http://localhost:8000/build/main.js:882:9
[218]/HomePage.prototype.startRecording@http://localhost:8000/build/main.js:510:13
View_HomePage_0/<@ng:///AppModule/HomePage.ngfactory.js:265:27
handleEvent@http://localhost:8000/build/vendor.js:13920:132
callWithDebugContext@http://localhost:8000/build/vendor.js:15405:39
debugHandleEvent@http://localhost:8000/build/vendor.js:14992:12
dispatchEvent@http://localhost:8000/build/vendor.js:10369:16
renderEventHandlerClosure/<@http://localhost:8000/build/vendor.js:10983:38
decoratePreventDefault/<@http://localhost:8000/build/vendor.js:42343:53
F</l</t.prototype.invokeTask@http://localhost:8000/build/polyfills.js:3:15649
onInvokeTask@http://localhost:8000/build/vendor.js:5285:24
F</l</t.prototype.invokeTask@http://localhost:8000/build/polyfills.js:3:15562
F</c</r.prototype.runTask@http://localhost:8000/build/polyfills.js:3:10815
F</h</e.invokeTask@http://localhost:8000/build/polyfills.js:3:16787
p@http://localhost:8000/build/polyfills.js:2:27646
v@http://localhost:8000/build/polyfills.js:2:27893
core.js:1350
HTTP load failed with status 404. Load of media resource http://localhost:8000/Library/NoCloud/recording.wav failed.

From the beggining i didn't know the Library/NoCloud/recording.wav does, it should be a folder in which the audio files are stored?
It should be the folder where the returned files (with Json for example) are stored?
is the { MediaPlugin } from 'ionic-native' correct?

import { Injectable } from '@angular/core';
import { MediaPlugin } from 'ionic-native';

export enum AudioRecorderState {
  Ready,
  Recording,
  Recorded,
  Playing
}

@Injectable()
export class AudioRecorder {
  mediaPlugin: MediaPlugin = null;
  state: AudioRecorderState = AudioRecorderState.Ready;

  get MediaPlugin(): MediaPlugin {
    if (this.mediaPlugin == null) {
      this.mediaPlugin = new MediaPlugin('../Library/NoCloud/recording.wav');
    }

    return this.mediaPlugin;
  }

I meant I went looking for examples and found it's not a simple thing to implement and have work on many clients. I get the feeling you are looking for a plugin and not to write your own. If the link supplied and the code there can't be used, keep searching.

From your last link, a fine example this may not work on all machines.

Some hints if you are using iOS and recording doesn't work: 1.) Try to use a absolute file path but remove beginning "file://".

So it appears that Raymond's article is spot on. The library has potholes and not plug and play. That out of the way, did Raymond's example fail too?

No, i never used Raymonds example. The first script i posted -both video and audio, looked like it worthed the time to experiment, but you have to run in through an appbuilder using Telerik, i didn't know what that was. I followed the instructions on readme, i build the app on V.S. but i got a message from Telerik about being able to use it in the future or whatever nonsense. I tried to use cordova and ionic to run it but i guess that was dum.

I am trying to change it so i can implement it on another Ionic app to test it. i ll post the result here.

Does anyone know a Capture Audio and Video example?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.