forked: PeerJS chat demo(chat-old.html)

jsdoit.css

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ddd;
  font: 30px sans-serif;
}

input {
  border:solid thin black;
}

button {
  border:solid thin black;
}

#my-video {
    width: 100%;
}

jsdoit.html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.peerjs.com/0.3/peer.js"></script>
<script type="text/javascript" src="http://jsrun.it/assets/i/4/N/J/i4NJy"></script><!-- jquery.qrcode-0.11.0.min.js -->
<script type="text/javascript" src="http://jsrun.it/assets/m/i/m/g/mimgw"></script><!-- llqrcode.js -->

Your PeerJS id is : <span id="pid"></span><br><br>
Connect to peer: <input type="text" id="rid" placeholder="Someone else's id">
<input type="button" value="Connect" id="connect"><br><br>

<div id="chat_area" style="display: none;">    
      <div id="messages"></div>
      <input type="text" id="text" placeholder="Enter message">
      <input type="button" value="Send" id="send">
</div>


<video id="my-video" muted="true" autoplay></video>
<button id="next-camera">別のカメラ</button><br/>

<canvas width="320" height="240" style="opacity:1"></canvas>
<hr>
<div id="camData"></div>
<img id="video-img"/>

jsdoit.js

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL;

var videoDataList = [];
var localMediaStream = null;
var cameraIndex = 0;

function nextCamera(callbackFunction) {
    if(videoDataList.length == 0) {
        alert("カメラが見つかりません");
        return;
    }

    cameraIndex++;
    var videoData = videoDataList[cameraIndex % videoDataList.length];

    if(localMediaStream) {
        localMediaStream.stop();
    }

    navigator.getUserMedia(
        {video: {optional: [{sourceId: videoData.id }]}, audio: false},
        function(stream) {
            localMediaStream = stream;
            var url = window.URL.createObjectURL(stream);
            $('#my-video').prop('src', url);
            callbackFunction();
        },
        function(error) {
            console.error(error);
        }
    );
}

/*
function captureQRCode() {
    var video = $("#my-video").get(0);
    $("#qr-canvas").attr("width",  video.videoWidth);
    $("#qr-canvas").attr("height", video.videoHeight);

    var canvas = $("#qr-canvas").get(0);
    var context = canvas.getContext("2d");
    context.drawImage(video, 0, 0);

    try {
        qrcode.decode();
    } catch(e) {
        console.log(e);
    }

    setTimeout(captureQRCode, 500);
}
*/

function initVideo() {
    MediaStreamTrack.getSources(function(data) {
        for(var i = 0 ; i < data.length; i++) {
            if(data[i].kind == "video") {
                videoDataList.push(data[i]);
            }
        }
        nextCamera(function() {});
    });
    
    $('#next-camera').click(function() {
        nextCamera(function() {});
    });
/*
    qrcode.callback = function(text) {
        $("#callto-id").val(text);
        $('#make-call').click();    
    };
    setTimeout(captureQRCode, 500);
*/
}

/*
function initPeer() {
    var call = null;
    var peer = new Peer({ key: 'qkblwya9br1z6w29', debug: 3});

    peer.on('open', function() {
        $('#my-id').text(peer.id);
        $('#qrcode').qrcode({text: peer.id});
    });

    peer.on('call', function(newCall) {
        newCall.answer(localMediaStream);
        connect(newCall);
    });

    peer.on('error', function(err) {
        alert(err.message);
    });

    $('#make-call').click(function() {
        var newCall = peer.call($('#callto-id').val(), localMediaStream);
        connect(newCall);
    });

    $('#end-call').click(function() {
        call.close();
        changeStatus('NO_CALL');
    });

    function connect(newCall) {
        if (call) {
            call.close();
        }
        call = newCall;

        call.on('stream', function(stream) {
            var url = window.URL.createObjectURL(stream);
            $('#their-video').prop('src', url);
            changeStatus('EXIST_CALL');
        });

        call.on('close', function() {
            changeStatus('NO_CALL');
        });
    }
}

function changeStatus(status) {
    if (status == 'NO_CALL') {
        $('#my-video').animate({width: "100%"}, 5000);
        $('#their-video').animate({width: "0%"}, 5000);
    } else if (status == 'EXIST_CALL') {
        $('#my-video').animate({width: "50%"}, 5000);
        $('#their-video').animate({width: "100%"}, 5000);
    }
}

$(function(){
    initVideo();
    initPeer();
});
*/


$("#my-video").click(function() {
// setInterval(function(){
    var myVideo = $("#my-video")[0];
    var myCanvas = $("canvas")[0];
    var myImage = $("#video-img")[0];
    var context = myCanvas.getContext("2d");
    context.drawImage(myVideo, 0, 0, 320, 240);
    // 現在の時刻を取得
    var dateObj = new Date();
    console.log(dateObj);
    var y = dateObj.getFullYear();
    var m = dateObj.getMonth() + 1;
    var d = dateObj.getDate();
    var H = dateObj.getHours();
    var M = dateObj.getMinutes();
    var S = dateObj.getSeconds();
    var dateString = y+"年"+m+"月"+d+"日 "+H+"時"+M+"分"+S+"秒";
    // Canvasに描画
    context.shadowBlur = 8;
    context.shadowColor = "black";
    context.fillStyle = "red";
    context.font = "20px Arial";
    context.fillText(dateString, 10, 230);
    // img要素に転送
    var data = myCanvas.toDataURL();
    console.log(data);
    
    conn.send([1,2,3]);
    myImage.src = data;
});


$(function(){
    initVideo();
});



var conn;
var peer = new Peer({key: 'qkblwya9br1z6w29', debug: true});

peer.on('open', function(id){ $('#pid').text(id); });  
peer.on('connection', connect);

function connect(c) {
    $('#chat_area').show();
    conn = c;
    $('#messages').empty().append('Now chatting with ' + conn.peer);
    conn.on('data', function(data){
        console.log("data");
        console.log(data);
        $('#messages').append('<br>' + conn.peer + ':<br>' + data);
    });
    conn.on('close', function(err){ alert(conn.peer + ' has left the chat.') });
}

$(function() {
    $('#connect').click(function(){
        var c = peer.connect($('#rid').val());
        c.on('open', function(){ connect(c); });
        c.on('error', function(err){ alert(err) });  
    });

    $('#send').click(function(){
        var msg = $('#text').val();
        conn.send(msg);
        $('#messages').append('<br>You:<br>' + msg);
        $('#text').val('');
    });
});