I am reaching out to you because I am experiencing difficulties integrating a vMix Call into my website using an iframe. Specifically, errors occur when attempting to access the camera and microphone. Despite multiple troubleshooting attempts, the issues persist, and I need assistance to resolve them.
Main Issue
The integration of the vMix Call via an iframe is not functioning as expected. When attempting to access the camera and microphone, they are either blocked by the browser, or the vMix Call URL "https://vmix.at/5hCL6" is unable to access them.
Specific Error Messages
The following error messages appear in the browser console, originating from the iframe:
[Violation] Permissions policy violation: microphone is not allowed in this document.
[Violation] Permissions policy violation: camera is not allowed in this document.
vMixCall: Failed Initial Constraints
vMixCall: Failed Second Try Constraints
Previous Troubleshooting Attempts
I have already taken several steps to resolve the issue, but without success:
Adjustment of the allow attribute in the iframe tag:
html
<iframe src="https://vmix.at/5hCL6" width="100%" height="100%" allow="camera; microphone"></iframe>
Adding a Permissions Policy:
Via HTTP header:
text
Permissions-Policy: camera=(self "https://vmix.at"), microphone=(self "https://vmix.at")
Via meta tag in the <head> section of the parent page:
html
<meta http-equiv="Permissions-Policy" content="camera=(self 'https://vmix.at'), microphone=(self 'https://vmix.at')">
Checking the HTTPS configuration:
Both the parent page and the iframe are loaded over HTTPS.
Checking browser permissions:
Permissions for the camera and microphone were explicitly granted in the browser (Chrome) for the parent page.
Despite these efforts, the errors persist.
To rule out other factors, I reproduced the setup with a minimal test page:
html<!DOCTYPE html> <html> <head> <meta http-equiv="Permissions-Policy" content="camera=(self 'https://vmix.at'), microphone=(self 'https://vmix.at')"> </head> <body> <iframe src="https://vmix.at/5hCL6" allow="camera; microphone"></iframe> </body> </html>
Even in this case, the errors continue to occur.
We also tested the Camera/Microphone access on our website in an Iframe with
https://webcamtests.com/ which works just fine. Access to camera/microphone can be granted and then viewed in the Iframe.
I kindly request further insights or specific instructions on correctly configuring the Permissions Policy for vMix Calls within iframes. Are there any additional restrictions or special requirements from vMix that I should be aware of? Alternatively, if there is a recommended integration method that avoids these issues, I would greatly appreciate any guidance.
Thank you very much in advance for your assistance.
