Browser shows black screen for Remote Streams in browser about projectrtc HOT 5 OPEN

Any solutions?

from projectrtc.

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.

from projectrtc.

@KristjanLiiva thanks but i solved that.. :)

from projectrtc.

@ArfanMirza please could you tell us the solution?

from projectrtc.

@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 ..

from projectrtc.