mirror of
https://github.com/amark/gun.git
synced 2025-06-08 07:06:44 +00:00
78 lines
2.6 KiB
HTML
78 lines
2.6 KiB
HTML
<div id="be">
|
|
<div id="view"></div>
|
|
<video id="video" style="display: none; height:300px;width:320px" autoplay="true"></video>
|
|
<canvas id="canvas" style="display: none; height:240px; width:320px"></canvas>
|
|
<textarea id="debug" style="height:240px;width:420px;"></textarea>
|
|
<div id="audio"></div>
|
|
</div>
|
|
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
|
<script src="gun.js"></script>
|
|
<script>
|
|
;(function(){
|
|
console.log("WARNING! THIS EXAMPLE / DEMO IS NOT FINISHED! DO NOT USE IT.");
|
|
navigator.getUserMedia = navigator.getUserMedia
|
|
|| navigator.webkitGetUserMedia
|
|
|| navigator.mozGetUserMedia
|
|
|| navigator.msGetUserMedia;
|
|
var gun = Gun(location.origin + '/gun');
|
|
var blast = gun.get('audio'), sight = gun.get('video');
|
|
var be = $("#be"), vid = $('#video'), aud, NO;
|
|
blast.on(function(data){
|
|
console.log("<<<<<", data.frame);
|
|
debug.value = data.frame;
|
|
play(data.frame);
|
|
});
|
|
sight.on(function(data){
|
|
show(data.frame);
|
|
});
|
|
navigator.getUserMedia({audio: true, video: false}, function talk(stream){
|
|
return;
|
|
var arr = [], mr = new MediaRecorder(stream, {audioBitsPerSecond: 6000});
|
|
mr.start();
|
|
setTimeout(function(){ talk(stream); setTimeout(function(){ mr.stop() },5); },250);
|
|
mr.ondataavailable = function(e){
|
|
//console.info('data available', e.data);
|
|
arr.push(e.data);
|
|
}
|
|
mr.onstop = function(){
|
|
encode(arr, function(b64){
|
|
//console.log(">>>>>", b64);
|
|
blast.put({frame: b64});
|
|
});
|
|
//arr = [];
|
|
}
|
|
}, function(err){ console.log(err) });
|
|
navigator.getUserMedia({audio: false, video: true}, function(stream){
|
|
var el = vid[0], draw = canvas.getContext('2d');
|
|
el.src = (window.URL || window.webkitURL).createObjectURL(stream);
|
|
el.play(); // Start the video in webcam
|
|
;(function see(){
|
|
canvas.width = el.videoWidth;
|
|
canvas.height = el.videoHeight;
|
|
draw.drawImage(el, 0, 0);
|
|
var data = canvas.toDataURL('image/jpeg'); // Gets the Base64 encoded text for image
|
|
sight.put({frame: data});
|
|
setTimeout(see, 1000 / 10);
|
|
}());
|
|
}, function(err){ console.log(err) });
|
|
|
|
function encode(arr, cb){
|
|
var blob = new Blob(arr, {type: 'audio/ogg'});
|
|
var fileReader = new window.FileReader();
|
|
fileReader.onloadend = function() {
|
|
cb(fileReader.result);
|
|
};
|
|
fileReader.readAsDataURL(blob);
|
|
//fileReader.readAsArrayBuffer(blob);
|
|
}
|
|
function play(b64){
|
|
return;
|
|
if(NO){ return }
|
|
$('#audio').html('<audio autoplay><source src="'+b64+'"></audio>');
|
|
}
|
|
function show(frame){
|
|
//if(NO){ return console.log(val); }
|
|
$("#view").html("<img src='" + frame + "' width='75%'>");
|
|
}
|
|
}());
|
|
</script> |