Working Hello World WebRTC DataChannel Examples with Signaling Implemented

问题

The intent is for this to become a Community Wiki post that is kept up-to-date so developers interested in implementing communication of JSON messages browser-to-browser (p2p) with WebRTC DataChannels have simple yet functional examples.

WebRTC DataChannels are experimental and still in draft. It seems that currently the web is a minefield of outdated WebRTC examples and even more so if a developer is trying to learn the RTCDataChannel API.

Simple yet functional 1-page examples that work today across WebRTC compliant browsers seem very difficult to find. For example, some examples leave out a signaling implementation, others only work for a single browser (e.g. Chrome-Chrome), many are outdated due to recent API changes, and others are so complex they create a barrier to getting started.

Please post examples that meet the following criteria (if something is not met please specify):

Client-side code is 1-page (200 lines or less)
Server-side code is 1-page and technology is referenced (e.g. node.js, php, python, etc.)
Signaling mechanism is implemented and protocol technology is referenced (e.g. WebSockets, long polling, GCM, etc.)
Working code that runs cross-browser (Chrome, Firefox, Opera, and/or Bowser)
Minimal options, error handling, abstraction, etc. -- the intent is an elementary example

回答1:

Here is a working example that uses HTML5 WebSockets for signaling and a node.js backend

signaling technology: WebSockets
client: pure html/javascript
server: node.js, ws
last tested on: Firefox 40.0.2, Chrome 44.0.2403.157 m, Opera 31.0.1889.174

client-side code:

<html>
<head>
</head>
<body>
    <p id='msg'>Click the following in different browser windows</p>
    <button type='button' onclick='init(false)'>I AM Answerer Peer (click first)</button>
    <button type='button' onclick='init(true)'>I AM Offerer Peer</button>

<script>
    (function() {   
        var offererId = 'Gandalf',   // note: client id conflicts can happen
            answererId = 'Saruman',  //       no websocket cleanup code exists
            ourId, peerId,
            RTC_IS_MOZILLA = !!window.mozRTCPeerConnection,
            RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection || window.msRTCPeerConnection,
            RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || window.msRTCSessionDescription,
            RTCIceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate || window.msRTCIceCandidate,
            rtcpeerconn = new RTCPeerConnection(
                    {iceServers: [{ 'url': 'stun:stun.services.mozilla.com'}, {'url': 'stun:stun.l.google.com:19302'}]}, 
                    {optional: [{RtpDataChannels: false}]}
                ),
            rtcdatachannel, 
            websocket = new WebSocket('ws://' + window.location.hostname + ':8000'),
            comready, onerror;

        window.init = function(weAreOfferer) {
            ourId = weAreOfferer ? offererId : answererId;
            peerId = weAreOfferer ? answererId : offererId;

            websocket.send(JSON.stringify({
                inst: 'init', 
                id: ourId
            }));

            if(weAreOfferer) {

                rtcdatachannel = rtcpeerconn.createDataChannel(offererId+answererId);
                rtcdatachannel.onopen = comready;
                rtcdatachannel.onerror = onerror;

                rtcpeerconn.createOffer(function(offer) {
                    rtcpeerconn.setLocalDescription(offer, function() {
                        var output = offer.toJSON();
                        if(typeof output === 'string') output = JSON.parse(output); // normalize: RTCSessionDescription.toJSON returns a json str in FF, but json obj in Chrome

                        websocket.send(JSON.stringify({
                            inst: 'send', 
                            peerId: peerId, 
                            message: output
                        }));
                    }, onerror);
                }, onerror);
            }
        };

        rtcpeerconn.ondatachannel = function(event) {
            rtcdatachannel = event.channel;
            rtcdatachannel.onopen = comready;
            rtcdatachannel.onerror = onerror;
        };

        websocket.onmessage = function(input) {
            var message = JSON.parse(input.data);

            if(message.type && message.type === 'offer') {
                var offer = new RTCSessionDescription(message);

                rtcpeerconn.setRemoteDescription(offer, function() {
                    rtcpeerconn.createAnswer(function(answer) {
                        rtcpeerconn.setLocalDescription(answer, function() {
                            var output = answer.toJSON();
                            if(typeof output === 'string') output = JSON.parse(output); // normalize: RTCSessionDescription.toJSON returns a json str in FF, but json obj in Chrome

                            websocket.send(JSON.stringify({
                                inst: 'send',
                                peerId: peerId,
                                message: output
                            }));
                        }, onerror);
                    }, onerror);                
                }, onerror);
            } else if(message.type && message.type === 'answer') {              
                var answer = new RTCSessionDescription(message);
                rtcpeerconn.setRemoteDescription(answer, function() {/* handler required but we have nothing to do */}, onerror);
            } else if(rtcpeerconn.remoteDescription) {
                // ignore ice candidates until remote description is set
                rtcpeerconn.addIceCandidate(new RTCIceCandidate(message.candidate));
            }
        };

        rtcpeerconn.onicecandidate = function (event) {
            if (!event || !event.candidate) return;
            websocket.send(JSON.stringify({
                inst: 'send',
                peerId: peerId,
                message: {candidate: event.candidate}
            }));
        };

        /** called when RTC signaling is complete and RTCDataChannel is ready */
        comready = function() {
            rtcdatachannel.send('hello world!');
            rtcdatachannel.onmessage = function(event) {
                document.getElementById('msg').innerHTML = 'RTCDataChannel peer ' + peerId + ' says: ' + event.data;    
            }
        };

        /** global error function */
        onerror = websocket.onerror = function(e) {
            console.log('====== WEBRTC ERROR ======', arguments);
            document.getElementById('msg').innerHTML = '====== WEBRTC ERROR ======<br>' + e;
            throw new Error(e);
        };
    })();
</script>
</body>
</html>

server-side code:

var server = require('http').createServer(), 
    express = require('express'),    
    app = express(),
    WebSocketServer = require('ws').Server,
    wss = new WebSocketServer({ server: server, port: 8000 });

app.use(express.static(__dirname + '/static')); // client code goes in static directory

var clientMap = {};

wss.on('connection', function (ws) {
    ws.on('message', function (inputStr) {
        var input = JSON.parse(inputStr);
        if(input.inst == 'init') {
            clientMap[input.id] = ws;
        } else if(input.inst == 'send') {
            clientMap[input.peerId].send(JSON.stringify(input.message));
        }
    });
});

server.on('request', app);
server.listen(80, YOUR_HOSTNAME_OR_IP_HERE, function () { console.log('Listening on ' + server.address().port) });

来源：https://stackoverflow.com/questions/32172627/working-hello-world-webrtc-datachannel-examples-with-signaling-implemented

标签

javascript

webrtc

p2p

rtcdatachannel