feat: video support for Camera plugin

[diachedelic]

Feature Request

Describe the Feature Request

I have used Camera plugin to get photos from the user's media gallery (on Android), and it worked very well - however, I would also like for users to be able to import & capture videos.

Platform Support Requested

• Android
• iOS
• Electron
• Web

Describe Preferred Solution

Camera.getMedia({
  mediaTypes: [CameraMediaType.Photo, CameraMediaType.Video],
  videoQuality: CameraVideoQuality.Medium,
  ...
})

When CameraMediaType.Video and CameraSource.Photos (or should it be CameraSource.Library?) is specified, list videos in the gallery feed alongside photos (like they appear when you use the Samsung Gallery app or similar). Accept video quality parameters similar to UIImagePickerController.QualityType.

Describe Alternatives

Currently I am using <input capture> (see spec) but this is painfully inefficient as the media's binary data must cross the bridge as Base64 (which can take tens of seconds on slower devices). It is also unstable on iOS leading to termination of the webview.

[jcesarmobile]

Issues tagged with feature request are closed but tracked for reactions to gauge interest.

[diachedelic]

Does the proposed API seem sane? We were thinking of developing this and submitting a PR.

[BorntraegerMarc]

I'd vote for an additional option CameraMediaType.PhotoAndVideo

The camera can both take pics + record video. Why not let the user choose in the camera app what to do? Messaging apps like WhatsApp, etc. do this...

[ciccilleju]

I'd vote for an additional option CameraMediaType.PhotoAndVideo

The camera can both take pics + record video. Why not let the user choose in the camera app what to do? Messaging apps like WhatsApp, etc. do this...

I totally agree with one of the above solutions, it would be super:
before capacitor 3.0 i'b been using camera-plugin to get both pictures and videos, but now, using capacitor 3.0's camera plugin i'm not able to do it anymore.
I've tried the media capture plugin but seems pretty broken with android: I can record the video but I cant access the file from the gallery, so I can't play or share it.

Thanks :)

[ibrahimAboelsuod]

Any ETA for this?

[joeldhenry]

another shortcoming of capacitor compared to cordova. i need this to migrate across

[ibrahimAboelsuod]

another shortcoming of capacitor compared to cordova. i need this to migrate across

FYI you can use the legacy cordova plugin until they fix that. It's not the cleanest but it works.

[joeldhenry]

thanks @ibrahimAboelsuod although the reason I swapped to capacitor was to avoid all these depreciated community managed plugins :D

[josuelmm]

Any update?

[santekotturi]

Just saw a bunch of updated for v4 of the capacitor plugins (is that entreprise only?) but sadly no mention of video support. I think this is going to force me to react native...

https://github.com/ionic-team/capacitor-plugins/releases

[joeldhenry]

now that v4 is out, should this be re-evaluated?

[rinturaj]

Any update on this feature

[Saqib92]

any update?

[jorgsiegel]

Looking forward to this feature. Any progress or plans?

[aladinbilalagic]

Can we just get any info about this? Is this in plans or anything?

[fryiee]

We are also interested in the status of this feature.

[AdlerJS]

Big News: https://github.com/capawesome-team/capacitor-file-picker as of a few days ago now supports video, images, and files. We are in the process of migrating our code to this plugin now and having great success so far. Big thanks to @robingenz and his team for this win

CC: @fryiee , @ssnielsen, @aladinbilalagic, @jorgsiegel, @Saqib92, @joeldhenry, @skotturi, @diachedelic

[Saqib92]

Big News: https://github.com/capawesome-team/capacitor-file-picker as of a few days ago now supports video, images, and files. We are in the process of migrating our code to this plugin now and having great success so far. Big thanks to @robingenz and his team for this win

CC: @fryiee , @ssnielsen, @aladinbilalagic, @jorgsiegel, @Saqib92, @joeldhenry, @skotturi, @diachedelic

this plugin is to pick files not Recording. This thread is for Recording Video.

[ysneo]

any update? video support please;

can choose video and capture video

[aladin-bilalagic]

