Video Orientation On CordovaCapture

829 Views Asked by At

I am using cordova-plugin-media-capture plugin to record videos. It captures fine when recorded in landscape orientation but on portrait mode, video shown is upside down. Following is the sample code

    var options = { limit: 1};
    $cordovaCapture.captureVideo(options).then(function(videoData) {
        addVideoToLocalStorage(videoData, slotNumber);
  }, function(err) {
    $scope.localStorageVideos = 'Err: <br />'+ JSON.stringify(videoData)
  });
1

There are 1 best solutions below

1
On

you can lock orientation for an application using this config.xml value:

<preference name="orientation" value="portrait"/>

While this works well, you wanted to do videos in landscape mode instead. you had it working fine in iOS but nothing you tried would work for Android. I began by looking for a plugin to allow me to switch orientation dynamically. This one, screen orientation worked great.

So at this point - I found the code in the application that fired off the video to go into full screen mode, and added the two simple lines of code to set orientation to landscape.

video.addEventListener('playing', function() {
     var so = cordova.plugins.screenorientation;
     so.setOrientation(so.Orientation.LANDSCAPE);
}, false);

I did some digging and discovered you could listen for the user leaving full screen mode, which happened automatically when they hit their back button.

jQuery(document).on('webkitfullscreenchange', function(e) {       
    if(!e.currentTarget.webkitIsFullScreen) {
        var so = cordova.plugins.screenorientation;
        so.setOrientation(so.Orientation.PORTRAIT);
    }
});

Got great help from this blog post .Hopefully this will help you.