Adding my html code to an html terminal it asks for camera to be turned on the capturing process works fine but when I add this same html code to a wix iframe window, no request is made to turn on camera thus the camera capture doesn’t work. Please how do I solve this problem?
First, you need a Premium plan for your site. You then need to do the following:
Go to Settings->Custom Code
Choose Edit Settings from popup menu and then set up as shown below:
Paste the following code snippet in the code snippet box:
<script>
setTimeout(function () {
var iframes = document.querySelectorAll("iframe")
console.log(iframes)
iframes[0].setAttribute("allow", "microphone; camera")
var y = iframes[0].parentNode;
var x = iframes[0]
x.setAttribute("allow", "microphone; camera");
y.appendChild(x);
}, 3000);
</script>
And then set the code type to Functional:
I used the following test code in the HtmlComponent:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display Webcam Stream</title>
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
</style>
</head>
<body>
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<script>
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
console.log('has getUserMedia');
navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
video.srcObject = stream;
})
.catch(function (error) {
console.log("Something went wrong!");
});
}
</script>
</body>
</html>
Note that although this worked for me, as well as for someone else I was helping, there is no guarantee that this will work for your use case. You’ll have to experiment and play around. It might work.
Thanks for the elaborate response, quite strange wix will require a premium plan for this to function. The point is to build a site and ensure everything works before getting a plan not the other way.
@chidiejike It’s a technical issue. See the article Adding Custom Code to Your Site . Many code snippets need to be associated with a specific domain, and domains can only be assigned to a site that has a Premium Plan. Allowing code snippets that don’t need a domain is a technical and UX challenge.
Wix is constantly working on improving the developer experience. Feel free to make your voice heard. The Wishlist Page is the official platform for requesting new features. You can vote, comment, and track the status of the requested features.
@yisrael-wix I can see the react npm module, but that seems not to work after following the instructions. Does this model also need a premium plan to enable the webcam because that is all I need. The code for capturing, saving, posting etc are all written in the iframe.
@yisrael-wix this is not working for me, could you please help me any other working example
thankyou
@yisrael-wix i’ve followed your steps and it works with me on safari and chrome (on any phone) but on any desktop or laptop it’s not asking for allowing mic and cam
so what’s the problem that makes it works just fine with chrome and safari on phones but not pc’s
could you please help me !!
Browser and platform compatibility are always problematic. It works for me, but I really have no idea what the problem is that you’re having.
Do you have any other custom scripts installed? Sometimes scripts don’t play well together.
@yisrael-wix no i don’t have
i’m just wondering why is it only works on phone and asking for permission but when it comes to the desktop it’s not working
whyyyy?? 
I really have no idea. Perhaps browser settings? It works for me on a Mac with Safari/Firefox/Chrome/Opera.
I just tried exactly your code on my site but it did not work
Hi, there.
I was able to do it as explained by Yisrael’s method. At first, when I pasted the code, I got a “NotAllowedError”, maybe caused by “camera and microphone access in Cross Origin Iframes with getUserMedia & Feature Policy”.
but I rewrote the code as follows, it worked.
< script >
setTimeout ( function (){ // waiting time for iframe elements loading.
var iframes = document . querySelectorAll ( “iframe” );
for(const iframe of iframes){
iframe . setAttribute ( “allow” , “microphone; camera” );
var y = iframe . parentNode ;
var x = iframe ;
x . setAttribute ( “allow” , “microphone; camera” );
y . appendChild (x);
}
}, 3000 );
</ script >
I have another iFrame HTML Component in the header page content.
So it seems that the Yisrael’s original code was not worked on my page.
(Because it wasn’t applied to the iframe that had to be applied)
This did not work for me, can you share the code you added to the html component?
@chidiejike I think it’s better to describe here what kind of error is occurring on your browser. It’s best way to solve the problem you are facing. I used Yisrael’s html component test code and my test code. Both worked fine.
Please try delay the time of setTimeout a little more.
Or you can set up a button so that getUserMedia() can be called manually timing.
Or your browser’s security setting problem. You should change the browser’s setting to allow using camera and microphone.
@onemoretime I am getting the same error you stated above, I used Yisreal’s code directly in an html page on my desktop and it worked fine but does not work in wix. So the issue is from the custom code area in wix.
@chidiejike Do you have premium plan? for the time being, please try my three advices stated above.
@onemoretime I have tried it in a Premium Plan and my desktop security is not blocking my
@chidiejike
try!
var video = document . querySelector ( “#videoElement” );
if ( navigator . mediaDevices . getUserMedia ){
console . log ( 'has getUserMedia' );
setTimeout ( function (){//added
navigator . mediaDevices . getUserMedia ({ video : true })
. then ( function ( stream ){
video . srcObject = stream ;
}). catch ( function ( error ){
console . log ( "Something went wrong!" );
});
},10000);//added
}
@onemoretime This triggers the camera on page load but calling the camera from my html element on button click returns an alert error as
@chidiejike so…you mean you could?