Blank Pose Detection for building POC

Integrating the Pose Detection Iframe

This document outlines how to embed and interact with the Pose Detection component using an iframe in your parent website.

1. Embedding the Iframe

Embed the component using a standard HTML iframe tag. Set the src attribute to the URL where the Pose Detection page is hosted.

The URL of the Pose Detection component is:

https://www.uat.gofa.app/playground/pose-detection-hook

or

https://www.gofa.app/playground/pose-detection-hook

<iframe
  id="pose-detection-iframe"
  src="https://www.uat.gofa.app/playground/pose-detection-hook" <!-- Replace with the actual URL -->
  width="100%"  <!-- Adjust dimensions as needed -->
  height="600px" <!-- Adjust dimensions as needed -->
  allow="camera; microphone" <!-- Essential: Grant camera permissions -->
  frameborder="0"
></iframe>

Important: The allow="camera; microphone" attribute is crucial for the component to access the user's webcam.

2. URL Parameter Controls

You can configure the initial state of the iframe component by appending query parameters to the src URL.

Parameter	Type	Default	Description	Example
isShowButtons	boolean	false	If true, displays control buttons (Start/Stop Camera, Start/Stop Pose, Switch Camera) within the iframe.	?isShowButtons=true
isDrawPose	boolean	true	If true, draws the detected pose skeleton overlay on the video feed.	?isDrawPose=false
autoStartCamera	boolean	false	If true, attempts to start the camera automatically as soon as the component loads.	?autoStartCamera=true
autoStartPoseDetection	boolean	false	If true, attempts to initialize and start pose detection automatically once the camera is ready.	?autoStartPoseDetection=true
autoStart (Legacy)	boolean	false	If true, sets both autoStartCamera and autoStartPoseDetection to true. Provided for backward compatibility.	?autoStart=true

Example Combined URL:

https://www.uat.gofa.app/playground/pose-detection-hook?autoStartCamera=true&autoStartPoseDetection=true&isDrawPose=true&isShowButtons=false

This URL would attempt to automatically start the camera and pose detection, draw the pose overlay, but hide the control buttons.

3. Parent-Iframe Communication (postMessage)

You can control the iframe and receive data/status updates using the window.postMessage API.

Security Note: When sending messages to the iframe, always specify the iframe's origin as the targetOrigin in production environments instead of *. When receiving messages from the iframe, always verify the event.origin to ensure the message is coming from the expected source.

a. Incoming Commands (Parent → Iframe)

Send commands from your parent page to the iframe to control its behavior.

How to Send:

const iframe = document.getElementById('pose-detection-iframe');
const iframeWindow = iframe.contentWindow;
const targetOrigin = 'YOUR_IFRAME_ORIGIN'; // Replace with the actual origin in production

// Example: Command to turn the camera on
const command = { command: 'camera-on' };

if (iframeWindow) {
  iframeWindow.postMessage(command, targetOrigin);
} else {
  console.error("Iframe content window not accessible.");
}

Available Commands:

The message sent to the iframe should be an object with a command property.

Command	Payload Structure	Description
camera-on	{ command: "camera-on" }	Requests the iframe to initialize and start the camera feed.
camera-off	{ command: "camera-off" }	Requests the iframe to stop the camera feed and pose detection (if running).
camera-switch	{ command: "camera-switch" }	Requests the iframe to switch the camera to another one (if running)
pose-detection-start	{ command: "pose-detection-start" }	Requests the iframe to start detecting poses. Requires the camera to be active and pose detection initialized. If not initialized, it will attempt to initialize first.
pose-detection-stop	{ command: "pose-detection-stop" }	Requests the iframe to stop detecting poses. The camera feed remains active. Clears the pose overlay.
show-buttons	{ command: "show-buttons" }	Makes the control buttons (Start/Stop Camera, etc.) visible within the iframe.
hide-buttons	{ command: "hide-buttons" }	Hides the control buttons within the iframe.
draw-pose	{ command: "draw-pose" }	Enables the drawing of the pose skeleton overlay on the video feed.
hide-pose	{ command: "hide-pose" }	Disables the drawing of the pose skeleton overlay and clears any existing drawing.

b. Outgoing Events (Iframe → Parent)

Listen for events sent from the iframe to your parent page to get status updates, detected pose data, and error information.

How to Listen:

const expectedOrigin = 'YOUR_IFRAME_ORIGIN'; // Replace with the actual origin

window.addEventListener('message', (event) => {
  // 1. Verify the origin of the message
  if (event.origin !== expectedOrigin) {
    console.warn(`Message received from unexpected origin: ${event.origin}. Ignoring.`);
    return;
  }

  // 2. Check if the message has the expected structure (contains an 'event' property)
  if (typeof event.data !== 'object' || !event.data.hasOwnProperty('event')) {
    console.log("Received non-event message or message without 'event' property:", event.data);
    return;
  }

  const { event: eventName, ...data } = event.data;
  console.log(`[Parent] Received event: ${eventName}`, data);

  // 3. Handle the specific event
  switch (eventName) {
    case 'iframe-ready':
      // Iframe has loaded, parsed URL params, and is ready for commands.
      console.log("[Parent] Iframe is ready.");
      // You can now safely send initial commands if needed.
      break;
    case 'camera-status':
      // Status: 'on', 'off'
      // Optional: 'error' property if status is 'off' due to an error
      console.log(`[Parent] Camera status: ${data.status}`, data.error || '');
      // Update UI based on camera status
      break;
    case 'pose-status':
      // Status: 'initialized', 'init_failed', 'detecting', 'start_failed', 'stopped'
      // Optional: 'error' property on failure events
      console.log(`[Parent] Pose detection status: ${data.status}`, data.error || '');
      // Update UI or logic based on pose detection status
      break;
    case 'pose-detected':
      // Contains the raw pose data object
      const poseData = data.data;
      console.log("[Parent] Pose detected:", poseData);
      // Process the pose data (e.g., send to backend, update game state)
      break;
    case 'error':
      // Contains an error message
      console.error(`[Parent] Iframe reported error: ${data.message}`);
      // Display error message to the user or take corrective action
      break;
    default:
      console.warn(`[Parent] Received unknown event type: ${eventName}`);
  }
});

Available Events:

The message received from the iframe will be an object with an event property and potentially other data properties.

Event	Data Payload (event.data)	Description
iframe-ready	{ event: "iframe-ready" }	Sent once the iframe has loaded, parsed URL parameters, and set up its message listener. Indicates it's safe to send commands.
camera-status	{ event: "camera-status", status: "on" | "off", error?: string }	Indicates the current status of the camera. status is "on" or "off". An error message is included if turning on failed.
pose-status	{ event: "pose-status", status: string, error?: string }	Indicates the status of the pose detection module. Possible status values: "initialized", "init_failed", "detecting", "start_failed", "stopped". An error message is included on failure events.
pose-detected	{ event: "pose-detected", data: Pose, timestamp: number }	Sent each time a pose is successfully detected. The data property contains the detailed pose object (structure defined by the underlying library), and the timestamp property contains the UNIX timestamp of the pose detected.
error	{ event: "error", message: string }	Sent when a significant operational error occurs within the iframe (e.g., camera access denied, pose initialization failure).

By using these URL parameters and the postMessage communication channel, you can effectively integrate and control the Pose Detection iframe within your parent application. Remember to handle permissions and security considerations carefully.

---

AI Prompt to create the code

[AI Prompt to create the code](Blank Pose Detection for building POC/AI Prompt to create the code.md)