POC: defining custom elements in the wc, passing to app

package.json

@@ -34,6 +34,7 @@
     "react-bootstrap-typeahead": "^6.1.2",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.0",
+    "react-webcam": "^7.2.0",
     "styled-components": "^5.3.6"
   },
   "scripts": {

src/App.js

@@ -71,7 +71,7 @@ function Viewer({ widgetSrc, code, initialProps }) {
 }
 
 function App(props) {
-  const { src, code, initialProps, rpc, network, selectorPromise } = props;
+  const { src, code, initialProps, rpc, network, selectorPromise, customElements } = props;
   const { initNear } = useInitNear();
 
   useAccount();
@@ -90,6 +90,7 @@ function App(props) {
           }
           return <Link {...props} />;
         },
+        ...customElements
       },
       features: {
         enableComponentSrcDataKey: true,

src/Camera.js

@@ -0,0 +1,114 @@
+import React from "react";
+import Webcam from "react-webcam";
+import styled from "styled-components";
+
+const StyledOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-areas:
+    "top-left top-center top-right"
+    "center-left center center-right"
+    "bottom-left bottom-center bottom-right";
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
+`;
+
+const OverlayZone = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  grid-area: ${(props) => props.area};
+`;
+
+class Camera extends React.Component { // This needs to be a class component
+  constructor(props) {
+    super(props);
+    this.containerRef = React.createRef();
+    this.webcamRef = React.createRef();
+    this.state = {
+      facingMode: this.props.videoConstraints.facingMode,
+      videoConstraints: this.props.videoConstraints,
+    };
+  }
+
+  // (and cannot use hooks, like useState or useEffect)
+  // or access contexts
+  componentDidMount() {
+    this.updateVideoConstraints();
+  }
+
+  updateVideoConstraints = () => {
+    if (this.containerRef.current) {
+      const { width, height } = this.containerRef.current.getBoundingClientRect();
+      this.setState((prevState) => ({
+        videoConstraints: {
+          ...prevState.videoConstraints,
+          width,
+          height,
+        },
+      }));
+    }
+  };
+
+  getScreenshot = () => {
+    if (this.webcamRef.current) {
+      return this.webcamRef.current.getScreenshot();
+    }
+    return null;
+  };
+
+  toggleFacingMode = () => {
+    this.setState((prevState) => ({
+      facingMode: prevState.facingMode === "user" ? "environment" : "user",
+    }));
+  };
+
+  render() {
+    const { audio, mirrored, screenshotFormat, overlayComponents } = this.props;
+    const { facingMode, videoConstraints } = this.state;
+
+    const webcamAPI = {
+      getScreenshot: this.getScreenshot,
+      toggleFacingMode: this.toggleFacingMode,
+      facingMode,
+    };
+
+    return (
+      <div ref={this.containerRef} style={{ position: "relative", width: "100%", height: "100%", overflow: "hidden" }}>
+        <Webcam
+          audio={audio}
+          mirrored={mirrored}
+          screenshotFormat={screenshotFormat}
+          videoConstraints={{ ...videoConstraints, facingMode }}
+          ref={this.webcamRef}
+          style={{ width: "100%", height: "100%", objectFit: "cover" }}
+        />
+        <StyledOverlay>
+          {Object.entries(overlayComponents).map(([zone, Component]) => (
+            <OverlayZone key={zone} area={zone}>
+              <Component {...webcamAPI} />
+            </OverlayZone>
+          ))}
+        </StyledOverlay>
+      </div>
+    );
+  }
+}
+
+Camera.defaultProps = {
+  audio: false,
+  mirrored: false,
+  screenshotFormat: "image/jpeg",
+  videoConstraints: {
+    facingMode: "user",
+    width: 1280,
+    height: 720,
+  },
+  overlayComponents: {},
+};
+
+export default Camera;

src/index.js

@@ -1,8 +1,11 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
-import App from "./App";
+import App from "./App"; // what if this was bundled and published separately?
+import Camera from "./Camera";
 
+// should NearSocialViewerElement be a newly defined and extendable class? to maintain consistency?
+// so this would could be "class NearWebcamViewerElement extends NearSocialViewerElement"
 class NearSocialViewerElement extends HTMLElement {
   constructor() {
     super();
@@ -45,6 +48,9 @@ class NearSocialViewerElement extends HTMLElement {
         rpc={rpc}
         network={network}
         selectorPromise={this.selectorPromise}
+        customElements={{ // defining and importing custom elements here
+          Camera: (props) => <Camera {...props} />,
+        }}
       />
     );
   }
@@ -56,4 +62,6 @@ class NearSocialViewerElement extends HTMLElement {
   }
 }
 
+// other custom versions of near-bos-webcomponent should define their own element tag
+// near-webcam-viewer
 customElements.define("near-social-viewer", NearSocialViewerElement);