When I run the html with the VScode live server, everything runs normally and the script inserted with get the media normally, but when I start serving this html through an express server, the navigator.mediaDevices.getUserMedia( ) doesn't work as it returns null//undefined, how to solve?
This is html code, runs normally with live reload and show the webcam:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>View Webcam</title>
</head>
<body>
<style type="text/css">
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #777;
}
</style>
<div id="container">
<video autoplay="true" id="videoElement"></video>
</div>
<script type="text/javascript">
var video = document.querySelector("#videoElement");
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia ||
navigator.oGetUserMedia;
console.log(navigator.mediaDevices.getUserMedia)
if (navigator.getUserMedia) {
navigator.getUserMedia({ video: true }, handleVideo, videoError);
}
function handleVideo(stream) {
video.srcObject = stream;
video.play();
}
function videoError(e) {}
</script>
</body>
</html>But, when i send this html with express, this happen(express code):
const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 3000;
app.set('view engine', 'ejs')
app.use(express.static("public"));
app.get('/', (req, res) => {
res.sendFile(path.resolve() + "/public/index.html")
})
app.listen(port, () => {
console.log(`Running at port ${port}`)
})Any help?
