【问题标题】:Cannot turn on start camera app runs on remote server无法打开启动相机应用程序在远程服务器上运行
【发布时间】:2022-01-12 19:30:34
【问题描述】:

问题

我有一个简单的应用程序,其中包含一个 HTML 页面,其中包含由 nodejs 提供的嵌入式 Js。我用它来测试浏览器(相机)上的媒体功能。

当我在本地运行应用程序并在 localhost:8000 上浏览页面时,我可以看到摄像头正在启动并且视频流已添加到页面中。

当我托管托管 AWS (Windows 2019) 的同一个应用程序时,我可以浏览页面并查看标记,但出现以下错误,因此页面上没有添加视频流。

我得到的错误是Uncaught TypeError: Cannot read properties of undefined (reading 'getUserMedia') 指向navigator.mediaDevices.getUserMedia(constraints)。我最近部署了一个在服务器上构建的聊天应用程序,但无法启动视频。我创建了这个简单的应用程序来测试和使用来自mozzilla 的 js 示例。

以下是我的应用程序的文件,没有包含 package.josn,因为它有 0 个依赖项。

应用程序

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Media Test</title>
</head>

<body>

    <h1>Media Test</h1>
    <p>Testing video and mic of browser.</p>
    <p id="errorMsg"></p>
    <video></video>
    <script>
        'use strict';

        // Put variables in global scope to make them available to the browser console.
        var video = document.querySelector('video');
        var constraints = window.constraints = {
            audio: false,
            video: true
        };
        var errorElement = document.querySelector('#errorMsg');

        navigator.mediaDevices.getUserMedia(constraints)
            .then(function (stream) {
                var videoTracks = stream.getVideoTracks();
                console.log('Got stream with constraints:', constraints);
                console.log('Using video device: ' + videoTracks[0].label);
                stream.onremovetrack = function () {
                    console.log('Stream ended');
                };
                window.stream = stream; // make variable available to browser console
                video.srcObject = stream;
                video.addEventListener('loadedmetadata', () => { video.play() })
            })
            .catch(function (error) {
                if (error.name === 'ConstraintNotSatisfiedError') {
                    errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
                        constraints.video.height.exact + ' px is not supported by your device.');
                } else if (error.name === 'PermissionDeniedError') {
                    errorMsg('Permissions have not been granted to use your camera and ' +
                        'microphone, you need to allow the page access to your devices in ' +
                        'order for the demo to work.');
                }
                errorMsg('getUserMedia error: ' + error.name, error);
            });

        function errorMsg(msg, error) {
            errorElement.innerHTML += '<p>' + msg + '</p>';
            if (typeof error !== 'undefined') {
                console.error(error);
            }
        }
    </script>
</body>

</html>

节点 Js

const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);

const PORT = 9000;

app.use(express.static("public"))

app.get("/", (req, res) => {
   res.sendFile(__dirname + "/media-test.html")
})

server.listen(PORT, () => {
   console.log("listening on *:", PORT)
})

我最初考虑的是安全组和防火墙规则(是一台 Windows 机器),但我已经为 TCP 和 UDP 添加了入站和出站安全规则和组。此外,我可以访问应用程序并提供页面。

【问题讨论】:

    标签: javascript html node.js hosting getusermedia


    【解决方案1】:

    我发现通过 HTTP 进行远程连接的媒体设备被禁用,需要 HTTPS。

    navigator.mediaDevices is undefined

    How to access Camera and Microphone in Chrome without HTTPS?

    为了测试从我的机​​器访问它的远程部署代码,我暂时在 chrome 上添加了一个例外,允许媒体设备通过特定 IP 地址和端口的不安全连接。这解决了我关于测试应用程序的问题。一个长期的解决方案是在我的应用上安装证书并通过 HTTPS 安全地访问它。

    【讨论】:

    • 您可以,至少出于演示和测试的目的,将您的应用程序托管在 heroku 或故障上。您将使用他们的证书,部署非常简单。
    • 好主意!我在 Heroku 上运行了三个应用程序,但从未想过在那里进行测试。感谢您的建议。
    猜你喜欢
    • 2018-04-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-10-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多