本地开发

Web iframe 插件的本地开发，重点不是“怎么接入”，而是“宿主页面如何在开发阶段稳定调用摄像头和 iframe”。

最简单的开发方式

如果你只是在本地电脑上，开发页面结构、样式和事件逻辑，使用：

http://localhost:port

正常访问通常就足够了，所有能力和特性都支持。完全满足开发调试需要。

真机调试的关键限制

一旦你要在手机上真正测试摄像头能力，就要注意：

• localhost 只对当前电脑有效
• 手机访问你的电脑页面时，通常会变成局域网 IP(类似192.168.x.x、10.x.x.x、172.[16-31].x.x的地址)
• 局域网 IP 默认不满足使用HTTPS协议访问的要求

因此真机调试时，最稳妥的方式是准备一个支持 HTTPS 访问的测试环境。

推荐开发节奏

第一阶段：本地开发宿主页面

• 用本地电脑编写宿主页面代码
• 启用http://localhost:port服务接受访问
• 增加自定义UI内容
• 监听关键事件，如error、ready、downloadAssetProgress、sceneStart等
• 增加自定义交互
• 拍照分享
• 完整联调体验流程

第二阶段：部署测试环境

• 把宿主页发到 HTTPS 测试域名
• 在真实手机上验证摄像头、权限、媒体播放、拍照

第三阶段：部署正式环境

• 验证权限、水印、体验流程等是否正确

本地最容易踩的坑

1. 使用 192.168.x.x 之类地址直接真机访问，结果摄像头打不开。
2. 页面样式调通了，但没有在真实 HTTPS 环境验证权限链路。
3. 本地用了 mock或proxy 素材地址，线上却忘了处理 CORS。