feat(web): add web implementation for takePhoto and chooseFromGallery

android/src/main/java/com/capacitorjs/plugins/camera/IonCameraFlow.kt

@@ -832,9 +832,6 @@ class IonCameraFlow(
             activity,
             intent,
             ionParams,
-            { image ->
-              //TODO remove this callback
-            },
             { mediaResult ->
                 handleMediaResult(mediaResult)
             },
@@ -938,7 +935,6 @@ class IonCameraFlow(
             correctOrientation = correctOrientation,
             saveToPhotoAlbum = saveToGallery,
             includeMetadata = includeMetadata,
-            latestVersion = true //TODO check this, because now we don't have resultType in the new Api
         )
     }
 

example-app/src/components/camera/ChooseFromGalleryConfigurable.tsx

@@ -85,7 +85,6 @@ class ChooseFromGalleryConfigurable extends React.Component<
         targetWidth: config.targetWidth,
         targetHeight: config.targetHeight,
         correctOrientation: config.correctOrientation,
-        webUseInput: config.webUseInput,
       });
       console.log('chooseFromGallery result', result);
 
@@ -249,16 +248,6 @@ class ChooseFromGalleryConfigurable extends React.Component<
                 />
               </IonItem>
 
-              <IonItem>
-                <IonLabel>Web Use Input</IonLabel>
-                <IonToggle
-                  checked={config.webUseInput}
-                  onIonChange={(e) =>
-                    this.updateConfig("webUseInput", e.detail.checked)
-                  }
-                />
-              </IonItem>
-
               <IonButton
                 expand="block"
                 color="primary"

example-app/src/components/camera/MediaCarousel.tsx

