Streaming 如何使用WebRTC捕获流式视频_Streaming_Webrtc_Video Capture

Streaming 如何使用WebRTC捕获流式视频

streaming webrtc

Streaming 如何使用WebRTC捕获流式视频,streaming,webrtc,video-capture,Streaming,Webrtc,Video Capture,以下代码类似于在Mozilla开发者网络中编写的代码：由于某些原因，在server.ejs下运行时，网络摄像头未打开。只显示一个按钮a。我怀疑代码中存在一些社论，如果我们能找到问题所在就好了？多谢各位 <!doctype html> <html lang="en"> <head> <title> Introduction to WebRTC </title> <link rel = "stylesheet" typ

以下代码类似于在Mozilla开发者网络中编写的代码：

由于某些原因，在server.ejs下运行时，网络摄像头未打开。只显示一个按钮a。我怀疑代码中存在一些社论，如果我们能找到问题所在就好了？多谢各位

 <!doctype html>
 <html lang="en">
  <head> 
 <title> Introduction to WebRTC </title>
 <link rel = "stylesheet" type="text/css" href="styles.css">
 </head>
 <body> 

 <p> <button id = "takeProfilePicture" type="button" autofocus="true">Create Profile Picture</button></p>
 <video autoplay></video>
 <video id="videoTag" autoplay></video>
 <canvas id = "profilePicCanvas" style="display: none;"></canvas>
 <div>
 <img id = "profilePictureOutput">
 </div>

<script> 
 navigator.getUserMedia = navigator.getUserMedia  ||         navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

 var constraints = {
  audio: false, 
  video: {
           mandatory: {

             minWidth  : 240,
             maxWidth  : 240,
             minHeight : 240,
             maxHeight : 240
             }
             }
           };

 var videoArea = document.querySelector("video");
 var profilePicCanvas = document.querySelector("#profilePicCanvas");
 var profilePictureOutput =   document.querySelector("#profilePictureOutput");
var takePicButton = document.querySelector("#takeProfilePicture");
var videoTag = document.querySelector("#videoTag");

var width  = 240 ;
var height = 0   ;
var streaming = false ;

takePicButton.addEventListener('click', function(ev){
takeProfilePic();
ev.PreventDefault();
}, false;) 

videoTag.addEventListener('canplay', function(ev){
if (!streaming) {
height = videoTag.videoHeight / (videoTag.videoWidth/width);

if (isNaN(height)) {

height = width / (4/3) ;

}
videoTag.setAttribute('width',width);
videoTag.setAttribute('height',height);
profilePicCanvas.setAttribute('width',width);
profilePicCanvas.setAttribute('height',height);
streaming = true ;


}
},false);

function takeProfilePic() {
var context = profilePicCanvas.getContext('2d');
if (width && height) {
 profilePicCanvas.width  = width ;
 profilePicCanvas.height = height ;

 context.drawImage(videoTag, 0 , 0 , width, height);

 var data = profilePicCanvas.toDataURL('image/png');
 profilePictureOutput.setAttribute('src',data);
 }
 }

navigator.getUserMedia(constraints, onSuccess, onError);

function onSuccess(stream) {
console.log("Sucess! We have a stream!");
videoArea.src = window.URL.createObjectURL(stream);
videoArea.className = "grayscale_filter";
videoArea.play() ;

}

function onError(error) {

console.log("Error with getUserMedia: ", error);
}

</script> 
</body>
</html>


WebRTC简介
创建个人资料图片

您的代码中有两个错误

}，false；）必须更改为}，false）和ev.PreventDefault（）必须更改为ev.preventDefault（）…您好，谢谢您的评论。我在发送信息后修改了这些打字错误。问题依旧。我注意到“height=0”和takeProfilePic（）方法似乎没有被调用。我还没弄明白这个问题？！除了我在评论中提到的问题外，我不确定为什么您有两个视频标签，这是导致问题的原因。。。一旦我合并了它们，事情就好了，谢谢，问题解决了。我错了！