Add Camera page (#15)

ionic-team · Dec 19, 2020 · 14287f3 · 14287f3
1 parent 1c60370
commit 14287f3
Show file tree

Hide file tree

Showing 11 changed files with 160 additions and 19 deletions.
diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
@@ -13,6 +13,7 @@ dependencies {
     implementation project(':capacitor-app')
     implementation project(':capacitor-app-launcher')
     implementation project(':capacitor-browser')
+    implementation project(':capacitor-camera')
     implementation project(':capacitor-clipboard')
     implementation project(':capacitor-device')
     implementation project(':capacitor-dialog')

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
@@ -56,7 +56,8 @@
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
     <!-- Navigator.getUserMedia -->
     <!-- Video -->
-    <uses-permission android:name="android.permission.CAMERA" />
+    <!-- if this entry is enabled, then the camera plugin will prompt for camera access  -->
+    <!-- <uses-permission android:name="android.permission.CAMERA" /> -->
     <!-- Audio -->
     <uses-permission android:name="android.permission.RECORD_AUDIO" />
     <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>

diff --git a/android/app/src/main/assets/capacitor.plugins.json b/android/app/src/main/assets/capacitor.plugins.json
@@ -15,6 +15,10 @@
 		"pkg": "@capacitor/browser",
 		"classpath": "com.capacitorjs.plugins.browser.BrowserPlugin"
 	},
+	{
+		"pkg": "@capacitor/camera",
+		"classpath": "com.capacitorjs.plugins.camera.CameraPlugin"
+	},
 	{
 		"pkg": "@capacitor/clipboard",
 		"classpath": "com.capacitorjs.plugins.clipboard.ClipboardPlugin"

diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle
@@ -14,6 +14,9 @@ project(':capacitor-app-launcher').projectDir = new File('../node_modules/@capac
 include ':capacitor-browser'
 project(':capacitor-browser').projectDir = new File('../node_modules/@capacitor/browser/android')
 
+include ':capacitor-camera'
+project(':capacitor-camera').projectDir = new File('../node_modules/@capacitor/camera/android')
+
 include ':capacitor-clipboard'
 project(':capacitor-clipboard').projectDir = new File('../node_modules/@capacitor/clipboard/android')
 

diff --git a/ios/App/Podfile b/ios/App/Podfile
@@ -13,6 +13,7 @@ def capacitor_pods
   pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
   pod 'CapacitorAppLauncher', :path => '../../node_modules/@capacitor/app-launcher'
   pod 'CapacitorBrowser', :path => '../../node_modules/@capacitor/browser'
+  pod 'CapacitorCamera', :path => '../../node_modules/@capacitor/camera'
   pod 'CapacitorClipboard', :path => '../../node_modules/@capacitor/clipboard'
   pod 'CapacitorDevice', :path => '../../node_modules/@capacitor/device'
   pod 'CapacitorDialog', :path => '../../node_modules/@capacitor/dialog'

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@capacitor/app": "^0.1.0",
     "@capacitor/app-launcher": "^0.2.0",
     "@capacitor/browser": "^0.2.0",
+    "@capacitor/camera": "0.0.1",
     "@capacitor/clipboard": "^0.2.0",
     "@capacitor/core": "^3.0.0-alpha.9",
     "@capacitor/device": "^0.2.0",
@@ -35,6 +36,7 @@
     "@capacitor/storage": "^0.1.0",
     "@capacitor/text-zoom": "^0.1.0",
     "@capacitor/toast": "^0.2.0",
+    "@ionic/pwa-elements": "^3.0.1",
     "@ionic/react": "^5.0.7",
     "@ionic/react-router": "^5.0.7",
     "@testing-library/jest-dom": "^4.2.4",

diff --git a/scripts/lib/capacitor.mjs b/scripts/lib/capacitor.mjs
@@ -6,6 +6,7 @@ export const PLUGIN_PACKAGES = [
   'app',
   'app-launcher',
   'browser',
+  'camera',
   'clipboard',
   'device',
   'dialog',

diff --git a/src/index.tsx b/src/index.tsx
@@ -2,6 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { defineCustomElements } from '@ionic/pwa-elements/loader';
+
+// enable PWA elements
+defineCustomElements(window);
 
 ReactDOM.render(<App />, document.getElementById('root'));
 

diff --git a/src/pages/Camera.tsx b/src/pages/Camera.tsx
@@ -6,23 +6,137 @@ import {
   IonMenuButton,
   IonTitle,
   IonToolbar,
+  IonCardContent,
+  IonCard,
+  IonButton,
 } from '@ionic/react';
 import React from 'react';
+import { Camera, CameraOptions, CameraSource } from '@capacitor/camera';
+import { Capacitor } from '@capacitor/core';
+import { CameraPluginPermissions } from '@capacitor/camera/dist/esm/definitions';
 
-const Camera: React.FC = () => {
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonButtons slot="start">
-            <IonMenuButton />
-          </IonButtons>
-          <IonTitle>Camera</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent></IonContent>
-    </IonPage>
-  );
-};
+interface CameraPageState {
+  filePath: string | null;
+  metadata: string | null;
+}
 
-export default Camera;
+class CameraPage extends React.Component<{}, CameraPageState> {
+  constructor(props: {}) {
+    super(props);
+    this.state = { filePath: null, metadata: null };
+  }
+
+  addPhoto = async (source: CameraSource, save: boolean = false) => {
+    try {
+      const options: CameraOptions = {
+        quality: 100,
+        resultType: 'uri',
+        source: source,
+        saveToGallery: save,
+        allowEditing: false,
+        webUseInput: source === 'photos' ? true : false,
+      };
+      var photo = await Camera.getPhoto(options);
+      this.setState({
+        filePath: photo.path ?? photo.webPath ?? null,
+        metadata: JSON.stringify(photo.exif, null, 2),
+      });
+    } catch (e) {
+      alert(`Failed to get picture with error:\n'${e}'`);
+    }
+  };
+
+  checkPermissions = async () => {
+    const permissionStates = await Camera.checkPermissions();
+    alert(
+      `Permissions are:\ncamera = ${permissionStates.camera}\nphotos = ${permissionStates.photos}`,
+    );
+  };
+
+  requestPermissions = async (permissions?: CameraPluginPermissions) => {
+    const permissionStates = await Camera.requestPermissions(permissions);
+    alert(
+      `Permissions are:\ncamera = ${permissionStates.camera}\nphotos = ${permissionStates.photos}`,
+    );
+  };
+
+  render() {
+    return (
+      <IonPage>
+        <IonHeader>
+          <IonToolbar>
+            <IonButtons slot="start">
+              <IonMenuButton />
+            </IonButtons>
+            <IonTitle>Camera</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent>
+          <IonCard>
+            <IonCardContent>
+              <IonButton expand="block" onClick={() => this.checkPermissions()}>
+                Check Permissions
+              </IonButton>
+              <IonButton
+                expand="block"
+                onClick={() =>
+                  this.requestPermissions({ permissions: ['camera'] })
+                }>
+                Request Camera Permissions
+              </IonButton>
+              <IonButton
+                expand="block"
+                onClick={() =>
+                  this.requestPermissions({ permissions: ['photos'] })
+                }>
+                Request Photo Permissions
+              </IonButton>
+              <IonButton
+                expand="block"
+                onClick={() => this.requestPermissions()}>
+                Request All Permissions
+              </IonButton>
+            </IonCardContent>
+          </IonCard>
+          <IonCard>
+            <IonCardContent>
+              <IonButton expand="block" onClick={() => this.addPhoto('camera')}>
+                Take Picture
+              </IonButton>
+              <IonButton
+                expand="block"
+                onClick={() => this.addPhoto('camera', true)}>
+                Take Picture and Save
+              </IonButton>
+              <IonButton expand="block" onClick={() => this.addPhoto('photos')}>
+                Choose Picture
+              </IonButton>
+              <IonButton expand="block" onClick={() => this.addPhoto('prompt')}>
+                Prompt
+              </IonButton>
+            </IonCardContent>
+          </IonCard>
+          {this.state.filePath != null ? (
+            <IonCard>
+              <IonCardContent>
+                <div>
+                  <img
+                    src={Capacitor.convertFileSrc(this.state.filePath)}
+                    alt="Most Recent"
+                  />
+                </div>
+                <div>
+                  <pre>{this.state.metadata}</pre>
+                </div>
+              </IonCardContent>
+            </IonCard>
+          ) : (
+            <div></div>
+          )}
+        </IonContent>
+      </IonPage>
+    );
+  }
+}
+
+export default CameraPage;
diff --git a/src/routes.tsx b/src/routes.tsx
@@ -4,7 +4,7 @@ import ActionSheetPage from './pages/ActionSheet';
 import AppPage from './pages/App';
 import BackgroundTask from './pages/BackgroundTask';
 import Browser from './pages/Browser';
-import Camera from './pages/Camera';
+import CameraPage from './pages/Camera';
 import ClipboardPage from './pages/Clipboard';
 import Console from './pages/Console';
 import DevicePage from './pages/Device';
@@ -83,7 +83,7 @@ const routes: AppPage[] = [
         📸
       </span>
     ),
-    component: Camera,
+    component: CameraPage,
   },
   {
     title: 'Clipboard',