webrtc 및 peerjs : 스트림을 시작하지 않고 스트림을 재생하는 방법은 무엇입니까?

Question

내가 사용하고 peerjs

미디어 호출

var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; 
getUserMedia({video: true, audio: true}, function(stream) { 
    var call = peer.call('another-peers-id', stream); 
    call.on('stream', function(remoteStream) { 
    // Show stream in some video/canvas element. 
    }); 
}, function(err) { 
    console.log('Failed to get local stream' ,err); 
}); 

대답

var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; 
peer.on('call', function(call) { 
    getUserMedia({video: true, audio: true}, function(stream) { 
    call.answer(stream); // Answer the call with an A/V stream. 
    call.on('stream', function(remoteStream) { 
     // Show stream in some video/canvas element. 
    }); 
    }, function(err) { 
    console.log('Failed to get local stream' ,err); 
    }); 
}); 

문제가 다음 remoteStream를 얻기 위해, 나는 내 자신의 스트림을 보여줄 필요가

var call = peer.call('another-peers-id', stream); 

내 스트림을 표시하지 않고 다른 사람이 스트림을 재생하려면 어떻게해야합니까?

Answer 1

이것은 버그가 아니며 WebRTC API의 작동 방식을 혼동스럽게합니다. 우리는 먼저 getUserMedia이라는 함수 변수를 만들어서 브라우저가 제공하는 기본 webrtc 메서드에 매핑합니다 (예를 들어 브라우저가 Chrome 인 경우 navigator.getUserMedia 메서드는이 변수에 할당되고 나머지는 null 임). 마찬가지로 브라우저가 Firefox 인 경우 기본 메서드 navigator.mozGetUserMedia이이 변수에 할당되고 나머지는 null이됩니다.

적합한 고유 메소드가 변수 getUserMedia에 할당되면 적절한 메소드 인수를 사용하여이 메소드를 호출합니다. 이 첫 번째 인수는 만들려는 호출 유형입니다 (예 : 미디어 제약 조건). 오디오 전용, 오디오 + 비디오 등. 두 번째 인수는 성공한 경우의 콜백입니다 (예 : 브라우저가 로컬 마이크 및/또는 카메라에 성공적으로 액세스하고 연결할 수있는 경우). 이 콜백 함수의 예는 옵션과 예제 코드에서 누락 된 getUserMedia 방법에 대한 세 번째 인수가 있습니다

function(stream) { 
    var video = document.querySelector('video'); 
    video.srcObject = stream; 
    video.onloadedmetadata = function(e) { 
    // Do something with the video here. 
    }; 
} 

, 것,이 인수는 킥의 것입니다 경우에서 getUserMedia 다른 방법에 대한 콜백입니다 메서드가 실패합니다. 실패의 원인은 여러 가지가있을 수 있습니다. 사용자가 브라우저가 로컬 마이크 또는 카메라에 액세스하는 것을 허용하지 않았습니다.이 콜백 메소드를 사용하여 호출 실패 문제를 사용자에게 알릴 수 있습니다. 여기

전체 예제 코드입니다 (참조. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia)

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

if (getUserMedia) { 
    getUserMedia({ audio: true, video: { width: 1280, height: 720 } }, 
    function(stream) { 
    var video = document.querySelector('video'); 
    video.srcObject = stream; 
    video.onloadedmetadata = function(e) { 
     video.play(); 
    }; 
    }, 
    function(err) { 
    console.log("The following error occurred: " + err.name); 
    } 
); 
} else { 
    console.log("getUserMedia not supported"); 
} 

당신이 변수 미디어의 제약에서 false로 간단히, 자신 만의 오디오 및/또는 비디오를 보낼를 설정하지 않으려면

.

희망이 도움이됩니다.