Browser shows black screen for Remote Streams in browser

[ArfanMirza]

Any solutions?

[KristjanLiiva]

Well, one reason could be that the network does not allow it. For example I have no problem using it at home, but the University network blocks peer to peer. So console.log shows usual negotiation messages, but the video never comes through, aka a black screen for the remote stream.

[ArfanMirza]

@KristjanLiiva thanks but i solved that.. :)

[totiherms]

@ArfanMirza please could you tell us the solution?

[ArfanMirza]

@totiherms Actually, when connection receive then web-browser start as new connection, close cam and open again, or if cam is close then ask permission from user. On user request web-cam stream started. due to user selection delay.. it cause black view error. .

I do two way stream handshake.

Mobile start stream , then browser show black video or will not show, just detect that if connection coming Mobile device , then web-side create new stream with 2-5 sec delay.

Mobile connect with web-user, web-user can see Mobile-user video, After 2 sec delay, web-user call to Mobile user again. same did in at mobile side.

--------------------------------------------Here is my code--------------------------------------- function addPeer(remoteId) { console.log("addPeer" ,remoteId); var peer = new Peer(config.peerConnectionConfig, config.peerConnectionConstraints); peer.pc.onicecandidate = function(event) { if (event.candidate) { send('candidate', remoteId, { label: event.candidate.sdpMLineIndex, id: event.candidate.sdpMid, candidate: event.candidate.candidate }); } }; peer.pc.onaddstream = function(event) { console.log("onaddstream" ,event); attachMediaStream(peer.remoteVideoEl, event.stream); remoteVideosContainer.appendChild(peer.remoteVideoEl); }; peer.pc.onremovestream = function(event) { console.log("onremovestream" ,event); peer.remoteVideoEl.src = ''; remoteVideosContainer.removeChild(peer.remoteVideoEl); }; peer.pc.oniceconnectionstatechange = function(event) { console.log("oniceconnectionstatechange" ,event); switch( ( event.srcElement // Chrome || event.target ) // Firefox .iceConnectionState) { case 'disconnected': remoteVideosContainer.removeChild(peer.remoteVideoEl); break; } }; window.peerDatabase[remoteId] = peer;

return peer;

}

function offer(remoteId) { console.log("offer-- " ,remoteId); var pc = window.peerDatabase[remoteId].pc; pc.createOffer( function(sessionDescription) { pc.setLocalDescription(sessionDescription); send('offer', remoteId, sessionDescription); }, error ); } function handleMessage(message) { var type = message.type, from = message.from, //roomname = message.roomname, pc = (window.peerDatabase[from] || addPeer(from)).pc;

console.log('received ' + type + ' from ' + from );

switch (type) {
  case 'init':
      console.log('init');
    toggleLocalStream(pc);
    offer(from);
    break;
  case 'offer':
      console.log('offerA');
    pc.setRemoteDescription(new RTCSessionDescription(message.payload), function(){
        console.log("answer" ,from);

        pc.createAnswer(function(sessionDescription) {
            pc.setLocalDescription(sessionDescription);
            send('answer', from, sessionDescription);
            console.log('send answer',from);
          }, 
          error
        );

    }, error);

    break;
  case 'answer':
      console.log('answer');
    pc.setRemoteDescription(new RTCSessionDescription(message.payload), function(){}, error);
    break;
  case 'candidate':
    if(pc.remoteDescription) {
      pc.addIceCandidate(new RTCIceCandidate({
        sdpMLineIndex: message.payload.label,
        sdpMid: message.payload.id,
        candidate: message.payload.candidate
      }), function(){}, error);
    }
    break;
}

} function send(type, to, payload) { console.log('sending ' + type + ' to ' + to);

socket.emit('message', {
  to: to,
  type: type,
  payload: payload,
  platform: 'web'
});

}

WebRtc Library.. compile 'io.pristine:libjingle:9944@aar'

private Emitter.Listener onMessage = new Emitter.Listener() { @Override public void call(Object... args) { JSONObject data = (JSONObject) args[0]; try { Log.d(TAG, "received: " + data.toString()); } catch (Exception e) { e.printStackTrace(); } try { String from = data.getString("from"); String type = data.getString("type"); String peerName = data.getString("userName"); JSONObject payload = null; if (type.equals("init")) { if (data.get("isCamera") != null) { try { if (data.getBoolean("isCamera")) { setCamera(); } else { setAudio(); } //JSONObject offerPayload = data.getJSONObject("payload"); // if (offerPayload == null) { // setCamera(); // } else { // if (offerPayload.getBoolean("isCamera")) { // setCamera(); // } else { // setAudio(); // } // } } catch (Exception e) { e.printStackTrace(); setCamera(); } } else { setCamera(); } mListener.onInit(data.getString("platform"), data.getBoolean("isCamera")); } else { payload = data.getJSONObject("payload"); } // if peer is unknown, try to add him if (!peers.containsKey(from)) { // if MAX_PEER is reach, ignore the call int endPoint = findEndPoint(); if (endPoint != MAX_PEER) { Peer peer = addPeer(from, endPoint,peerName); try { peer.pc.addStream(localMS); } catch (Throwable e) { e.printStackTrace(); } commandMap.get(type).execute(from, payload); } } else { commandMap.get(type).execute(from, payload); } } catch (JSONException e) { e.printStackTrace(); } }

};

Same did in IOS, if you need that too,, will provide ..