In my opinion the only correct thing to do for our projects is to either start thinking of migration or write a plugin for this.
It's been almost 3 years since the issue is open, not saying that Ionic team has to do it, it's OSS, but I believe that this is core feature that any serious framework should provide, at least if they hope to attain any paid or enterprise customers.

[ossmalpha]

Surprised this is not yet supported OOTB. Any updates on this?

[qliqdev]

tried to add some filters in

capacitor-plugins/camera/ios/Plugin/CameraPlugin.swift

Line 506 in 89d09cb

configuration.filter = .images

like

configuration.filter = .any(of: [.images, .videos]) 

videos become able to pick

but after picking catching error

[AXRuntimeCommon] AX Lookup problem - errorCode:1100 error:Permission denied portName:'com.apple.iphone.axserver' PID:1991 (
	0   AXRuntime                           0x00000001f43557f0 _AXGetPortFromCache + 932
	1   AXRuntime                           0x00000001f43579a4 AXUIElementPerformFencedActionWithValue + 772
	2   UIKit                               0x000000025100dae8 2FB1F859-1BC4-30B2-B751-1BC0A9B31400 + 785128
	3   libdispatch.dylib                   0x0000000101df053c _dispatch_call_block_and_release + 32
	4   libdispatch.dylib                   0x0000000101df1ff0 _dispatch_client_callout + 20
	5   libdispatch.dylib                   0x0000000101dfa0a0 _dispatch_lane_serial_drain + 988
	6   libdispatch.dylib                   0x0000000101dfadc8 _dispatch_lane_invoke + 420
	7   libdispatch.dylib                   0x0000000101e07cac _dispatch_workloop_worker_thread + 740
	8   libsystem_pthread.dylib             0x000000021863cdf8 _pthread_wqthread + 288
	9   libsystem_pthread.dylib             0x000000021863cb98 start_wqthread + 8
)

[sdsoldi]

Some plugin or workaround to record video? I'm confused why an official plugin only takes photos...

[gerhardcit]

Any change that someone in the ionic-team working on capacitor plugin gives us the what to expect for Video capturing.
Sometimes is as important to know what is NOT working as oppose to what can be done with a plugin.
There seems to be countless requests and questions about it, but nothing coming from the ionic team indicating that we can or not expect video capturing to work at any time soon.
You keep selling capacitor as the be-all for hybrid apps, but you are not clear about the short comings.
This result in endless hours for developers trying to figure out how to get around it.

To date I cannot find a clear answer from Ionic-team or from capawesome-team about weather video capturing is actually been done for Android and iOS. And if not, tell us that we need to do it ourselves. But you need to be clear on what does NOT work as well.

[druinha]

We have an app that is working with the capacitor camera, now we want to record and upload videos aswell.
We couldn't find anything that works in ionic or capacitor and we tried with awesome-cordova media-capture, we made it work, we can record the video, we can display the video... but we can't upload it, also when we install the cordova plugin, it breaks the upload from the app, but not from the web.

[josuelmm]

Unanswered

[NeptuniusDexter]

I am relatively new to Capacitor and have been using it to add native support and functionality to our Quasar/Vue app. So far it has been a dream implementing and using, specifically in this instance the camera plugin works great. But the fact that no video recording is supported is a huge let down, as our use case actually regularly includes needing to upload videos. I just wanted to add my voice in saying that this will be an amazing addition to capacitor and I will be monitoring to see if there is any update on this matter. Unfortunately I lack the experience to try and write a plugin for this myself.

[ultrasites]

I'm agree with the statements above. The video support would be wonderful, maybe in version 6?

[gerhardcit]

Any change that someone in the ionic-team working on capacitor plugin gives us the what to expect for Video capturing. Sometimes is as important to know what is NOT working as oppose to what can be done with a plugin. There seems to be countless requests and questions about it, but nothing coming from the ionic team indicating that we can or not expect video capturing to work at any time soon. You keep selling capacitor as the be-all for hybrid apps, but you are not clear about the short comings. This result in endless hours for developers trying to figure out how to get around it.

