How to solve the problem of navigator.mediaDevices returning undefined in HTTP page?

Media device access problems and solutions under H5 application HTTP environment

When deploying H5 applications, especially when using navigator.mediaDevices to obtain video media resources, you often encounter undefined situations on HTTP pages. Even if the iframe uses HTTPS protocol, the root page is HTTP still causes permission issues.

For example, the root page is HTTP and the embedded iframe is HTTPS. navigator.mediaDevices is still not accessible within the iframe. How to solve it?

An effective method is to modify Google Chrome security policies:

1. Enter chrome://flags/#unsafely-treat-insecure-origin-as-secure in the browser address bar to open the Chrome Experiment Features page.
2. Find the "Insecure origins treated as secure" option (usually highlighted).
3. Set this option to "Enabled" and enter your HTTP domain name in the text box.
4. Restart the browser to make the configuration take effect.

This method has been verified and is effective in actual applications and can solve navigator.mediaDevices permission problem under HTTP pages. Please note that this method modifys browser security settings and is only used in test or specific development environments. Please be cautious in production environments and prioritize HTTPS deployments for security.

The above is the detailed content of How to solve the problem of navigator.mediaDevices returning undefined in HTTP page?. For more information, please follow other related articles on the PHP Chinese website!