Change Video Dimentions

Ionic Framework ionic-v3
1

Hi!
I’m building an app which allows the use to make a short video and upload it to our servers. But when you use a phone to shoot a video, it’s either in landscape or portrait mode, and I want to resize the video to be a square.

I know that ideally (like in instagram) this is done via Cropping, but I couldn’t have a cropping solution to work both on iOS and Android (iOS solution is here - https://github.com/rossmartin/video-editor-ionic2).

Is there a workaround to this problem? Many via clever CSS? Any ideas are more than welcome!

Many thanks!

2

Have you tried the plugin cordova-plugin-media-capture with equal width and height (so it captures square video)?

1 Like
3

Can you advice how to set width and height there? I’m actually using it to capture my videos, but can’t figure out how to set height and width. Thanks!

4

First check out Step 4C on the example over at TutorialsPoint on how to use the plugin’s video capture capability.

Now, looking over at the plugin’s documentation for Configuration Data, we see this example:

// retrieve supported image modes
var imageModes = navigator.device.capture.supportedImageModes;

// Select mode that has the highest horizontal resolution
var width = 0;
var selectedmode;
for each (var mode in imageModes) {
    if (mode.width > width) {
        width = mode.width;
        selectedmode = mode;
    }
}

If we adapt this example to fit our case where we want highest resolution video capture of equal width and height, we should have:

// retrieve supported video modes
let videoModes = navigator.device.capture.supportedVideoModes;

// Select mode that has the highest horizontal resolution
let width = 0;
let selectedmode = undefined;
for each (let mode in videoModes) {
    if ((mode.width === mode.height) && (mode.width > width)) {
        width = mode.width;
        selectedmode = mode;
    }
}

At this point selectedmode should contain a square video capture mode or undefined. I’m not sure exactly how you use that onwards (maybe it’s referenced automatically by the plugin?) but I hope this helped steer you in the right direction.

5

Hi! Thanks for your reply. I’m trying to get this working and ran in this problem.

let videoModes = navigator.device.capture.supportedVideoModes;

This is empty in my case (iOS device testing, actual device)

Any ideas why it’s empty?

Thanks!!1

6

I may have bad news. Taken from this book:

At the time of this writing the ConfigurationData object is not implemented in any supported platform. In fact,
each of the arrays stored into the supportedAudioModes, supportedImageModes and supportedVideoModes properties are empty.

Well, shit. Looks like you’ll need another approach to the rectangle video problem.
Now before going out looking for the “proper” engineering way to capture video in square dimensions, I’m just thinking here. What if you just captured regular video and made sure via css that it’s always shown through a square viewport?

7

Yep, that was my problem, supportedVideoModes properties were empty.

I was thinking about it, but couldn’t find a good solution how to implement it, nor could I code this CSS myself (I’m terrible with CSS).

If you come across anything that maybe help, I’d really appreciate it.

And thanks a lot for your help on this issue!!!

8

Hi Dimitri, I’m struggling on the same problem. Did you came across to a solution?

Thanks

9

No, you need to write a plugin for this, which is very hard. So I’ve switched to photos instead, video is too hard.