[SOLVED] Video recording on device (android, ios)

mobile
1

Hi everyone

I’ve successfully introduced Meteor here at work.

We have successfully used the mdg:camera package to take photos (on Android and iOS) but now the requirement is to add video capture also.

For the life of us, we cannot work out how to capture video on a mobile device. The browser works fine.

For Android, we’ve edited the AndroidManifest.xml and added the needed permissions:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_VIDEO" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-feature android:name="android.hardware.Camera" />

and on the device (after meteor run android-device) we see the permissions as:

“This application can access the following on your device:
take pictures and videos
record audio
modify or delete the contents of your USB storage
test access to protected storage
full network access
view network connections”

So I would have thought that all would be ok, but sadly, it is not working.

After looking at the mdg:camera package source code, I can see that the video stuff is not implemented in the web.browser/packages/mdg_camera.js that there is code that calls getUserMedia etc, but that same code is not present in the web.cordova/packages/mdg_camera.js, so I can understand why we don’t get video support in a cordova app.

However, I’ve got some other code using pure javascript (I won’t show it here, because the getUserMedia call always fails when run on the device) but works perfectly on the desktop web browser (and I might add, on Chrome on the device) - I get a video view.

In researching how to get this to work, I came across this video of a DevShop where the guys from Percolate Studios showed their Verso app.

As you can see at 08:25, the options on the device are Record [Video] [Audio] [Photo]

Do I need Crosswalk? I have no idea (from my limited Meteor experience) of how to integrate that but I have seen webpages saying that getUserMedia works when using Crosswalk - I think its the UIWebView thing?.. :smile:

We’re ok with everything else for this app we’re developing, (we’ve successfully been able to upload images to S3 etc) but this video thing is causing us grief.

Any suggestions, tips, or pointers would be a magnificent help.

Thank you
Brad

2 Likes
2

I hope someone from Percolate can answer the question, I’m interested too :slight_smile:

1 Like
3

We use https://github.com/apache/cordova-plugin-media-capture works fine.

1 Like
4

Thanks @kevohagan !
I’m going to give it a go right now.

Update:
Glad to report that I got it to work on iOS, and got the path to the captured video.
Now, about to try it on Android.

Androiud - it works also!

Here’s what I did:

meteor create videotest

meteor add cordova:org.apache.cordova.media-capture@0.3.6

Then, replace videotest,js with this:

if (Meteor.isClient) {

  if (Meteor.isCordova) {
    Meteor.startup(function(){
      console.log("device capability: " + JSON.stringify(navigator.device.capture));
  });
}

 Template.hello.events({

    'click button': function () {
      if (Meteor.isCordova){
        navigator.device.capture.captureVideo(captureSuccess, captureError, {limit:1, duration: 13});
      } else {
        // do the standard mdg:camera thing here ??
        // because we're in a browser.....
      }
  }
  });

  var captureError = function(error) {
    navigator.notification.alert('ERROR:' + error.message, null, "Capture Error");
  }

  var captureSuccess = function(mediaFiles) {
    var i, path, len;
    for (i=0, len = mediaFiles.length; i < len; i += 1) {
      path = mediaFiles[i].fullPath;
      // do something with this file... upload to S3 ?
      console.log("path = " + path);
    }
  }
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

The above code just opens the camera and lets you record.
It then shows you what the path of the recorded video is.
Its up to you as to what you do with it after that.

Thank you - this forum is brilliant.

Hope I can help someone else some day.

Cheers
Brad

3 Likes
5

Thanks Bradzo. I am able to record but how to access file data?

Ok. The problem is with slingshot. @kevohagan were you able to upload video using slingshot?

Thanks

6

Just wondering, have anybody managed to upload video to there server this way?

7

Thanks @bradzo I have a question though - you said you got video recording working fine on the browser? Would you mind sharing how you did that? After a lot of searching, it seems this is only (easily) possible in Firefox, using the Media Recorder API, and that Chrome will get support for this in a week or two.

There are other work arounds, such as https://www.webrtc-experiment.com/RecordRTC/
http://stackoverflow.com/questions/18509385/html-5-video-recording-and-storing-a-stream

But those are fairly complicated. How did you do it? Or you referring only to streaming the video using the getUserMedia API, but not actually saving it?

Thanks!

8

Also, the cordova plugin has a blank mediaFiles argument for Android so it is not working for me. I’m on version 1.1.0, though I can not seem to install v0.3.6 - the meteor build step just hangs. @bradzo or others - did you have this issue? Do you have a current working version? The plugin github repo seems to have issues disabled so I’m not sure how to comment or debug.

9

Ok, I finally got this all working and wrote a meteor package for cross platform video capture. Hopefully this will save future developers the many days I spent getting this all figured out and working!

https://atmospherejs.com/lukemadera/video-capture

7 Likes
10

That’s awesome @lukemadera , thanks for doing that

11

Sure thing @buishi, I hope it helps!

12

This looks great!
Thank you for sharing.
How are you using the base64Data value to rebuild/serve the video?

13

You can display it on the frontend in an tag or save it (e.g. to your backend or Amazon S3. Basically treat it similarly to an image file.

1 Like
14

hi @lukemadera thanks so much for this package! this works on the chrome browser on the desktop.

the android version however gets stuck in “Video is processing. This could take up to 15 seconds…”.

Can you pls help to figure this out. Do I need to add some permissions in mobile-config?

Thanks a bunch!

15

@lukemadera are you still supporting lukemadera:video-capture?

I have a strange requirement. Is there a way to save the captured video on the device until the device is in WIFI range?

Let me know I’m shopping for a video recording solution for my iOS and Android Apps.

16

Hi @sosawise - no, I haven’t worked on this in 2 years and have moved on to other things for the time being at least. That’s an interesting idea though! You could definitely fork this and implement!

17

Hi Luke,

Is that link to the video capture still available?