Media Capture video is low quality?

#1

I am trying to allow users to capture and upload videos using ionic and firebase. After searching all over the web the overwhelming theme is, use MediaCapture. So I tried it. The thing I don’t understand is, if I record a video on my phone it is 1920x1080 and beautiful quality. When I capture video using MediaCapture, the video is 320x240 and absolutely horrid quality. I am setting the quality to 1 when calling captureVideo, but it doesn’t seem to matter, the video never gets above 320x240 and looks terrible. Here is the code I am using to get video…

this.mediaCap.captureVideo({limit: 1, duration: 60, quality: 1}).then((data: MediaFile[]) => {
  let index = data[0].fullPath.lastIndexOf('/'), finalPath = data[0].fullPath.substr(0, index);
  this.file.readAsArrayBuffer(finalPath, data[0].name).then((file) => {
    let blob = new Blob([file], {type: data[0].type]});
    let task = this.postRef.child(data[0].name]).put(blob);
    task.on('state_changed', (snapshot) => {
      console.log("upload is " + ((snapshot.bytesTransferred / snapshot.totalBytes) * 100) + "% done");
    });
  }).catch(err => { console.log(err); });

Which works great, the video gets uploaded, but like I said it’s 320x240 and terrible quality. I know it isn’t the uploaded file that is bad because I can see the video on my phone and it is tiny and terrible too. Is there any possible way to record good quality video? There’s no way I can release something where the best possible video quality is 320x240 and pixelated like it’s 1980. Any help would be greatly appreciated, I have scoured google and everyone says set quality to 1 or 0, 1 being high quality 0 being mms quality, but I am setting the quality to 1 and it is tiny and terrible. Please help. Thank you.

#2

You have quality: 1 change that to quality: 100?

1 being lowest (or 0, depending on your plugin) and 100 being the highest.

Regards,
Neonic1

#3

That’s what I thought too, but the documentation says the only options are 0 and 1, where 1 is the best and 0 is the worst

#4

Mind providing me a link to the docs of the plugin you’re using?
I’ll take a look over it and see if I can help you find a solution. :slight_smile:

Regards,
Neonic1

#5

My pleasure, and thank you.
The base documentation is here… https://ionicframework.com/docs/native/media-capture/
and where I found 1 is good 0 is bad is here… Setting Media Capture video quality and https://github.com/apache/cordova-plugin-media-capture is where I found this…

Android Quirks

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. See here for more details.

That is most of all the documentation I have been using, though I have found a few tutorials online and they all follow the same guidelines in these docs.

1 Like
#6

Thanks, you’re using Android or Apple?

#7

Currently android. Eventually apple and browser, but for right now, just trying to get it to work using android.

#8

Okay, be right back in a few I’m going to look over some solutions for you.

#9

Apparently this guy found a fix for it, so he claims and made a repo?
Have you seen this?

#10

Yeah, I tried that one, and another one that actually saves it as an mp4 instead of 3gp. The weird thing is, I can get the video camera app up, and click on settings, but it is locked in at 320x240, it won’t let me change that option. However if I close my app out, then open my camera and go to the video camera, I can choose all the way up to FHD. Just for some reason when launching the camera with the mediaCapture it locks teh quality to 320x240

#11

Okay, let’s try this real fast in your options remove the quality segment (the comma too);
then specify the size you want the camera to respect (pick something other than your 320x240).

Let me know what happens after that.

This will generate a default quality (it should at least) then use whichever
height/width you require in your functionality.

#12

How can I specify the size though? The plugin only allows 3 options, limit (how many videos), duration (length of videos), and quality (pretty much useless as I have seen, lol). I would love to be able to specify the size, that would solve all of this. I will try it with the quality removed and see if that makes a difference at all.

#13

You’d do it in your MediaFileData: https://www.npmjs.com/package/cordova-plugin-media-capture#mediafiledata

#14

From what I understand those are not usable, just meta data. It will give you information about the video, but not usable to set anything

#15

Can you provide a screenshot?
You should be able to set your own height/width parameters in your capture query.

#16

The api is
MediaCapture.captureVideo(options).then(
where options are only limit, duration, and quality. There is nowhere to use the MediaFileData.
In the page you linked to it says,

Encapsulates format information about a media file.

Saying that it just gives you information about the file once it has been captured. If there is someway to use this to set the options I would be ecstatic, but I can’t find anywhere in the documentation that would provide a place to use this, other than to gather the information about the final video file.

#17

Hm, I have no idea… Sorry.

#18

It’s ok, I appreciate the help. This has been driving me insane and I just do not understand why it is stuck at such a low resolution. I have read other people talking about being worried they are getting the video at too high a resolution, but everything I have done forces the camera into 320x240 with no way to change it.

#19

Try it on another device bro. :slight_smile:

In programming, don’t allow yourself to overwork yourself.
If you do, you’ll never figure it out.

Same, I’ve just learned how to make connections with
socket.io, ionic 3 and angular 2 but I’m having a scroll down issue.

Brain buster. :confused: Lol.

#20

Thanks bro. I finally removed all of the options from the input completely and remove the “(data: MediaFile[])” from the .then function and just use “data => {” and it is allowing me to record with the better quality now. I wonder if there is some random bug where passing in the options is causing it to use low quality or something. I don’t know but it’s working now.

If you need any help with that, I am more than happy to help out. Part of the app I am building is a chat app with public and private channels, the private channels store all the messages, then load 100 when you load the page in, then scrolls to the bottom of the page. Just let me know. Thank you for your help :slight_smile:

2 Likes