Rotate Camera Capture Viewer Window by 90 degrees

I’m using a plugin called Camera Capture and need to rotate the viewer window into portrait orientation. There is no way to it from the plugin- would this be a CSS thing? If so, could anyone help me out?

1 Like

Yeah, CSS is the quick fix for this.

put an ID of “rotate” on the item you want rotated.

Add this CSS to the page:

#rotate{
     transform: rotate(90deg);
}
2 Likes

Awesome, solved. Thank you!

1 Like

This doesn’t work though because the camera still thinks it’s recording landscape and it doesn’t rotate, so your video is now just sideways…

It would be nice if @ZeroqodeSupport could add a portrait option to the aspect ratio dropdown on the plugin

1 Like

Hello @creatorbee ,
Thank you for contacting us.

We are sorry to hear that you have had difficulties with our plugin.
To better understand this issue, could you please provide more information:
-Screenshots/Video of the issue.
-Any additional details you believe are important for us to replicate and understand your use case.

Best Regards,
Zeroqode Support Team

On the video recorder plugin, you have 16:9 aspect ratio (landscape) but no 9:16 (portrait). You can do inherit and then size the capture element to 9:16, but it treats it like it’s just cropping a widescreen video and isn’t centered in the camera.

1 Like

Hello @creatorbee ,
Thank you for sharing additional inforamtion.

We have passed this information on to the development team, they will verify it and we will get back to you.

Thank you for understanding and cooperation.

Best Regards,
Zeroqode Service Desk

Hello @creatorbee ,
Thank you for your patience.

We are excited to share that we have effectively resolved the issue with the Camera Capture and Video Recorder Plugin and have updated it to version 1.21.0.

Could you kindly update the plugin within your app to this latest version and confirm whether everything is now operating smoothly? :blush:

Feel free to explore the plugin’s functionality on our demo page.

Your patience and cooperation throughout this process have been greatly appreciated.

Best Regards,
Zeroqode Support Team.

Thank you! That worked great!

@ZeroqodeSupport Actually I think I spoke to soon :smiling_face_with_tear:

While the video is now centered when you resize it to be in portrait mode. The “Inherit” setting no longer appears to be working. It doesn’t output a video at the same aspect ratio as the element size.

You can test what I mean here: Your Bubble app

Just record for a few seconds, hit stop, wait for it to populate the video player, and notice that it records 16:9 even when it is set to inherit element size.

1 Like

Hello @creatorbee ,
Thank you for your feedback.

We are sorry that you have had to face this problem.
We have passed your request to our development team and will definitely get back to you soon.

Thank you for your understanding.

Best Regards,
Zeroqode Support Team

Just wondering if you had a chance to replicate the issue?

Hello @creatorbee ,
Thank you for your patience.

We are excited to share that we have effectively resolved the issue with the Camera Capture and Video Recorder plugin action and have updated it to version 1.22.0

We have fixed a bug with the recorded video stretching across the entire screen. Also, everything that you described before works as intended: if the ratio is 16:9, then the recording window does not change the proportions and the aspect ratio of the video depends on the device, if it is set to inherit, then the user himself adjusts the dimensions of the element and the video will fill the recording window like this how the user configured it.

Feel free to explore the plugin’s functionality on our demo page.

Your patience and cooperation throughout this process have been greatly appreciated.

Cheers!

Unfortunately, I have updated to version 1.22.0 and the issue remains where I have the Camera element set to inherit element size, and when I record the output video is defaulting to I believe the device aspect ratio, it’s widescreen.

Screenshare of issue: https://tella.video/camera-capture-bug-esno

Please test the link that I sent earlier: Test Demo

Simply hit record, then stop, then the video player will update with saved video. It is widescreen when element is vertical. I am using Chrome on a Macbook.

1 Like

Hello @creatorbee ,
Thank you for your reply.

As we mentioned earlier, the plugin was designed with this functionality that you mentioned in your video.
We will add this request to the list of plugin improvements and our dev team will verify if the plugin library allows that and check how feasible it will be to include it in the next plugin update.

Thank you for understanding.

Best Regards,
Zeroqode Support Team

This topic was automatically closed after 70 days. New replies are no longer allowed.