【发布时间】: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