@@ -66,7 +66,11 @@ const MediaCarousel: React.FC<IMediaCarouselProps> = ({ media, onEditPhoto }) =>
           return (
             <SwiperSlide key={index}>
               {isVideo(item) ? (
-                <VideoWithMetadata filePath={filePath} metadata={item.metadata} />
+                <VideoWithMetadata
+                  filePath={filePath}
+                  metadata={item.metadata}
+                  thumbnail={item.thumbnail}
+                />
               ) : (
                 <PhotoWithMetadata
                   filePath={filePath}

example-app/src/components/camera/VideoWithMetadata.tsx

@@ -6,11 +6,13 @@ import { MediaMetadata } from "@capacitor/camera";
 interface IVideoWithMetadataProps {
   filePath: string;
   metadata?: MediaMetadata | string | null;
+  thumbnail?: string;
 }
 
 const VideoWithMetadata: React.FC<IVideoWithMetadataProps> = ({
   filePath,
   metadata,
+  thumbnail,
 }) => {
   const formatMetadata = (meta: MediaMetadata | string | null | undefined): string => {
     if (!meta) return '';
@@ -51,6 +53,7 @@ const VideoWithMetadata: React.FC<IVideoWithMetadataProps> = ({
         <div>
           <video
             src={Capacitor.convertFileSrc(filePath)}
+            poster={thumbnail ? `data:image/jpeg;base64,${thumbnail}` : undefined}
             controls
             style={{ width: "100%", maxWidth: "100%" }}
           />

example-app/src/components/camera/old-methods/GetPhotoConfigurable.tsx

@@ -72,6 +72,8 @@ class GetPhotoConfigurable extends React.Component<
       this.props.onPhotoResult({
         path: photo.path,
         webPath: photo.webPath,
+        base64String: photo.base64String,
+        dataUrl: photo.dataUrl,
         exif: photo.exif,
       });
     } catch (e) {
@@ -105,6 +107,8 @@ class GetPhotoConfigurable extends React.Component<
       this.props.onPhotoResult({
         path: photo.path,
         webPath: photo.webPath,
+        base64String: photo.base64String,
+        dataUrl: photo.dataUrl,
         exif: photo.exif,
       });
     } catch (e) {

example-app/src/components/camera/old-methods/types.ts

@@ -30,5 +30,7 @@ export interface PickImagesConfig {
 export interface PhotoResult {
   path?: string;
   webPath?: string;
+  base64String?: string;
+  dataUrl?: string;
   exif?: any;
 }

example-app/src/pages/MediaHistoryPage.tsx

@@ -20,6 +20,7 @@ import {
   MediaHistoryItem,
 } from "../services/MediaHistoryService";
 import { FileViewer } from "@capacitor/file-viewer";
+import { Capacitor } from "@capacitor/core";
 
 const MediaHistoryPage: React.FC = () => {
   const [history, setHistory] = useState<MediaHistoryItem[]>([]);
@@ -35,6 +36,10 @@ const MediaHistoryPage: React.FC = () => {
 
   const openFile = async (item: MediaHistoryItem): Promise<void> => {
     try {
+      if (Capacitor.getPlatform() === 'web') {
+        alert('Opening media from history is not available on Web/PWA.');
+        return;
+      }
       const filePath = item.uri ?? item.path ?? '';
       if (!filePath) {
         alert('No file path available for this item');

example-app/src/pages/RecordVideoPage.tsx

@@ -19,6 +19,7 @@ import { MediaHistoryService } from "../services/MediaHistoryService";
 interface IRecordVideoPageState {
   filePath: string | null;
   metadata: MediaMetadata | string | null;
+  thumbnail: string | null;
 }
 
 class RecordVideoPage extends React.Component<{}, IRecordVideoPageState> {
@@ -27,13 +28,15 @@ class RecordVideoPage extends React.Component<{}, IRecordVideoPageState> {
     this.state = {
       filePath: null,
       metadata: null,
+      thumbnail: null,
     };
   }
 
   handleVideoResult = (result: MediaResult): void => {
     this.setState({
       filePath: result.uri ?? result.webPath ?? '',
       metadata: result.metadata ?? null,
+      thumbnail: result.thumbnail ?? null,
     });
 
     MediaHistoryService.addMedia({
@@ -65,6 +68,7 @@ class RecordVideoPage extends React.Component<{}, IRecordVideoPageState> {
     this.setState({
       filePath: null,
       metadata: null,
+      thumbnail: null,
     });
   };
 
@@ -106,6 +110,7 @@ class RecordVideoPage extends React.Component<{}, IRecordVideoPageState> {
               <VideoWithMetadata
                 filePath={this.state.filePath}
                 metadata={this.state.metadata}
+                thumbnail={this.state.thumbnail ?? undefined}
               />
             </>
           )}

example-app/src/pages/TakePicturePage.tsx

@@ -58,14 +58,22 @@ class TakePicturePage extends React.Component<{}, ITakePicturePageState> {
   handlePhotoResult = (result: {
     path?: string;
     webPath?: string;
+    base64String?: string;
+    dataUrl?: string;
     exif?: any;
   }): void => {
+    const filePath =
+      result.path ??
+      result.webPath ??
+      result.dataUrl ??
+      (result.base64String ? `data:image/jpeg;base64,${result.base64String}` : null);
+
     this.setState({
-      filePath: result.path ?? result.webPath ?? null,
+      filePath,
       metadata: JSON.stringify(result.exif, null, 2),
     });
 
-    if (result.path || result.webPath) {
+    if (filePath) {
       MediaHistoryService.addMedia({
         mediaType: "photo",
         method: "getPhoto",

src/definitions.ts

@@ -214,7 +214,6 @@ export interface TakePhotoOptions {
   /**
    * Whether or not MediaResult should include its metadata.
    * If an error occurs when obtaining the metadata, it will return empty.
-   * Note: This option is only supported on Android and iOS.
    * @default false
    *
    * @since 8.1.0
@@ -292,7 +291,6 @@ export interface ChooseFromGalleryOptions {
   /**
    * Whether or not MediaResult should include its metadata.
    * If an error occurs when obtaining the metadata, it will return empty.
-   * Note: This option is only supported on Android and iOS.
    * @default false
    *
    * @since 8.1.0
@@ -401,7 +399,6 @@ export interface EditURIPhotoOptions {
   /**
    * Whether or not MediaResult should include its metadata.
    * If an error occurs when obtaining the metadata, it will return empty.
-   * Note: This option is only supported on Android and iOS.
    * @default false
    *
    * @since 8.1.0
@@ -446,6 +443,7 @@ export interface MediaResult {
   /**
    * Returns the thumbnail of the media, base64 encoded.
    * On Web, for `MediaType.Photo`, the full image is returned here, also base64 encoded.
+   * On Web, for `MediaType.Video`, a full-resolution JPEG frame captured from the video is returned, base64 encoded at 80% quality.
    *
    * @since 8.1.0
    */
@@ -480,16 +478,14 @@ export interface MediaResult {
 
 export interface MediaMetadata {
   /**
-   * File size of the media, in bytes
-   * Not available on Web.
+   * File size of the media, in bytes.
    *
    * @since 8.1.0
    */
   size?: number;
 
   /**
    * Only applicable for `MediaType.Video` - the duration of the media, in seconds.
-   * Not available on Web.
    *
    * @since 8.1.0
    */
@@ -499,7 +495,7 @@ export interface MediaMetadata {
    * The format of the image, ex: jpeg, png, mp4.
    *
    * Web supports jpeg, png and gif, but the exact availability may vary depending on the browser.
-   * gif is only supported for `chooseFromGallery`, and only if `webUseInput` option is set to `true`.
+   * gif is only supported for `chooseFromGallery` on Web.
    *
    * @since 8.1.0
    */
@@ -510,12 +506,12 @@ export interface MediaMetadata {
    *
    * @since 8.1.0
    */
-  resolution: string;
+  resolution?: string;
 
   /**
    * The date and time the media was created, in ISO 8601 format.
    * If creation date is not available (e.g. Android 7 and below), the last modified date is returned.
-   * Not available on web.
+   * For Web, the last modified date is always returned.
    *
    * @since 8.1.0
    */