navigator.mediaDevices.getUserMedia(constraints) camera is not opening

Viewed 21

This code should open a camera, in the tutorial everything is fine, but in my firefox the camera doesn't appear, nor does a token appear asking for authorization to use the camera. How do I get my firefox to accept camera access please? I already tried in chrome and it didn't work either.

main.js

let localStream;
let remoteStream;
let peerConnection;

let init = async() => {
    localStream = await navigator.mediaDevices.getUserMedia(constraints)
    document.getElementById('user-1').srcObject = localStream
}

init()

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>WebRTC</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>

</head>

<body>


    <div id="videos">
        <video class="video-player" id="user-1" autoplay playsinline></video>
        <video class="video-player" id="user-2" autoplay playsinline></video>
    </div>



</body>
<script src='main.js'></script>

</html>

main.css

#videos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
}

.video-player {
    background-color: red;
    width: 100%;
    height: 300px;
}
0 Answers
Related