2014-04-16 2 views
1

어떻게 Chrome 및 Mozilla와 같은 브라우저에서 WebRTC 비디오 (및 오디오)를 볼 수 있습니까? 내가 사용하고WebRTC 비디오를 볼 수 없습니다.

코드는 다음과

HTML입니다 :

<!DOCTYPE html> 
    <html> 
     <head> 
      <meta charset="utf-8" /> 
      <title> WebRTC</title> 

     </head> 
     <body> 
     <video id="peer2-to-peer1" autoplay controls style="width:40%;"></video> 

      <script src="script.js"></script> 
     </body> 
    </html> 

자바 스크립트 파일 :

navigator.getUserMedia || 
     (navigator.getUserMedia = navigator.mozGetUserMedia || 
     navigator.webkitGetUserMedia || navigator.msGetUserMedia); 

    if (navigator.getUserMedia) { 

     navigator.getUserMedia({ 

      audio: true 
     }, function(localMediaStream) {alert('in'); 
     var video = document.querySelector('video'); 
     video.src = window.URL.createObjectURL(localMediaStream); 
     video.onloadedmetadata = function(e) { 
     // Do something with the video here. 
     }; 
    }, onError); 
    } else { 
     alert('getUserMedia is not supported in this browser.'); 
    } 

    function onSuccess() { 
     alert('Successful!'); 
    } 

    function onError() { 
     alert('There has been a problem retrieving the streams - did you allow access?'); 
    } 

하지만,

는 onSuccess 기능 '이기 때문에 내가 오류를 얻고있다 Nt가 호출되었습니다.

LINK :이 전화

http://www.creativebloq.com/javascript/get-started-webrtc-1132857

답변

0

대신 onSuccess()의 :

function(localMediaStream) {alert('in'); 
    var video = document.querySelector('video'); 
    video.src = window.URL.createObjectURL(localMediaStream); 
    video.onloadedmetadata = function(e) { 
    // Do something with the video here. 
    }; 

}

onSuccess() 단순히

호출되지 않습니다.

또한 웹 서버 (예 : 로컬 호스트에서 실행되는 서버)에서 파일을로드해야합니다. 이 자습서에서는 로컬 하드 드라이브의 html 파일에 액세스 할 수 없습니다.

+0

아직도 크롬 것이 점점하지 M (버전 36), 오차 함수에 크롬 (34)로했다. – deepjyoti22

+0

(브라우저의 콘솔에있는 경우) 오류를 게시 할 수 있습니까? 서버에서 파일을 가져 옵니까? 브라우저로 파일을 열면 작동하지 않습니다. –

+0

우리는 로컬 컴퓨터에 파일을 저장하고 있습니다 ... 그리고 나는 링크를 따라 가고 있습니다 : http://www.creativebloq.com/javascript/get-started-webrtc-1132857 – deepjyoti22

1

첫 번째 문제는 사용자가 getUserMedia에 비디오를 요구하지 않는다는 것입니다. 귀하의 매개 변수는 귀하의 통화에 오디오 만 필요합니다 (video: true). 예, onSuccess은 결코 호출되지 않지만 함수 호출 자체 내에 콜백이 있어도 상관 없습니다. onSucess를 호출하려면 당신의 구문은 다음과 같은 : 둘째

getUserMedia({"audio": true, "video": true}, onSuccess, onFailure);

onSuccess는 미디어 스트림이 될 것 매개 변수를 가지고있다. 미디어 스트림에 아무 것도하지 않으려면 스트림 src를 onSuccess 함수의 비디오 src 객체에 첨부해야합니다.

0

DEMO

HTML :

<html> 
<head> 
    <title>Record and Play Simple Messages</title> 
    <link rel="stylesheet" type="text/css" href="./css/style.css"> 
</head> 
<body> 
    <p>Demo for GetUserMedia()</p> 
    <video id="localStream"></video> 
    <script type="text/javascript" type="javascript" src="./js/script.js" ></script> 
</body> 
</html> 

JS :

var video = document.querySelector('video'); 

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

window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; 

function errorCallback(error) { 
    console.log('An error occurred: ' + error.code); 
} 

if (navigator.getUserMedia) { 
    navigator.getUserMedia({video: true, audio: true}, function(stream){ 
     if (video.mozSrcObject !== undefined) { 
      video.mozSrcObject = stream; 
     } else { 
      video.src = (window.URL && window.URL.createObjectURL(stream)) || stream; 
     } 
     video.play(); 
    }, errorCallback); 
} else { 
    console.log('getUserMedia() not supported in this browser.'); 
} 
관련 문제