Question

在Node-red红色仪表板上，我想显示不同流向的摄像机流。背后的想法是在每个流程上显示摄像机。

为了显示摄像机流，我使用了iFrame。一切正常，但是我必须为每个单独的iFrame提供流的URL。

因此，我正在考虑一种解决方案，以将URL设置在一个位置并将值共享给所有流。据我了解，我必须使用node-red的全局上下文。

因此，我已经安装了node-red-contrib-config软件包并放置了一个这样的配置节点

[
    {
        "id": "3d181192.cf3c5e",
        "type": "tab",
        "label": "Global data",
        "disabled": false,
        "info": ""
    },
    {
        "id": "5851290f.6758b8",
        "type": "config",
        "z": "3d181192.cf3c5e",
        "name": "global_camera",
        "properties": [
            {
                "p": "camera_url",
                "pt": "global",
                "to": "http://192.168.178.33:8081",
                "tot": "str"
            }
        ],
        "active": true,
        "x": 157,
        "y": 78,
        "wires": []
    }
]

要创建iframe，我尝试了其他方法。如果我使用静态URL，则它适用于模板节点和UI模板节点。如果我尝试获得全球价值，那将永远行不通。我总是

“未捕获的ReferenceError：未定义全局”

我尝试将URL设置为...src={{global.get("camera_url")}}，并使用其他类似的代码：

[
{
    "id": "739e53d5.fbf2bc",
    "type": "template",
    "z": "3845329d.55847e",
    "name": "",
    "field": "template",
    "fieldType": "msg",
    "format": "handlebars",
    "syntax": "mustache",
    "template": "<iframe id=\"camera\" seamless width=\"100%\" height=\"100%\"></iframe>\n<script>\n/*(function(scope) {\n    // debugger;\n    var camera_url = global.get('camera_url');\n    window.ifr = document.getElementById(\"camera\");\n    window.ifr.src=camera_url;\n})(scope);\n*/\n  var camera_url = global.get(\"camera_url\");\n    window.ifr = document.getElementById(\"camera\");\n    window.ifr.src=camera_url;\n</script>",
    "output": "str",
    "x": 86,
    "y": 810,
    "wires": [
        [
            "f8f0597d.727d28"
        ]
    ]
},
{
    "id": "f8f0597d.727d28",
    "type": "ui_template",
    "z": "3845329d.55847e",
    "group": "ad85611c.fa213",
    "name": "camera",
    "order": 1,
    "width": "6",
    "height": "6",
    "format": "",
    "storeOutMessages": false,
    "fwdInMessages": false,
    "templateScope": "local",
    "x": 90,
    "y": 865,
    "wires": [
        []
    ]
},
{
    "id": "77018043.39f11",
    "type": "inject",
    "z": "3845329d.55847e",
    "name": "",
    "topic": "",
    "payload": "",
    "payloadType": "date",
    "repeat": "",
    "crontab": "",
    "once": true,
    "onceDelay": "0.3",
    "x": 51,
    "y": 772,
    "wires": [
        [
            "739e53d5.fbf2bc"
        ]
    ]
},
{
    "id": "ad85611c.fa213",
    "type": "ui_group",
    "z": "",
    "name": "Serial",
    "tab": "ab06111f.f336",
    "order": 1,
    "disp": true,
    "width": "15"
},
{
    "id": "ab06111f.f336",
    "type": "ui_tab",
    "z": "",
    "name": "Serial Monitor",
    "icon": "dashboard"
}

]

有人可以解释我在做什么错吗？

谢谢，帕特里克

Answer 1

感谢阿德琳的提示。

这是我的解决方案。正如Adelin解释的那样，我试图从浏览器访问全局上下文。这是不可能的，只能在服务器端代码上实现。为了克服此限制，我使用了一个功能节点，该节点读取全局上下文并将URL放入msg.payload。该消息将转发到模板节点，该模板节点将创建iFrame。

模板节点观察传入的消息，并设置iframe的src属性。为了触发一切，我添加了一个注入节点

[
{
    "id": "f8f0597d.727d28",
    "type": "ui_template",
    "z": "3845329d.55847e",
    "group": "ad85611c.fa213",
    "name": "camera",
    "order": 1,
    "width": "6",
    "height": "6",
    "format": "\n<script language=\"javascript\" type=\"text/javascript\">\n           (function(scope){ \n                scope.$watch('msg', function(msg) {\n    \n    window.ifr = document.getElementById(\"camera\");\n    window.ifr.src=msg.payload;\n                });\n            })(scope);\n\n</script>\n<iframe id=\"camera\" seamless width=\"100%\" height=\"100%\"></iframe>",
    "storeOutMessages": false,
    "fwdInMessages": false,
    "templateScope": "local",
    "x": 95,
    "y": 973,
    "wires": [
        []
    ]
},
{
    "id": "70c649d2.ea3648",
    "type": "function",
    "z": "3845329d.55847e",
    "name": "get_camera_url",
    "func": "msg.payload = global.get(\"camera_url\");\nreturn msg;",
    "outputs": 1,
    "noerr": 0,
    "x": 108,
    "y": 926,
    "wires": [
        [
            "f8f0597d.727d28"
        ]
    ]
},
{
    "id": "d0e3c1a7.33c8f",
    "type": "inject",
    "z": "3845329d.55847e",
    "name": "trigger camera",
    "topic": "",
    "payload": "",
    "payloadType": "date",
    "repeat": "",
    "crontab": "",
    "once": true,
    "onceDelay": 0.1,
    "x": 89,
    "y": 873,
    "wires": [
        [
            "70c649d2.ea3648"
        ]
    ]
},
{
    "id": "ad85611c.fa213",
    "type": "ui_group",
    "z": "",
    "name": "Serial",
    "tab": "ab06111f.f336",
    "order": 1,
    "disp": true,
    "width": "15"
},
{
    "id": "ab06111f.f336",
    "type": "ui_tab",
    "z": "",
    "name": "Serial Monitor",
    "icon": "dashboard"
}

]

节点红色global.get（“ camera_url”）参考错误：未定义全局

1 个答案: