mediastream не отображается в браузере, хотя браузер, кажется, обращается к камере - PullRequest
Новая
       57

mediastream не отображается в браузере, хотя браузер, кажется, обращается к камере

0 голосов
/ 30 октября 2019

У меня проблема с отображением локальной камеры на странице HTML / .ejs. Мой код кажется работоспособным, однако видео не отображается в элементе video tag на странице. Странно то, что браузер (Chrome) показывает мне, что к камере и микрофону обращаются (с маленьким значком камеры и точкой на вкладке браузера). Что я здесь не так делаю? Любая помощь с благодарностью. Заранее благодарю.

Вот HTML / EJS: 

<!-- views/pages/about.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
<% include ../partials/head %>

<title>Realtime communication with WebRTC</title>

 <style type="text/css">
   #localVideo {
       height:225px;
       width:300px;
       float:left;
       border:1px solid gray;
       margin-left:10px;
   }
   #remoteVideo {
       height:225px;
       width:300px;
       border:1px solid gray;
       margin-left:10px;
   }
   div.local {
   border:5px red;
   }
</style>

</head>

<body class="container">

<header>
<% include ../partials/header %>
</header>

<main>

<div class="row">

<div class="col-sm-6">        
    <div class="remote">
     <h1>Realtime communication with WebRTC</h1>

     <video id="remoteVideo" autoplay></video>

    </div>
</div>

<div class="col-sm-7">    
    <div class="local">

       <video id="localVideo" autoplay muted></video>

      <input type = "text" id = "otherUsernameInput" />
      <button id = "connectToOtherUsernameBtn">Establish connection</button> 

      <div>
       <button id="startButton">Start</button>
       <button id="callButton">Call</button>
       <button id="hangupButton">Hang Up</button>
      </div>

    </div>
</div>

</div>

<p id="demo"> This is some text in a paragraph. </p>

</main>

<footer>
<% include ../partials/footer %>
</footer>

    <script src="/socket.io/socket.io.js"></script>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script src="/public/js/my_main.js"></script>

    <script>

        document.getElementById("callButton").disabled = true;

        var socket = io.connect('http://localhost:8080');

         // A dialog box is displayed when the server sends us a "message"
        socket.on('message', function(message) {
            alert('The server has a message for you: ' + message);
        })

        connectToOtherUsernameBtn.addEventListener("click", function(){ 

        var username = document.getElementById("otherUsernameInput").value; 

        //it's sent with the signal "lucky_hit" (to differentiate it from "message")
        socket.emit('lucky_hit', username);

        socket.emit('message', 'Hi server, how are you?');

        });

       startButton.addEventListener("click", function(){ 

       socket.emit('start_me_up', 'Requesting Local Video...');

       });

    </script>

</body>
</html>

Вот скрипт "my_main.js", который просто получает доступ и (должен) воспроизводить видео с локальной камеры:

startButton.addEventListener("click", function(){ 
console.log("Start Pressed"); 
document.getElementById("startButton").innerHTML = "Play Video";


// Prefer camera resolution nearest to 1280x720.
var constraints = { audio: true, video: { width: 1280, height: 720 } };     

if (navigator.mediaDevices.getUserMedia === undefined) {

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

 if (!navigator.getuserMedia) {
 console.log('You are using a browser that does not support the Media Capture API');
 return;  //end script execution with an empty return... 
 }  //navigator.getuserMedia NOT returned...

}  //handle older browsers that may not fully support mediaDevices...


navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
 var video = document.querySelector('localVideo');

 video.srcObject = mediaStream;
 //  video.onloadedmetadata = function(e) {
 video.play();
 //   console.log('Video META data loaded...')
 //  };
})
.catch(function(err) { console.log(err.name + ": " + err.message); });  //always check for errors at the end.

});

Как упоминалось ранее, браузер получает доступ к камере / микрофону, и я не получаю никаких сообщений об ошибках. Спасибо за понимание. С уважением.

...