Uncaught TypeError: Cannot read properties of undefined (reading 'success')

Uncaught TypeError: Cannot read properties of undefined (reading 'success')

我正在尝试解决下一个问题,我正在调用我们网站的外部 API 并将其嵌入到 iframe 中。

为此,我将 addEventListener 传递给 window,以便它调用函数 changeState(state)。 changeState 函数从 connectedclosedhalteddisconnected.

检测视频通话的状态

此外,为了传递我从 API 获得的 URL,我只是调用 iframeTrial.setAttribute("src", videoconsultaPruebaURL); 并显示嵌入在我的网站中的房间​​,该房间在 C# 中运行。

每当我想加入视频室时遇到的错误是:

Uncaught TypeError: Cannot read properties of undefined (reading 'success')

我只知道我们用的API是写在Vue.js里的,错误是从那里来的,但我不太确定是不是和我的麦克风有关,来自 Google Chrome 的相机权限。我已经仔细检查并知道摄像头和麦克风都具有我的浏览器授予的权限。

如果有人对这个具体问题有任何建议,那将不胜感激。 谢谢

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

我终于找到了解决方案的答案。 我刚刚像这样将 allow="camera *;microphone *" 分配给了我的 iframe,它就像一个魅力:

 <iframe id="iframeTrial" src="" allow="camera *;microphone *"></iframe>

以上将允许托管在任何域上的任何页面在通过上述 iframe 加载时请求访问用户的摄像头和麦克风。

为了加强控制,您可以更详细地了解哪些域可以访问这些功能,因为 allow_list 可以具有以下任何值:

*:在上面使用,该功能在 top-level 浏览上下文和嵌套上下文 (iframe)

中是允许的

'self':该功能在 top-level 浏览上下文和 same-origin 嵌套上下文中是允许的。 cross-origin 嵌套浏览上下文的文档中不允许使用该功能。

'none':top-level 和嵌套浏览上下文中根本不允许使用该功能。 <origin(s)>:特定来源允许使用该功能,例如 https://my_website.com

在 Chrome 版本 100.0.4896.88(官方内置)(64 位)中测试。