0
학생 프로젝트를위한 약간의 webRTC 예제로 작업합니다. 하나의 클라이언트 (학생)가 자신의 비디오 및 오디오 스트림을 peerConnection을 통해 두 번째 클라이언트 (튜터)에게 보내는 것이 의도입니다. 의사 소통이 이루어지고 교사는 SDP_OFFER와 그 모든 것을 얻습니다. 또한 remoteVideo src에 대한 blob을 가져옵니다. 그러나 비디오 출력은 검은 색입니다. 교사 측면에서 나는 추적 오류를 얻을 :peerConnection-Connection에서 비디오를 재생할 수 없습니다.
Uncaught Error: SYNTAX_ERR: DOM Exception 12
doAnswer processSignalingMessage
ws.onmessage
누군가가 아이디어를 가지고 있기를 바랍니다. 감사합니다.
내 코드입니다 :
<!DOCTYPE html>
<html>
<head>
<title>PeerConnection with an websocket</title>
</head>
<script>
//variables
var pc;
var ws;
var name;
// Local stream generation
function gotStream(s) {
var url = webkitURL.createObjectURL(s);
document.getElementById("localView").src = url;
localStream = s;
console.log("gotStream" + s)
console.log("Started showing loval stream. url = " + url);
}
function gotStreamFailed(error) {
console.log("Failed to get access to local media. Error code was "
+ error.code + ".");
}
function getUserMedia() {
try {
navigator.webkitGetUserMedia({audio:true, video:true},
gotStream, gotStreamFailed);
console.log("Requested access to local media");
} catch (e) {
console.log(e, "getUserMedia error");
}
}
//peerConnection generation
function genreatePeerConnection(){
try{
pc = new webkitPeerConnection00("STUN stun.l.google.com:19302", onIceCandidate);
console.log("new peerConnection!");
pc.onaddstream = onAddStream;
pc.onremovestream = onRemoveStream;
}catch (e){
console.log(e, "generatePeerConnection error");
}
}
function onAddStream(e) {
var stream = e.stream;
var url = webkitURL.createObjectURL(stream);
try{
document.getElementById("remoteView").src = url;
console.log("Started showing remote stream. url = " + url);
}catch (e){
console.log(e, "no Video error...");
}
}
function onRemoveStream(e) {
document.getElementById("remoteView").src = "";
trace("Stopped showing remote stream");
}
function onIceCandidate(candidate, moreToFollow) {
console.log("candidate: " + candidate);
if (candidate) {
sendMessage({type: 'candidate',
label: candidate.label, candidate: candidate.toSdp()});
}
}
function startCall() {
console.log("adding stream" + localStream);
pc.addStream(localStream);
doCall();
}
function doCall() {
console.log("Send offer to peer");
var offer = pc.createOffer({audio:true, video:true});
pc.setLocalDescription(pc.SDP_OFFER, offer);
sendMessage({type: 'offer', sdp: offer.toSdp()});
pc.startIce();
}
function doAnswer() {
console.log("Send answer to peer");
var offer = pc.remoteDescription;
var answer = pc.createAnswer(offer.toSdp(),{audio:true, video:true});
pc.setLocalDescription(pc.SDP_ANSWER, answer);
sendMessage({type: 'answer', sdp: answer.toSdp()});
pc.startIce();
}
function processSignalingMessage(message) {
var msg = JSON.parse(message.data);
if (msg.type === 'offer') {
console.log("Test 1 - offer" + msg.sdp);
pc.setRemoteDescription(pc.SDP_OFFER, new SessionDescription(msg.sdp));
doAnswer();
} else if (msg.type === 'answer') {
pc.setRemoteDescription(pc.SDP_ANSWER, new SessionDescription(msg.sdp));
} else if (msg.type === 'candidate') {
console.log("Candidate...");
var candidate = new IceCandidate(msg.label, msg.candidate);
pc.processIceMessage(candidate);
} else if (msg.type === 'bye') {
onRemoteHangup();
}
}
//Websocket connection
function openWs(){
genreatePeerConnection();
ws = new WebSocket("ws://10.68.0.88:10081");
ws.onopen = function() {
console.log("Openned websocket connection");
}
ws.onmessage = function (evt){
console.log("you got mail: " + evt);
processSignalingMessage(evt);
}
}
//sendMessage to WS
function sendMessage(msg){
var stringMsg = JSON.stringify(msg);
ws.send(stringMsg);
}
function sendName(){
name = document.getElementById("name").value;
ws.send("name: " + name);
}
</script>
<body>
name<input id="name"/><button id="sendName" onclick="sendName();">send </button>
<video id="localView" width="352" height="288" autoplay></video>
<video id="remoteView" width="352" height="288" autoplay></video>
<button id="call" onclick="startCall();">Call</button>
<button id="connect" onclick="openWs();">Connection</button>
<button id="getMedia" onclick="getUserMedia();">Cam</button>
</body>
</html>