H5页面视频媒体获取问题如何解决？

H5页面视频媒体访问难题及解决方案

H5开发中，常常遇到视频媒体访问权限问题。尤其在http页面嵌套https iframe时，navigator.mediaDevices 无法获取媒体设备权限，成为常见难题。本文提供有效的解决方案。

问题分析

当根页面使用HTTP协议，而嵌套的iframe使用HTTPS协议时，无论在根页面还是iframe中，都无法使用 navigator.mediaDevices 获取视频媒体设备，严重影响开发进度。

解决方法

通过调整谷歌浏览器设置，即可轻松解决此问题：

1. 访问chrome实验特性页面: 在浏览器地址栏输入 chrome://flags/#unsafely-treat-insecure-origin-as-secure 并回车。

2. 启用不安全来源安全处理: 找到 “Insecure origins treated as secure” 选项 (通常已高亮显示)，将其设置为 “已启用”。

3. 添加HTTP域名: 启用后，需要输入你的HTTP域名，告知浏览器将其视为安全来源。

4. 重启浏览器: 完成以上步骤后，重启浏览器使设置生效。重启后，HTTP页面即可通过 navigator.mediaDevices 访问媒体设备。

此方法经验证有效，可有效解决HTTP页面下 navigator.mediaDevices 权限获取失败的问题。