gun-flint/bin/commands/gun/examples/engage/index.html

Micro-framework for building Gun adapters

<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>