I am trying to resolve this next problem in which I am calling an external API to our website and embedding it into an iframe.
For doing so, I am passing an addEventListener to my window so that it invokes the function changeState(state). The changeState function detects the state of the videocall from connected, closed, halted and disconnected.
Also for passing the URL which I am getting from the API, I just call the iframeTrial.setAttribute("src", videoconsultaPruebaURL); and display the room embedded into my website which runs in C#.
The error which I am getting whenever I want to join into the videoroom, is this:
Uncaught TypeError: Cannot read properties of undefined (reading ‘success’)
I only know that the API which we are using it is written in Vue.js and the error comes from there but I am not quite sure if it has something to do with my microphone and camera permissions from Google Chrome. I have double-checked and know that both camera and microphone have the granted permissions from my browser.
If anyone has any advice on this specific matter, that would be quite appreciating. Thanks
@using Microsoft.AspNetCore.Http;
@{
Layout = "";
}
<!DOCTYPE html>
<html dir="ltr" lang="es">
<head>
@Html.Partial("_Layout_Metas")
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script>
if(window.addEventListener){
window.addEventListener("message", onMessage, false);
} else if(window.attachEvent){
window.attachEvent("onmessage", onMessage, false);
}
function onMessage(event){
//if (event.origin !== "https:wip.160worldmeet.net"){
// return;
//}
let data = event.data;
changeState(data);
if(typeof(window[data.func]) == "function") {
alert(data);
alert(data.func);
alert(data.state);
window[data.func].call(null, data.state);
}
}
function changeState(state){
if(state == "connected"){
alert("Nuevo estado: " + state);
}
}
</script>
<style>
.leftwatermark {
visibility: hidden !important;
}
iframe {
width: 100%;
height: auto;
min-height: 1000px;
}
</style>
</head>
<body>
<div id="wrapper" class="clearfix">
<!--Cargamos Layout de NavBar -->
<partial name="_NavBar_DataUser" />
</div>
<iframe id="iframeTrial" src=""></iframe>
<script>
let videoconsultaPruebaURL = '@ViewBag.videoconsultaDomain';
let iframeTrial = document.getElementById("iframeTrial");
if(iframeTrial != undefined && videoconsultaPruebaURL != undefined) {
iframeTrial.setAttribute("src", videoconsultaPruebaURL);
}
let node = iframeTrial.contentWindow;
</script>
</body>
</html>
Advertisement
Answer
I finally found the answer to the solution.
I just assigned allow="camera *;microphone *" to my iframe like this and it works like a charm:
<iframe id="iframeTrial" src="" allow="camera *;microphone *"></iframe>
The above will allow any page, hosted on any domain to request access to the camera and microphone of the user while loaded through the above iframe.
To tighten things up you can be more granular about which domains have access to those features as the allow_list can have any of the following values:
*: used above, the feature is allowed in top-level browsing contexts and in nested contexts (iframes)
'self': the feature is allowed in top-level browsing contexts and same-origin nested contexts. The feature is not allowed in cross-origin documents for nested browsing contexts.
'none': The feature is not allowed at all in top-level and nested browsing contexts.
<origin(s)>: The feature is allowed in specific origin(s), for example https://my_website.com
Tested in Chrome Version 100.0.4896.88 (Official built) (64 bits).