Local Development

For local development with the Web iframe plugin, the most important question is not "how do I integrate it", but "how can the host page call the camera and iframe reliably during development".

The Simplest Setup

If you are only developing page structure, styles, and event logic on your local computer, visiting:

http://localhost:port

is usually enough. All major capabilities work there and it fully covers day-to-day development needs.

The Key Constraint for Real Device Testing

As soon as you want to test real camera behavior on a phone, keep the following in mind:

• localhost works only on the current computer
• when a phone opens your page, it usually uses a LAN IP such as 192.168.x.x, 10.x.x.x, or 172.16-31.x.x
• a LAN IP does not normally satisfy the HTTPS requirement

So for real-device debugging, the safest option is to prepare a test environment that supports HTTPS access.

Recommended Development Rhythm

Phase 1: Build the Host Page Locally

• write the host page code on your local machine
• expose it with http://localhost:port
• add custom UI
• listen for key events such as error, ready, downloadAssetProgress, and sceneStart
• add custom interactions
• implement photo sharing
• run through the entire experience flow

Phase 2: Deploy a Test Environment

• deploy the host page to an HTTPS test domain
• validate camera access, permissions, media playback, and photo capture on a real phone

Phase 3: Deploy to Production

• validate permissions, watermarks, and the full experience flow

The Most Common Local Pitfalls

1. opening the page on a real phone through 192.168.x.x or a similar address, then finding that the camera cannot open
2. finishing the CSS locally but never validating the permission flow in a real HTTPS environment
3. using mock or proxy asset URLs locally, then forgetting to handle CORS in production