[add] Camera component & OCR page

eslint.config.mjs

@@ -55,6 +55,7 @@ export default tsEslint.config(
                     noSortAlphabetically: true
                 }
             ],
+            '@typescript-eslint/no-explicit-any': 'warn',
             '@typescript-eslint/no-empty-object-type': 'off',
             '@typescript-eslint/no-unsafe-declaration-merging': 'warn'
         }

package.json

@@ -1,5 +1,5 @@
 {
-    "name": "PaperBookReader",
+    "name": "@open-source-bazaar/paper-book-reader",
     "version": "0.4.0",
     "description": "App Project scaffold of WebCell v3",
     "keywords": [
@@ -23,6 +23,7 @@
         "dom-renderer": "^2.3.0",
         "iterable-observer": "^1.1.0",
         "mobx": "^6.13.3",
+        "tesseract.js": "^5.1.1",
         "web-cell": "^3.0.0",
         "web-utility": "^4.4.0"
     },
@@ -49,6 +50,7 @@
         "postcss": "^8.4.47",
         "prettier": "^3.3.3",
         "prettier-plugin-css-order": "^2.1.2",
+        "process": "^0.11.10",
         "typescript": "~5.6.2",
         "typescript-eslint": "^8.7.0",
         "workbox-cli": "^7.1.0"

src/component/Camera.tsx

@@ -0,0 +1,63 @@
+import { component, observer, WebCell, WebCellProps } from 'web-cell';
+import { stringifyCSS } from 'web-utility';
+
+export interface CameraViewProps extends WebCellProps {
+    onCapture?: (event: CustomEvent<Blob>) => any;
+}
+
+export interface CameraView extends WebCell<CameraViewProps> {}
+
+@component({ tagName: 'camera-view', mode: 'open' })
+@observer
+export class CameraView
+    extends HTMLElement
+    implements WebCell<CameraViewProps>
+{
+    cssCode = stringifyCSS({
+        ':host': { display: 'block' },
+        video: { width: '100%', height: '100%' }
+    });
+
+    async init(video?: HTMLVideoElement) {
+        const { width, height } = getComputedStyle(video);
+
+        const stream = await navigator.mediaDevices.getUserMedia({
+            video: { width: parseFloat(width), height: parseFloat(height) }
+        });
+
+        video.srcObject = stream;
+        video.play();
+    }
+
+    handleCapture = async (event: MouseEvent) => {
+        const video = event.currentTarget as HTMLVideoElement;
+
+        if (video.paused) return video.play();
+
+        video.pause();
+
+        const { width, height } = getComputedStyle(video);
+
+        const canvas = new OffscreenCanvas(
+            parseFloat(width),
+            parseFloat(height)
+        );
+        const context = canvas.getContext('2d');
+
+        context.drawImage(video, 0, 0);
+
+        const blob = await canvas.convertToBlob();
+
+        this.emit('capture', blob);
+    };
+
+    render() {
+        return (
+            <>
+                <style>{this.cssCode}</style>
+
+                <video ref={this.init} onClick={this.handleCapture} />
+            </>
+        );
+    }
+}