Access the Webcam
- The Brewmaster
- Dec 15, 2021
- 1 min read
Updated: Dec 27, 2022
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.
Comentarios