WebRTC is still in development, so right now there is no better resource than the specification, and the best place to keep up-to-date on changes to it is: http://w3c.github.io/webrtc-pc
When it comes to individual browsers, and what's implemented, it gets harder. Just look at: http://iswebrtcreadyyet.com
The main API difference you are observing in your question is the 2014 support for promises. All asynchronous methods now return a Promise instead of taking a pair of success and failure callbacks. Chrome does not implement this yet, but Firefox does.
The following is a complete WebRTC call that works in Firefox (note: uses arrow functions):
var pc1 = new mozRTCPeerConnection(), pc2 = new mozRTCPeerConnection();
pc1.onicecandidate = e => !e.candidate ||
pc2.addIceCandidate(e.candidate).catch(failed);
pc2.onicecandidate = e => !e.candidate ||
pc1.addIceCandidate(e.candidate).catch(failed);
pc2.onaddstream = e => v2.mozSrcObject = e.stream;
function start() {
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => pc1.addStream(v1.mozSrcObject = stream))
.then(() => pc1.createOffer())
.then(offer => pc1.setLocalDescription(offer))
.then(() => pc2.setRemoteDescription(pc1.localDescription))
.then(() => pc2.createAnswer())
.then(answer => pc2.setLocalDescription(answer))
.then(() => pc1.setRemoteDescription(pc2.localDescription))
.then(() => log("Connected!"))
.catch(failed);
}
var log = msg => div.innerHTML += "<p>" + msg + "</p>";
var failed = e => log(e.name +": "+ e.message +" line "+ e.lineNumber);
<video id="v1" height="120" width="160" autoplay></video>
<video id="v2" height="120" width="160" autoplay></video><br>
<button onclick="start()">Start!</button><div id="div"></div>
That's 20 lines of code, quite a bit smaller than other versions you may have seen.
Don't despair if it looks cryptic, as promises and arrow functions are new concepts that take a bit of getting used to, especially when used in combination like this. I recommend reading up on them separately using the links above.
The old callback versions are still available for all the RTCPeerConnection methods, so the use of promises is optional. Chrome supports promises in the browser (just not for WebRTC), but not arrow functions yet, so it'll probably be a while before the above becomes common.
This difference aside, Chrome and Firefox are quite stable when it comes to high-level call setup, even re-negotiation. The areas of the specification that are still changing have to do with new lower-level control surfaces like RTCRtpSender, and a refocus from specifying streams to specifying tracks (with addTrack instead of addStream etc.).
Unfortunately, I know of no good browser-specific documentation links. As you point out the MDN link is outdated (though the MDN link for getUserMedia was recently updated, so there's hope this will change). I find that looking at working demos and examples is still the most helpful in figuring out what is supported by the different browsers.
A few differences I know of:
- getUserMedia constaints - Chrome implements the spec circa 2013 here, whereas Firefox implements the spec (but limited to width/height/frameRate and facingMode).
- getStats - Chrome's implementation, while more mature, is non-standard, whereas Firefox implements the spec (but limited to rtp/rtcp, ice candidates and a few other things).
- RTCOfferOptions - Chrome chokes on these, so instead of e.g.
{ offerOptions: true } use the older { mandatory: OfferOptions: true } (notice the case-difference 'o' vs. 'O') as this works in both browsers.
- addTrack/removeTrack Stick to
addStream(stream) for now (though Firefox does not implement removeStream so use removeTrack there).
You still need adapter.js due to prefixes and other differences, but there is more adapter.js could and should do. Hopefully, newer versions of it will narrow this gap further by providing a polyfill for some of the above differences.
My knowledge of Firefox is better than Chrome, so my apologies if I missed something.
I hope some of this helps.