To date I cannot find a clear answer from Ionic-team or from capawesome-team about weather video capturing is actually been done for Android and iOS. And if not, tell us that we need to do it ourselves. But you need to be clear on what does NOT work as well.

Still no real answer from Ionic team or indication of plans etc. I hate it when companies tell you how "Awesome" they are, but then it fizzles out when small things don't work. Just basically annoying.

[Bauss9]

At this point, anyone with enough experience to come help me release a plugin? I have the plugin complete in Swift I inked it to CAP and I can open it through an ionic app and record a video. I only have a small issue of not being able or not enough knowledge on how to actually pass the video url from the cap plugin to ionic, if we do this, the world is our oyster.

Hit me up!

[Saqib92]

At this point, anyone with enough experience to come help me release a plugin? I have the plugin complete in Swift I inked it to CAP and I can open it through an ionic app and record a video. I only have a small issue of not being able or not enough knowledge on how to actually pass the video url from the cap plugin to ionic, if we do this, the world is our oyster.

Hit me up!

Sharing a GitHub repo would be a better way to get help.

[diachedelic]

@Bauss9 , here is a link to the video plugin I wrote. I do not have to time to publish it as a package or offer support, but you are welcome to use the code however you like. https://gist.github.com/diachedelic/3e1365c2a59968dac29e60ada6c122df

[drakedeatonuk]

@diachedelic could you comment on the performance of your plugin? How does it compare to the <input capture> approach you mentioned using?

[diachedelic]

@drakedeatonuk It uses <input capture> for web and Android platforms (capacitor-blob-writer saves the files to disk efficiently) , but has a native implementation in iOS because of serious WebKit bugs. It performs well and I've never looked back.

[wijzijnweb]

The name "Camera" got me confused here. Expected to handle all the camera features, but it's only photo.
I even implemented the photo functionality first, only to discover it doesn't support video.

We have different upload sections for photo and videos.

Anyone from ionic team that can give an update on this?
Is it on the roadmap or not at all?

[aladin-bilalagic]

The name "Camera" got me confused here. Expected to handle all the camera features, but it's only photo. I even implemented the photo functionality first, only to discover it doesn't support video.

We have different upload sections for photo and videos.

Anyone from ionic team that can give an update on this? Is it on the roadmap or not at all?

They have been quiet on the topic for over 4 years now.
I highly suggest moving the app to something else, on time.

It's absurd that the base functionality is not available, not even in enterprise plans, they don't have the plugin.

Almost all possible solutions that I tried are hacky, and will eventually drown you in problems and take more time than to rewrite app in other framework 😄

[robingenz]

They have been quiet on the topic for over 4 years now.
I highly suggest moving the app to something else, on time.

It's absurd that the base functionality is not available, not even in enterprise plans, they don't have the plugin.

Almost all possible solutions that I tried are hacky, and will eventually drown you in problems and take more time than to rewrite app in other framework 😄

Just because a feature request has been created does not mean that the Ionic team is forced to implement this feature. The Ionic/Capacitor ecosystem is open and anyone can develop and publish such a plugin. I doubt that creating your own plugin takes more time than rewriting an app with another framework.

---

Is there a reason why you are not using the Camera Preview plugin in the meantime?

import { CameraPreview, CameraPreviewOptions } from '@capacitor-community/camera-preview';

const cameraPreviewOptions: CameraPreviewOptions = {
  position: 'front',
  width: window.screen.width,
  height: window.screen.height,
};

CameraPreview.startRecordVideo(cameraPreviewOptions);

I would be willing to develop such a plugin but it makes no sense if there is already a working solution.

[wijzijnweb]

They have been quiet on the topic for over 4 years now.
I highly suggest moving the app to something else, on time.
It's absurd that the base functionality is not available, not even in enterprise plans, they don't have the plugin.
Almost all possible solutions that I tried are hacky, and will eventually drown you in problems and take more time than to rewrite app in other framework 😄

