AdvancedVideoView: not possible to set Orientation

[Tronix117]

If the demo apps cannot help and there is no issue for your problem, tell us about it

We should be able to set orientation for the video recorder, when we turn the Phone, there is no way to change the recorder to landscape.

Which platform(s) does your issue occur on?

• Both

Please, provide the following version numbers that your issue occurs with:

• CLI: 4.0.0-2018-03-01-10793
• Cross-platform modules: 3.4.0
• Runtime(s): 3.4.1
• Plugin(s): v3.0.0-ALPHA.1 (why capital alpha, should not be lowercase ? to stick more with conventions)

Is there any code involved?

It's possible with AVCaptureSession on iOS, and it seems you already have a way to do it on your fancycamera plugin.

[triniwiz]

You can try recording with the device rotated in the latest version

[Tronix117]

Yep done and working ;)

[Tronix117]

Does not work on iOS

[Tronix117]

iOS solution:

(orientation is a number from enum AVCaptureVideoOrientation)

      const mediaFile = this.camera._output)
      const connection = mediaFile.connectionWithMediaType(AVMediaTypeVideo)
      if (connection && connection.supportsVideoOrientation) {
        connection.videoOrientation = orientation
      }

This code change the orientation in the output file. It does not change the orientation of the preview, not really needed

[AdamAtri]

I'm not sure if this is still being worked on, but if I start the AdvancedVideoView in landscape, how do I get the capture in landscape mode also?

The screenshot is from iPad (ver 11.3.1)

recorder.ts

import * as pages from 'tns-core-modules/ui/page';
import { RecorderModel } from './recorder-model';
import { AdvancedVideoView } from 'nativescript-videorecorder/advanced';
import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout/stack-layout';
let page;
let context;
let recorder:AdvancedVideoView;
let container: StackLayout;
let interval;

export function navigatingTo(args) {
    console.log('navigatingTo');
}

export function loaded(args: pages.NavigatedData) {
    page = <pages.Page>args.object;
    page.bindingContext = context = new RecorderModel();
    AdvancedVideoView.requestPermissions();
    container = page.getViewById('recorder-container') as StackLayout;

    if (!recorder) {
      recorder = new AdvancedVideoView();
      // recorder.quality=Quality.MAX_1080P; 
      recorder.cameraPosition="front"; 
      recorder.id="recorderView"; 
      recorder.fill=true;
      recorder.thumbnailCount=1;
      recorder.on('started', args => {
          interval = setInterval(() => {
              context.set('duration', recorder.duration);
          }, 1000);
      });
      recorder.on('finished', args => {
          clearInterval(interval);
          page.bindingContext.set('selectedVideo', args.object.get('file'));
          console.log("thumbnails: ", recorder.thumbnails);
      });
    }

    (global as any).recorder = recorder;

    context.set('duration', recorder && recorder.duration ? recorder.duration : 0);
    if (!recorder.parent || recorder.parent.id != container.id) {
      container.addChild(recorder);
    }
    page.on('layoutChanged', _updateLayout);
}

function _updateLayout():void {
  const {width} = container.getActualSize();
  recorder.height={value: Math.floor((width * 3)/4), unit: 'dip'};
}

export function recordVideo() {
    recorder.startRecording();
}

export function stopRecording() {
    const recorder = page.getViewById('recorderView');
    recorder.stopRecording();
}

export function toggleCamera() {
    const recorder = page.getViewById('recorderView');
    recorder.toggleCamera();
}

recorder.xml

<Page
    xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo"
    xmlns:VideoPlayer="nativescript-videoplayer"
    xmlns:recorder="nativescript-videorecorder/advanced" loaded="loaded">
    <ActionBar title="Advanced VideoRecorder"/>
    <StackLayout id="recorder-container">

    </StackLayout>
</Page>

package.json

"dependencies": {
    "nativescript-camera": "^4.2.0",
    "nativescript-imagepicker": "^6.1.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-sidedrawer": "^4.3.1",
    "nativescript-unit-test-runner": "^0.3.4",
    "nativescript-videoplayer": "^4.2.1",
    "nativescript-videorecorder": "^3.0.0-beta.3",
    "tns-core-modules": "4.2.1",
},

[Tronix117]

Hello, you can use my solution just above. Otherwise, I’m working on a PR to allow it to be set with a parameter, with common API between iOS and Android, I will submit the PR thursday, so hopefully @triniwiz will merge it pretty soon.

I will also publish a plugin to control and detect orientation no matter if the device orientation is locked or not, pretty useful when using camera. Hopefully, I will publish it by the end of the week.

[mspusta78]

Hey @Tronix117

Any update on the orientation? using the latest iOS 13 no matter what I set the orientation property it always outputs out portrait version.

You mentioned this code fixes it,

 const mediaFile = this.camera._output)
  const connection = mediaFile.connectionWithMediaType(AVMediaTypeVideo)
  if (connection && connection.supportsVideoOrientation) {
    connection.videoOrientation = orientation
  }

but where do you place this code?