Skip to content

Instantly share code, notes, and snippets.

@mganeko

mganeko/gist:4d0f84c383722d1fb963

Last active August 29, 2015 14:16
Show Gist options
  • Save mganeko/4d0f84c383722d1fb963 to your computer and use it in GitHub Desktop.
Save mganeko/4d0f84c383722d1fb963 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mganeko revised this gist Mar 10, 2015. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,7 @@
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WebRTC 1to1</title>
    <!--- this is demo for http://www.slideshare.net/mganeko/chromebook-webrtc -->
    <!-- please install simple message server from here: https://chrome.google.com/webstore/detail/simple-message-server/bihajhgkmpfnmbmdnobjcdhagncbkmmp -->
    </head>
    <body>
    <button type="button" onclick="startVideo();">Start video</button>
  2. mganeko revised this gist Mar 10, 2015. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,8 @@
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WebRTC 1to1</title>
    <title>WebRTC 1to1</title>
    <!--- this is demo for http://www.slideshare.net/mganeko/chromebook-webrtc -->
    </head>
    <body>
    <button type="button" onclick="startVideo();">Start video</button>
  3. mganeko created this gist Mar 10, 2015.
    253 changes: 253 additions & 0 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,253 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WebRTC 1to1</title>
    </head>
    <body>
    <button type="button" onclick="startVideo();">Start video</button>
    <button type="button" onclick="stopVideo();">Stop video</button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button" onclick="connect();">Connect</button>
    <button type="button" onclick="hangUp();">Hang Up</button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button" onclick="disconnect_ws();">Disconnect WS</button>
    <br />
    <div style="position: relative;">
    <video id="local-video" autoplay style="position: absolute; top: 0px; width: 160px; height: 120px; border: 1px solid black;"></video>
    <video id="remote-video" autoplay style="position: absolute; top: 0px; left: 165px; width: 800px; height: 600px; border: 1px solid black;"></video>
    </div>

    <script>
    // create socket
    var url = 'ws://localhost:3001/';
    var ws = new WebSocket(url);
    var socketId = null;

    var localVideo = document.getElementById('local-video');
    var remoteVideo = document.getElementById('remote-video');
    var localStream = null;
    var peerConn = null;
    var peerStarted = false;
    var channelReady = false;
    var mediaConstraints = {'mandatory': {
    'OfferToReceiveAudio':true,
    'OfferToReceiveVideo':true }};

    function disconnect_ws() {
    if (ws) {
    ws.close();
    ws = null;
    }
    }

    // --------------------- socket event ---------------
    ws.onopen = onChannelOpened;
    ws.onmessage = onMessage;
    ws.onclose = onClose;
    ws.onerror = onError;

    function onChannelOpened(evt) {
    console.log('Channel opened.');
    console.log(evt);
    channelReady = true;

    var msg;
    //msg = 'hi';
    //ws.send(msg);
    msg = JSON.stringify({type: "open", text: "hello"});
    ws.send(msg);
    msg = JSON.stringify({type: "open", text: "あいうえおす"});
    ws.send(msg);

    msg = "_system:getsocketid";
    ws.send(msg);
    }

    // socket: accept connection request
    function onMessage(raw_evt) {
    console.log("onMessage() evt=", raw_evt);
    var msg = raw_evt.data;
    var evt = JSON.parse(msg);

    if (evt.type === '_system') {
    if (evt.system === 'socketid') {
    socketId = evt.socketid;
    console.log('_system: getsocketid = ', socketId);

    var msg = '_system:sendto=' + socketId + ', ' + JSON.stringify({type: "direct", text: "only for you"});
    ws.send(msg);
    }
    }
    else if (evt.type === 'offer') {
    console.log("Received offer...")
    if (!peerStarted) {
    sendAnswer(evt);
    peerStarted = true;
    }
    }
    else if (evt.type === 'answer' && peerStarted) {
    console.log('Received answer...');
    console.log('Setting remote session description...' );
    peerConn.setRemoteDescription(new RTCSessionDescription(evt));

    }
    else if (evt.type === 'candidate' && peerStarted) {
    console.log('Received ICE candidate...');
    var candidate = new RTCIceCandidate({sdpMLineIndex:evt.sdpMLineIndex, sdpMid:evt.sdpMid, candidate:evt.candidate});
    console.log(candidate);
    peerConn.addIceCandidate(candidate);

    }
    else if (evt.type === 'bye' && peerStarted) {
    console.log("Received bye");
    stop();
    }
    }

    function onClose(raw_evt) {
    console.log("onClose() evt=", raw_evt);
    channelReady = false;
    }

    function onError(raw_evt) {
    console.log("onError() evt=", raw_evt);
    }


    // ---------------------- video handling -----------------------
    // get the local video up
    function startVideo() {
    navigator.webkitGetUserMedia({video: true, audio: true}, successCallback, errorCallback);
    function successCallback(stream) {
    localStream = stream;
    localVideo.src = window.URL.createObjectURL(stream);
    localVideo.play();
    }

    function errorCallback(error) {
    console.error('An error occurred: [CODE ' + error.code + ']');
    return;
    }
    }

    // stop local video
    function stopVideo() {
    localVideo.src = "";
    localStream.stop();
    }

    // ---------------------- connection handling -----------------------
    function prepareNewConnection() {
    var pc_config = {"iceServers":[]};
    var peer = null;
    try {
    peer = new webkitRTCPeerConnection(pc_config);
    } catch (e) {
    console.log("Failed to create PeerConnection, exception: " + e.message);
    }

    // send any ice candidates to the other peer
    peer.onicecandidate = function (evt) {
    if (evt.candidate) {
    console.log(evt.candidate);
    //socket.json.send({type: "candidate",
    // sdpMLineIndex: evt.candidate.sdpMLineIndex,
    // sdpMid: evt.candidate.sdpMid,
    // candidate: evt.candidate.candidate});
    var candidate = {type: "candidate",
    sdpMLineIndex: evt.candidate.sdpMLineIndex,
    sdpMid: evt.candidate.sdpMid,
    candidate: evt.candidate.candidate
    };
    var msg = JSON.stringify(candidate);
    ws.send(msg);

    } else {
    console.log("End of candidates. ------------------- phase=" + evt.eventPhase);
    }
    };

    console.log('Adding local stream...');
    peer.addStream(localStream);

    peer.addEventListener("addstream", onRemoteStreamAdded, false);
    peer.addEventListener("removestream", onRemoteStreamRemoved, false)

    // when remote adds a stream, hand it on to the local video element
    function onRemoteStreamAdded(event) {
    console.log("Added remote stream");
    remoteVideo.src = window.URL.createObjectURL(event.stream);
    }

    // when remote removes a stream, remove it from the local video element
    function onRemoteStreamRemoved(event) {
    console.log("Remove remote stream");
    remoteVideo.src = "";
    }

    return peer;
    }

    function sendOffer() {
    peerConn = prepareNewConnection();
    peerConn.createOffer(function (sessionDescription) { // in case of success
    peerConn.setLocalDescription(sessionDescription);
    console.log("Sending: offer SDP");
    console.log(sessionDescription);
    //socket.json.send(sessionDescription);
    var msg = JSON.stringify(sessionDescription);
    ws.send(msg);
    }, function () { // in case of error
    console.log("Create Offer failed");
    }, mediaConstraints);
    }

    function sendAnswer(evt) {
    console.log('sending Answer. Creating remote session description...' );
    peerConn = prepareNewConnection();
    peerConn.setRemoteDescription(new RTCSessionDescription(evt));
    peerConn.createAnswer(function (sessionDescription) { // in case of success
    peerConn.setLocalDescription(sessionDescription);
    console.log("Sending: answer SDP");
    console.log(sessionDescription);
    //socket.json.send(sessionDescription);
    var msg = JSON.stringify(sessionDescription);
    ws.send(msg);
    }, function () { // in case of error
    console.log("Create Answer failed");
    }, mediaConstraints);
    }


    // ---------------- handling user UI event -----
    // start the connection upon user request
    function connect() {
    if (!peerStarted && localStream && channelReady) {
    sendOffer();
    peerStarted = true;
    } else {
    alert("Local stream not running yet - try again.");
    }
    }

    // stop the connection upon user request
    function hangUp() {
    console.log("Hang up.");
    //socket.json.send({type: "bye"});
    var msg = JSON.stringify({type: "bye"});
    ws.send(msg);
    stop();
    }

    function stop() {
    if (peerConn) {
    peerConn.close();
    peerConn = null;
    }
    peerStarted = false;
    }

    </script>
    </body>
    </html>