onaddstream関数を使用してリモートストリームを取得できません

Question

助けてください 私はチャットテキストをdatachannel apiを使用して最初に作成しました。それは正常に動作します しかし、問題は、コールビデオを追加しようとすると、私はそれが実行されていないと思うので、私は関数ondatastreamによってリモートストリームを得ることができます これは私のコードです私は何か間違っていますか？私

$("#sendform").submit(sendDirect); 
$(".user2").click(connectTo); 
$("#send").click(sendDirect); 
$('#zoneChat').hide(); 
var ws = null; 
var user = ""; 
var user2 = ""; 
var localVideo=document.getElementById('localvideo'); 
var remoteVideo=document.getElementById('remotevideo'); 
var config = { "iceServers":[{ "urls":"stun:stun.l.google.com:19302" }] }; 
var connection = { }; 
var peerConnection; 
var dataChannel; 
$(document).ready(function(){ 

    $(".user2").click(function(){ 
    $('#chat_messages').empty(); 
    user2 = $(this).attr('id'); 
    $('#pannelTitle').empty(); 
    $('#pannelTitle').append('<span class="pull-right" ><a href="#" id="videoControl">video call</a></span>') 
    $('#pannelTitle').append('<p>'+user2+'</p>'); 
    $('#zoneChat').show(); 
    }); 
//establish the connection to the ws 
ws = new WebSocket("ws://127.0.0.1:8088"); 

    ws.onopen = function(e){ 
     console.log("Websocket opened"); 
    } 
    ws.onclose = function(e){ 
     console.log("Websocket closed"); 
    } 
    ws.onmessage = function(e){ 
     console.log("Websocket message received: " + e.data); 

     var json = JSON.parse(e.data); 

     if(json.action == "candidate"){ 
      if(json.to == user){ 
       processIce(json.data); 
      } 
     } else if(json.action == "offer"){ 
      // incoming offer 
      if(json.to == user){ 
       user2 = json.from; 
       processOffer(json.data) 
      } 
     } else if(json.action == "answer"){ 
      // incoming answer 
      if(json.to == user){ 
       processAnswer(json.data); 
      } 
     } 
     // else if(json.action == "id"){ 
     // userId = json.data; 
     // } else if(json.action=="newUser"){ 
     //  if(userId!=null && json.data!=userId){ 

     //  } 
     // } 

    } 
    ws.onerror = function(e){ 
     console.log("Websocket error"); 
    } 

    user = $(".user").attr('id'); 
    console.log('my name '+user+' is added'); 

}); 

$(document).on('click','#videoControl',function(){ 

navigator.mediaDevices.getUserMedia({ 
    audio: false, 
    video: true 
}).then(
     function(stream){ 
      console.log('Received local stream'); 
      localVideo.srcObject = stream; 
      // Add localStream to global scope so it's accessible from the browser console 
      window.localStream = localStream = stream; 
      peerConnection.addStream(localStream); 
      console.log('the stream is added'); 
     } 
    ).catch(function(e) { 
     console.log('getUserMedia() error: ' + e.name); 
    }); 

}); 

function setMyId(e){ 
    e.preventDefault(); 
    user = $(".user").attr('id'); 
    console.log('my name '+user+' is added'); 
    return false; 
} 


function connectTo(e){ 
    e.preventDefault(); 
    console.log('the datachannel is oppened with'+user2); 
    openDataChannel(); 

    var sdpConstraints = { offerToReceiveAudio: true, offerToReceiveVideo: false } 
    peerConnection.createOffer(sdpConstraints).then(function (sdp) { 
     peerConnection.setLocalDescription(sdp); 
     sendNegotiation("offer", sdp); 
     console.log("------ SEND OFFER ------"); 
    }, function (err) { 
     console.log(err) 
    }); 

} 

function sendDirect(e){ 
    e.preventDefault(); 
    dataChannel.send($("#message").val()); 
    $('#chat_messages').append('<div class="message"><span style="font-weight: bolder;">Me: </span>'+$("#message").val()+'</div>'); 
    console.log("Sending over datachannel: " + $("#message").val()); 
    $("#message").val(''); 
} 

function getURLParameter(name) { 
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null 
} 


function openDataChannel(){ 
    peerConnection = new RTCPeerConnection(config, connection); 
    peerConnection.onicecandidate = function(e){ 
     if (!peerConnection || !e || !e.candidate) return; 
     var candidate = e.candidate; 
     sendNegotiation("candidate", candidate); 
    } 

    //when a remote user adds stream to the peer connection, we display it 
    peerConnection.onaddstream= function(e) { 
     remoteVideo.srcObject = e.stream; 
     console.log('pc2 received remote stream'); 
    }; 


    dataChannel = peerConnection.createDataChannel("datachannel", { reliable: false }); 

    dataChannel.onopen = function(){ console.log("------ DATACHANNEL OPENED ------");}; 
    dataChannel.onclose = function(){ 
     $('#chat_messages').append('<div class="message from"><p style="color:#ccc;">'+user2+' left the chat</p></div>'); 
     console.log("------ DC closed! ------") 
    }; 
    dataChannel.onerror = function(){ 
     console.log("DC ERROR!!!") 
    };     


    peerConnection.ondatachannel = function (ev) { 
     console.log('peerConnection.ondatachannel event fired.'); 
     ev.channel.onopen = function() { 
      console.log('Data channel is open and ready to be used.'); 
     }; 
     ev.channel.onmessage = function(e){ 
      $('#zoneChat').show(); 
      $('#pannelTitle').empty(); 
      $('#pannelTitle').append('<p>'+user2+'</p>'); 
      console.log("DC from ["+user2+"]:" +e.data); 
      $('#chat_messages').append('<div class="message from"><span style="font-weight: bolder;">'+user2+': </span>'+e.data+'</div>'); 
     } 
    }; 

    return peerConnection 
} 

function sendNegotiation(type, sdp){ 
    var json = { from: user, to: user2, action: type, data: sdp}; 
    ws.send(JSON.stringify(json)); 
    console.log("Sending ["+user+"] to ["+user2+"]: " + JSON.stringify(sdp)); 
} 

function processOffer(offer){ 
    var peerConnection = openDataChannel(); 
    peerConnection.setRemoteDescription(new RTCSessionDescription(offer)).catch(e => { 
     console.log(e); 
    }); 

    var sdpConstraints = { 
     'mandatory': { 
     'OfferToReceiveAudio': false, 
     'OfferToReceiveVideo': false 
    } 
    }; 

    peerConnection.createAnswer(sdpConstraints).then(function (sdp) { 
     return peerConnection.setLocalDescription(sdp).then(function() { 
      sendNegotiation("answer", sdp); 
      console.log("------ SEND ANSWER ------"); 
     }) 
    }, function(err) { 
     console.log(err) 
    }); 
    console.log("------ PROCESSED OFFER ------"); 

}; 

function processAnswer(answer){ 

    peerConnection.setRemoteDescription(new RTCSessionDescription(answer)); 
    console.log("------ PROCESSED ANSWER ------"); 
    return true; 
}; 

function processIce(iceCandidate){ 
    peerConnection.addIceCandidate(new RTCIceCandidate(iceCandidate)).catch(e => { 
     debugger 
     console.log(e) 
    }) 
} 

Answer 1

を支援するための おかげであなたがshoud peerConnection.createOffer（）とpeerConnection.addStream後のオファーを送って（）。 （peachConnection.onnegotiationneededイベントは使いやすい方が良い）