Adding "Allow microphone; camera" to wix iframes

Ask the community
,
1

The original problem: we’re unable to add an iframe in an html component to our sites that accesses the camera and microphone. The cause of this is two-fold as I understand. First, wix wraps our iframe inside its own iframe wrapper. While our iframe includes the allow microphone; camera, the wrapper iframe does not. Second, browsers have begun requiring iframe to explicitly allow use of mic & camera.

Almost a year ago, I stumbled upon a means of adding the the required “allow mic; camera” to the wrapper iframe by adding the following code to the Body-end via the Tracking & Analytics page:

Now here’s the new problem. This solution quit working in the past week. My question for the group is why? It appears that this code is simply no longer being executed. I’ve verified the code is still in the body-end of the page by viewing the page source. It’s just not adding the “allow” as it used to. Can anyone shed light on this?

Thanks for your help!

2 Likes
2

UPDATE: Until recently, my pages successfully accessed the mic and camera, then something changed. The code is still executing but something has changed in how these iframes are served. I discovered that at the time this code is executed in the bodyend, the iframes are not yet in the DOM. By inserting a 3 second delay in the code, the iframe is once again found and the allow attribute is added.

There is a second mystery here. This now works (I can access camera and mic) on Safari but NOT Chrome/Firefox/Edge.

Any ideas on what changed and how to claim access to mic and camera from our wix pages?

3

We are having the same problem, have asked wix directly on this and no answer!

4

SOLVED: In case anyone is interested, I resolved my issue. In addition to the delay (which is a total hack but I don’t know an alternative), rather than just add the allow attribute to the wix-added iframe, the code now:

  • creates a NEW iframe with the appropriate src and other attributes,
  • appendChild this iframe to the parentNode of the wix-added frame
  • remove the wix-added iframe

This essentially replaces the wix sandbox iframe with the iframe I wanted in the first place. Mic and camera work flawlessly.

5

Hi Dwight,

Sorry so what have done to get it working now?

Could you give the process/code you have used?/

Thanks

Tom

1 Like
6

Hi dwight , or someone who has been able to find a solution. We have tried to implement your solution using the code that we came up based on your broad description. The 3 sec delay works fin with Safari, but we are out of luck when trying chrome, even after implementing the NEW solution that you described. It would be awesome if you can confirm or identify what we may be missing in our code below. We implemented this code in all pages, in the body end via the Custom Code section:

7

We are trying this code but not working on chome. Can you share any more?

8

Hi everyone. I m also trying to figure out a way to access mic through my iframe. I came across an app in wix marketplace that allows user to record audio messages. It’s interesting to see how so many people are struggling with the mic access issue and and app is achieving the same thing easily. Any idea how I can utilize this app to fashion a new feature on my site?

9

I finally made it work both on Safari and Chrome using this code (thanks to you all):

< 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 >

10

Thanks!

11

THANK YOU so much for sharing your fix!!!

12

Hi, I still can not make it works using your code (copy your code then added the under the “Tracking & Analytics” section of the dashboard as part of Body-End, set it to add code to “all Pages” and to “Load code once”). So I want to ask does microphone and camera still work on your website? Thanks!

13

I’ve been going through this issue for almost a year now… from not working - to finding a solution - to not working again - finding another solution - to not working again. This is beyond frustrating. Has anyone figured what the core problem is and what - if any - more lasting fix can be applied.

14

See my blog post Access the Webcam (also accesses the mic). Note that some browsers are cranky - or at least moody - and results might vary.

15

@rafael68862 hi
where exactly does one put this code in Wix?

16

Hi!!! please guide me… Im kind of lost… where should I put this code in wix? inside de HTML1, or in the personalized code in the Dashboard… ?

17

Hi i followed your solution but at still not working. Do you know if the solution has changed or if is any other ?

18

where do i put this script, velo or html iframe

19

I came across this problem today too, very frustrating, here’s how I fixed it. Hope it helps.

  1. Select the site that you are working on.
  2. Go to WIX>Dashboard>Settings
  3. Select Advanced>Custom Code
  4. In the ‘Body-End’ section, select ‘Add Code’
  5. Copy and paste this code:
  1. Under ‘Add Code to Pages’, select All pages and Load code once
  2. Select Apply and Publish your website
21

Hey Joe, did you mean to copy paste a code in step 5? Is it the one from earlier in the thread? Thanks!