Flutter Camera plugin captures video rotated 90 degrees when in Landscape on iPhone

[Dwarfie]

Using the detailed example when I capture video in Landscape on an iPhone the preview is in Portrait aspect ratio with video rotated 90 degrees.
I am uploading the video to Firebase to confirm that video is rotated 90 degrees.

I don't have a physical Android device to check if it is the same.

pubspec.yaml

version: 1.0.0+1

environment: sdk: ">=2.0.0-dev.68.0 <3.0.0"

dependencies: flutter: sdk: flutter

cupertino_icons: ^0.1.2

camera: ^0.4.2

path_provider: ^0.5.0

video_player: ^0.10.0

firebase_core: ^0.2.5

flutter doctor

[✓] Flutter (Channel unknown, v1.1.0, on Mac OS X 10.14.3 18D109, locale en-AU)

[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)

[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)

[✓] Android Studio (version 3.2)

[✓] Connected device (1 available)

[Dwarfie]

Still no answer on this.
How do I contact the authors of the plugin ?

[quentinleguennec]

Hi @Dwarfie. I've been working on a fix for the rotation on iOS for the last 2 weeks. It's a complicated piece as metadata are handle differently on different platform and different video players. It looks like I found a way to fix it though and I'm creating a few PR. I'll keep you updated.

[quentinleguennec]

I added a fix for video orientation metadata when recording a video with the camera plugin. The PR is this one: flutter/plugins#1452
I also added a fix to the video_player. The PR is here: flutter/plugins#1451
Please don't hesitate to have a look at the PRs and leave comments or suggestions to push the review process.

[Dwarfie]

Hi @quentinleguennec , thanks for the response and the fix. I'm just not sure how I test it.
Is it similar to the way I have referenced map_view in the pubspec.yaml ?

map_view:
git:
url: git://github.com/Eimji/flutter_google_map_view.git

[Dwarfie]

I think I have figured that out, I copied your updated codebase to my project level and added the path: in pubspec.yaml

camera:
path: ./plugins-tengio_camera_added_rotation_metadata_ios/packages/camera/
path_provider: ^0.5.0
video_player:
path: ./plugins-tengio_improved_video_player/packages/video_player/
firebase_storage: ^2.1.0+1

I can report that I can record video in Landscape and have checked it by saving to Firebase Storage

However the view finder on the sample app is messed up for both Portrait and Landscape.

[quentinleguennec]

Hi @Dwarfie
The cleanest way to test and use this modified version of the plugin would be to reference the Github commit in your pubspec.yaml like this:

 video_player:
    git:
      url: git://github.com/tengio/plugins.git
      ref: 9d00507431d3d11e9d7b5f3db91bf4c86614c99b
      path: packages/video_player
  camera:
    git:
      url: git://github.com/tengio/plugins.git
      ref: 0793000a6b4e9f141dd2a18e9336a39cf98b4a07
      path: packages/camera

[quentinleguennec]

Now, when I worked on solving those issue I did 4 fixes in the camera plugin and video_player plugin. And it is quite possible it will only work well only with the 4 fixes together. Here is the list of PR (only one of them has been merged so far and I have yet to get any answer from reviewers on the others):

• [camera] Added orientation metadata to iOS recorded videos. plugins#1452
• [Camera] Improved resolution presets and matched quality between Android and iOS plugins#1403
• [video_player] Fixed orientation and position issue for some videos metadata. plugins#1451
• [video_player] Android: Added missing event.put("event", "completed"); plugins#1470

I created a branch with those 4 fixes merged together, I suggest you try this branch first and see if it works on your side:
https://github.com/Tengio/plugins/tree/tested4you_video_player_camera_merge

You can use it by adding this in your pubspec.yaml:

 video_player:
    git:
      url: git://github.com/tengio/plugins.git
      ref: 310a8f06c4981121a5553b0f6f3a8cdf475b8af1
      path: packages/video_player
  camera:
    git:
      url: git://github.com/tengio/plugins.git
      ref: 310a8f06c4981121a5553b0f6f3a8cdf475b8af1
      path: packages/camera

[Dwarfie]

@quentinleguennec thanks for the response, I have changed the pubspec.yaml to reference the packages from the latest PR.

This fixes the orientation of the _thumbnailWidget that displays after you have captured video.

Unfortunately the Portrait and Landscape _cameraPreviewWidgets still display the same way as the images attached to my previous post.
This is using the example code from here: https://pub.dev/packages/camera#-example-tab-

[quentinleguennec]

@Dwarfie That's because the example doesn't work out of portrait. The reason behind this is that when you rotate the phone flutter rotates everything (and you can't choose what is rotated), and the preview widget ends up rotated. But since only the preview was rotated and not what you are actually recording (hopefully the actual room doesn't rotate when you rotate your phone ^^) the preview is not showing what you would expect.

[quentinleguennec]

One solution is to lock the app on portrait when you are on the recording page, and if you want to update the UI (button and other) listen to changes in device orientation. For this you need to use a 3rd party plugin, flutter doesn't expose enough of the accelerometer and gyroscope to do this without some native code. I did something that looks good using this plugin:
native_device_orientation
PS: if using this plugin you will want to set useSensor to true.

[quentinleguennec]

My solution was to have the preview in full screen in the background (not rotating) and listen to change in orientation (with native_device_orientation) to rotate the buttons individually when the users rotate the device. This is also what the default Android and iOS camera apps do (that's where I draw inspiration).

[Dwarfie]

Using the current version of the camera plugin the Camera Preview fills the whole screen when the phone is in Portrait, and gets rotated when the phone is rotated.

The PR request version has a squashed down preview in Portrait and rotated 90 degrees when phone is in Landscape, but this does actually capture the video in the right orientation.

These shots are form within my app using the current released plugin, and would do the job if the video acted in the same way as your PR version

I may still try to save the video from the image_picker plugin which use the native camera/video controls ( well on iOS I don't have a physical android device yet )

[quentinleguennec]

@Dwarfie Are you using the code from packages/camera/example to do the preview? Because it doesn't display as expected when I build the example on my device and rotate it. (both on Android and iOS).

Could you share the code of the widget where you have the CameraPreview?