0

我在尝试在 HTML/.ejs 页面中显示本地摄像头时遇到问题。我的代码似乎可以正常工作，但是视频未显示在页面上的“视频标签”元素中。奇怪的是浏览器（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.

});

如前所述，浏览器似乎可以访问相机/麦克风，我没有收到任何错误消息。感谢您的任何见解。问候。

4

0 回答 0