Just because a feature request has been created does not mean that the Ionic team is forced to implement this feature. The Ionic/Capacitor ecosystem is open and anyone can develop and publish such a plugin. I doubt that creating your own plugin takes more time than rewriting an app with another framework.

Is there a reason why you are not using the Camera Preview plugin in the meantime?

import { CameraPreview, CameraPreviewOptions } from '@capacitor-community/camera-preview';

const cameraPreviewOptions: CameraPreviewOptions = {
  position: 'front',
  width: window.screen.width,
  height: window.screen.height,
};

CameraPreview.startRecordVideo(cameraPreviewOptions);

I would be willing to develop such a plugin but it makes no sense if there is already a working solution.

That's a nice alternative. But I disagree with your last comment, when something in the capacitor ecosystem is named "camera" I expect it to handle the camera features. Handling video seems to like an obvious thing the camera plugin should be able to do.

I always want to stay away from community plugins as much as possible. Multiple capacitor/cordova communities have been abandoned. I have no knowledge about how to develop a plugin and touch core functionality. That's the reason I chose capacitor to handle it for me, besides I work for an employer that probably won't give me the time to dive into it. I will go probably with that plugin in the meantime. Thanks for showing that.

I just hope they give an update if this is on the roadmap so people know if they should use it.

[aladin-bilalagic]

Just because a feature request has been created does not mean that the Ionic team is forced to implement this feature. The Ionic/Capacitor ecosystem is open and anyone can develop and publish such a plugin. I doubt that creating your own plugin takes more time than rewriting an app with another framework.

Hey Robin,
I appreciate your reply.

My previous message (sometimes in 2023) was exactly that, it's OSS and no one should be forced to do anything.

But the thing that needs to be said honestly, if you are planning to attract enterprise customers, there's really so far you can go without proper camera plugin, and it shows that the said ecosystem is not really serious and should not be considered as viable solution for anything more than small project, or website port to an app.

On another note, to confirm that, there hasn't been a reply from team for 4 years as far as I have seen.

I have personally looked into getting into Ionic Enterprise, but of course, same plugin lacked there.

If you have time and are willing to invest it in this, that plugin would be really appreciated by many.

From my own experience with all plugins that were available by mid 2023,
there wasn't anything that was working properly and that could be relied on.

If it works, e.g. quality preference is broken, you can either record extremely low quality video or highest quality video, if it works at all, depending on the plugin.

I personally rewrote my app in very short time, and haven't looked back.

I spent more time trying to stay on Ionic, trying the plugins, trying to write the plugin which unfortunately didn't go well because of my limited experience with native development.

[wijzijnweb]

They have been quiet on the topic for over 4 years now.
I highly suggest moving the app to something else, on time.
It's absurd that the base functionality is not available, not even in enterprise plans, they don't have the plugin.
Almost all possible solutions that I tried are hacky, and will eventually drown you in problems and take more time than to rewrite app in other framework 😄

Just because a feature request has been created does not mean that the Ionic team is forced to implement this feature. The Ionic/Capacitor ecosystem is open and anyone can develop and publish such a plugin. I doubt that creating your own plugin takes more time than rewriting an app with another framework.

Is there a reason why you are not using the Camera Preview plugin in the meantime?

import { CameraPreview, CameraPreviewOptions } from '@capacitor-community/camera-preview';

const cameraPreviewOptions: CameraPreviewOptions = {
  position: 'front',
  width: window.screen.width,
  height: window.screen.height,
};

CameraPreview.startRecordVideo(cameraPreviewOptions);

I would be willing to develop such a plugin but it makes no sense if there is already a working solution.

Tried your suggestion for camera-preview plugin... Doens't work either. Also no good video support. There is a fork from capgo/camera-preview that at least returns a file url in iOS, but is not found when reading with the filesystem plugin from capacitor.

There is not a single plugin out there that has even decent support for photo and video.
To me that's insane for such a large ecosystem.

[luantrasel]

You can pick videos from library using @capawesome/capacitor-file-picker

import { FilePicker } from '@capawesome/capacitor-file-picker';

const { files } = await FilePicker.pickVideos({
    limit: 1,
})