I'm using a modified version of this webrtc example.
UPDATE: This appears to actually be a bug in the code sample I'm using. If I set that up exactly, I still only get local video on the caller side. Any help to fix that would be much appreciated.
The only difference is the offer to the remote client is sent out a bit later. ie: "Let the person know I'm ready to meet, then send it"
The remote peer (the callee?) can see both streams perfect.
The local caller can only see themselves and ontrack is never called.
Both local and remote peer show stable connections and like I said, the remote peer works perfect.
Should sending ice candidates happen in both directions? because I feel like is. I'm new to webrtc, so that surprised me.
"$ ('#ReadyModalButton').click " is what sends the call offer.
var myPeerConnection = null; // RTCPeerConnection
var transceiver = null; // RTCRtpTransceiver
var webcamStream = null; // MediaStream from webcam
var remoteUser = null;
var mediaConstraints = {
audio: true, // We want an audio track
video: true ,
};
function log (text) {
var time = new Date ();
console.log ('[' + time.toLocaleTimeString () + '] ' + text);
}
function log_error (text) {
var time = new Date ();
console.trace ('[' + time.toLocaleTimeString () + '] ' + text);
}
async function createPeerConnection () {
log ('Setting up a connection...');
// Create an RTCPeerConnection which knows to use our chosen
// STUN server.
var configuration = {
offerToReceiveAudio: true,
offerToReceiveVideo: true
}
myPeerConnection = new RTCPeerConnection ({
configuration:configuration,
iceServers: [
{
urls: 'turn:...',
username: '...',
credential: '...',
},
{
urls: [
'stun:stun.l.google.com:19302',
'stun:stun1.l.google.com:19302',
'stun:stun2.l.google.com:19302',
'stun:stun3.l.google.com:19302',
],
},
],
});
// Set up event handlers for the ICE negotiation process.
myPeerConnection.onicecandidate = handleICECandidateEvent;
myPeerConnection.oniceconnectionstatechange = handleICEConnectionStateChangeEvent;
myPeerConnection.onicegatheringstatechange = handleICEGatheringStateChangeEvent;
myPeerConnection.onsignalingstatechange = handleSignalingStateChangeEvent;
myPeerConnection.onnegotiationneeded = handleNegotiationNeededEvent;
myPeerConnection.ontrack = handleTrackEvent;
}
// Called by the WebRTC layer to let us know when it's time to
// begin, resume, or restart ICE negotiation.
async function handleNegotiationNeededEvent () {
log ('*** Negotiation needed');
try {
log ('---> Creating offer');
const offer = await myPeerConnection.createOffer ();
// If the connection hasn't yet achieved the "stable" state,
// return to the caller. Another negotiationneeded event
// will be fired when the state stabilizes.
if (myPeerConnection.signalingState != 'stable') {
log (" -- The connection isn't stable yet; postponing...");
return;
}
// Establish the offer as the local peer's current
// description.
await myPeerConnection.setLocalDescription (offer);
// Send the offer to the remote peer.
log ('---> Sending the offer to the remote peer');
if (remoteUser == null) {
alert ('remote user is null.');
}
sendMessage (
ws,
JSON.stringify ({
remoteUser: remoteUser,
handler: 'relayOffer',
callback: 'handleVideoOfferMsg',
sdp: myPeerConnection.localDescription.toJSON (),
})
);
} catch (err) {
log (
'*** The following error occurred while handling the negotiationneeded event:'
);
reportError (err);
}
}
// Called by the WebRTC layer when events occur on the media tracks
// on our WebRTC call. This includes when streams are added to and
// removed from the call.
//
// track events include the following fields:
//
// RTCRtpReceiver receiver
// MediaStreamTrack track
// MediaStream[] streams
// RTCRtpTransceiver transceiver
//
// In our case, we're just taking the first stream found and attaching
// it to the <video> element for incoming media.
function handleTrackEvent (event) {
log ('*** Track event');
document.getElementById ('received_video').srcObject = event.streams[0];
document.getElementById ('hangup-button').disabled = false;
}
// Handles |icecandidate| events by forwarding the specified
// ICE candidate (created by our local ICE agent) to the other
// peer through the signaling server.
function handleICECandidateEvent (event) {
if (event.candidate) {
log ('*** Outgoing ICE candidate');
visitId = getVisitId ();
if (visitId == null) {
alert ('No visit ID provided.');
return;
}
if (remoteUser == null) {
alert ('remote user is null.');
}
sendMessage (
ws,
JSON.stringify ({
handler: 'newIceCandidate',
callback: 'handleNewICECandidateMsg',
remoteUser: remoteUser,
candidate: event.candidate.toJSON (),
})
);
}
}
// Handle |iceconnectionstatechange| events. This will detect
// when the ICE connection is closed, failed, or disconnected.
//
// This is called when the state of the ICE agent changes.
function handleICEConnectionStateChangeEvent (event) {
log (
'*** ICE connection state changed to ' + myPeerConnection.iceConnectionState
);
switch (myPeerConnection.iceConnectionState) {
case 'closed':
case 'failed':
case 'disconnected':
closeVideoCall ();
break;
}
}
// Set up a |signalingstatechange| event handler. This will detect when
// the signaling connection is closed.
//
// NOTE: This will actually move to the new RTCPeerConnectionState enum
// returned in the property RTCPeerConnection.connectionState when
// browsers catch up with the latest version of the specification!
function handleSignalingStateChangeEvent (event) {
log (
'*** WebRTC signaling state changed to: ' + myPeerConnection.signalingState
);
switch (myPeerConnection.signalingState) {
case 'closed':
closeVideoCall ();
break;
}
}
// Handle the |icegatheringstatechange| event. This lets us know what the
// ICE engine is currently working on: "new" means no networking has happened
// yet, "gathering" means the ICE engine is currently gathering candidates,
// and "complete" means gathering is complete. Note that the engine can
// alternate between "gathering" and "complete" repeatedly as needs and
// circumstances change.
//
// We don't need to do anything when this happens, but we log it to the
// console so you can see what's going on when playing with the sample.
function handleICEGatheringStateChangeEvent (event) {
log (
'*** ICE gathering state changed to: ' + myPeerConnection.iceGatheringState
);
}
// Close the RTCPeerConnection and reset variables so that the user can
// make or receive another call if they wish. This is called both
// when the user hangs up, the other user hangs up, or if a connection
// failure is detected.
function closeVideoCall () {
var localVideo = document.getElementById ('local_video');
log ('Closing the call');
// Close the RTCPeerConnection
if (myPeerConnection) {
log ('--> Closing the peer connection');
// Disconnect all our event listeners; we don't want stray events
// to interfere with the hangup while it's ongoing.
myPeerConnection.ontrack = null;
myPeerConnection.onnicecandidate = null;
myPeerConnection.oniceconnectionstatechange = null;
myPeerConnection.onsignalingstatechange = null;
myPeerConnection.onicegatheringstatechange = null;
myPeerConnection.onnotificationneeded = null;
// Stop all transceivers on the connection
myPeerConnection.getTransceivers ().forEach (transceiver => {
transceiver.stop ();
});
// Stop the webcam preview as well by pausing the <video>
// element, then stopping each of the getUserMedia() tracks
// on it.
if (localVideo.srcObject) {
localVideo.pause ();
localVideo.srcObject.getTracks ().forEach (track => {
track.stop ();
});
}
// Close the peer connection
myPeerConnection.close ();
myPeerConnection = null;
webcamStream = null;
}
// Disable the hangup button
document.getElementById ('hangup-button').disabled = true;
targetUsername = null;
}
// Handle the "hang-up" message, which is sent if the other peer
// has hung up the call or otherwise disconnected.
function handleHangUpMsg (msg) {
log ('*** Received hang up notification from other peer');
closeVideoCall ();
}
// Hang up the call by closing our end of the connection, then
// sending a "hang-up" message to the other peer (keep in mind that
// the signaling is done on a different connection). This notifies
// the other peer that the connection should be terminated and the UI
// returned to the "no call in progress" state.
function hangUpCall () {
closeVideoCall ();
if (remoteUser == null) {
alert ('remote user is null.');
}
sendToServer ({
remoteUser: remoteUser,
handler: 'hangupCall',
});
}
// Handle a click on an item in the user list by inviting the clicked
// user to video chat. Note that we don't actually send a message to
// the callee here -- calling RTCPeerConnection.addTrack() issues
// a |notificationneeded| event, so we'll let our handler for that
// make the offer.
/*
async function invite(evt) {
log("Starting to prepare an invitation");
if (myPeerConnection) {
alert("You can't start a call because you already have one open!");
} else {
var clickedUsername = evt.target.textContent;
// Don't allow users to call themselves, because weird.
if (clickedUsername === myUsername) {
alert("I'm afraid I can't let you talk to yourself. That would be weird.");
return;
}
// Record the username being called for future reference
targetUsername = clickedUsername;
log("Inviting user " + targetUsername);
// Call createPeerConnection() to create the RTCPeerConnection.
// When this returns, myPeerConnection is our RTCPeerConnection
// and webcamStream is a stream coming from the camera. They are
// not linked together in any way yet.
log("Setting up connection to invite user: " + targetUsername);
createPeerConnection();
// Get access to the webcam stream and attach it to the
// "preview" box (id "local_video").
try {
webcamStream = await navigator.mediaDevices.getUserMedia(mediaConstraints);
document.getElementById("local_video").srcObject = webcamStream;
} catch(err) {
handleGetUserMediaError(err);
return;
}
// Add the tracks from the stream to the RTCPeerConnection
try {
webcamStream.getTracks().forEach(
transceiver = track => myPeerConnection.addTransceiver(track, {streams: [webcamStream]})
);
} catch(err) {
handleGetUserMediaError(err);
}
}
}
*/
// Accept an offer to video chat. We configure our local settings,
// create our RTCPeerConnection, get and attach our local camera
// stream, then create and send an answer to the caller.
async function handleVideoOfferMsg (data) {
msg = data.sdp;
// If we're not already connected, create an RTCPeerConnection
// to be linked to the caller.
log ('Received video chat offer');
if (!myPeerConnection) {
createPeerConnection ();
}
// Get the webcam stream if we don't already have it
if (!webcamStream) {
try {
webcamStream = await navigator.mediaDevices.getUserMedia (
mediaConstraints
);
} catch (err) {
handleGetUserMediasError (err);
return;
}
}
document.getElementById ('local_video').srcObject = webcamStream;
// Add the camera stream to the RTCPeerConnection
console.log( webcamStream
.getTracks ())
try {
webcamStream
.getTracks ()
.forEach (
(transceiver = track =>
myPeerConnection.addTransceiver (track, {streams: [webcamStream]}))
);
} catch (err) {
handleGetUserMediaError (err);
}
// We need to set the remote description to the received SDP offer
// so that our local WebRTC layer knows how to talk to the caller.
try {
var desc = new RTCSessionDescription ({sdp: msg.sdp, type: msg.type});
} catch (e) {
log ('msg.sdp error ' + e);
console.log (msg.sdp);
}
log ('Remote Description added');
// If the connection isn't stable yet, wait for it...
if (myPeerConnection.signalingState != 'stable') {
log (" - But the signaling state isn't stable, so triggering rollback");
// Set the local and remove descriptions for rollback; don't proceed
// until both return.
await Promise.all ([
myPeerConnection.setLocalDescription ({type: 'rollback'}),
myPeerConnection.setRemoteDescription (desc),
]);
return;
} else {
log (' - Setting remote description');
await myPeerConnection.setRemoteDescription (desc);
}
log ('---> Creating and sending answer to caller');
await myPeerConnection.setLocalDescription (
await myPeerConnection.createAnswer ()
);
console.log( myPeerConnection.localDescription)
if (remoteUser == null) {
alert ('remote user is null.');
}
sendMessage (
ws,
JSON.stringify ({
remoteUser: remoteUser,
handler: 'respondToOffer',
sdp: myPeerConnection.localDescription.toJSON (),
callback: 'handleVideoAnswerMsg',
})
);
}
// Responds to the "video-answer" message sent to the caller
// once the callee has decided to accept our request to talk.
async function handleVideoAnswerMsg (data) {
log ('*** Call recipient has accepted our call');
msg = data.sdp;
// Configure the remote description, which is the SDP payload
// in our "video-answer" message.
try {
var desc = new RTCSessionDescription ({sdp: msg.sdp, type: msg.type});
} catch (e) {
log ('msg.sdp error ' + e);
console.log (msg.sdp);
}
await myPeerConnection.setRemoteDescription (desc).catch (reportError);
}
// A new ICE candidate has been received from the other peer. Call
// RTCPeerConnection.addIceCandidate() to send it along to the
// local ICE framework.
async function handleNewICECandidateMsg (msg) {
if (typeof msg.event.sdpMid === undefined) {
msg.event.sdpMid = null;
}
if (typeof msg.event.sdpMLineIndex === undefined) {
msg.event.sdpMLineIndex = null;
}
if (typeof msg.event.usernameFragment === undefined) {
msg.event.usernameFragment = null;
}
var candidate = new RTCIceCandidate ({
candidate: msg.event.candidate,
sdpMid: msg.event.sdpMid,
sdpMLineIndex: msg.event.sdpMLineIndex,
usernameFragment: msg.event.usernameFragment,
});
//log("*** Adding received ICE candidate: " + JSON.stringify(candidate));
log ('*** Adding received ICE candidate');
try {
await myPeerConnection.addIceCandidate (candidate);
} catch (err) {
reportError (err);
}
}
// Handle errors which occur when trying to access the local media
// hardware; that is, exceptions thrown by getUserMedia(). The two most
// likely scenarios are that the user has no camera and/or microphone
// or that they declined to share their equipment when prompted. If
// they simply opted not to share their media, that's not really an
// error, so we won't present a message in that situation.
function handleGetUserMediaError (e) {
log_error (e);
switch (e.name) {
case 'NotFoundError':
alert (
'Unable to open your call because no camera and/or microphone' +
'were found.'
);
break;
case 'SecurityError':
case 'PermissionDeniedError':
// Do nothing; this is the same as the user canceling the call.
break;
default:
alert ('Error opening your camera and/or microphone: ' + e.message);
break;
}
// Make sure we shut down our end of the RTCPeerConnection so we're
// ready to try again.
closeVideoCall ();
}
// Handles reporting errors. Currently, we just dump stuff to console but
// in a real-world application, an appropriate (and user-friendly)
// error message should be displayed.
function reportError (errMessage) {
log_error (`Error ${errMessage.name}: ${errMessage.message}`);
}
async function renderVideoPage (videoId) {
if (getVideoId === undefined || getVideoId === null) {
toastr.options.closeButton = true;
toastr.options.timeOut = 5000;
toastr.error (
'Cound not determine your visit ID. Please try again.',
'Warning'
);
window.location.hash = '#';
return false;
}
$ ('#videoPage').removeClass ('hiddenPage');
//**********************
//Starting a peer connection
//**********************
//getting local video stream
console.log ('Requesting local stream');
if (myPeerConnection) {
alert ("You can't start a call because you already have one open!");
} else {
// Record the username being called for future reference
createPeerConnection ();
// Get access to the webcam stream and attach it to the
// "preview" box (id "local_video").
if (!webcamStream) {
try {
webcamStream = await navigator.mediaDevices.getUserMedia (
mediaConstraints
);
document.getElementById ('local_video').srcObject = webcamStream;
} catch (err) {
handleGetUserMediaError (err);
return;
}
}
}
}
$ ('#ReadyModalButton').click (function () {
//This will send the offer.
console.log( webcamStream
.getTracks ())
try {
webcamStream
.getTracks ()
.forEach (
(transceiver = track =>
myPeerConnection.addTransceiver (track, {streams: [webcamStream]}))
);
} catch (err) {
handleGetUserMediaError (err);
}
toastr.options.closeButton = true;
toastr.options.timeOut = 5000;
toastr.info ('Attempting to establish secure connection.', 'Please Hold');
});
(I can't give the correct answer because I don't know the specs correctly) I also had this problem. The cause seems to be addTransceiver(). It is safe for OfferUser to addTransceiver(), but if AnswerUser adds track to peerConnection using addTransceiver() before setRemoteDescription(), it seems to be a transceiver unrelated to setRemoteDescription().
There are two possible solutions I can think of. 1. If AnswerUser uses peerConnection.addTrack() instead of addTransceiver() then it works. 2. After completing the negotiation once, get the transceiver with getTransceivers(), add the track and change the direction, and then perform the negotiation again.