alanshaw/slides.md

## slides.md

      
    Raw
  

              slides.md
            
          
    Hello


foam.meteor.com

This talk is a demo!

d3 pack layout


You specify the data
d3 calculates the radius and position of circles


WebRTCFTW!


Open project enabling real time communications in browsers!
Peer to peer
...also getUserMedia


<video id="video" width="320" height="240" autoplay></video>
function initWebcam () {
  var getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia
  var URL = window.URL || window.mozURL || window.webkitURL

  getUserMedia.call(navigator, {video: true}, function (stream) {
    var video = document.getElementById("video")
    video.src = URL.createObjectURL(stream)
    video.play()
  }, function(er) {
    console.error('Video capture error', er)
  })
}

Get a snap?


Draw to <canvas>
Get image data with toDataURL


<canvas id="canvas" width="320" height="240"></canvas>
function takeSnap () {
  var context = document.getElementById("canvas").getContext("2d")
  var video = document.getElementById("video")
  context.drawImage(video, 0, 0, video.width, video.height)
}

function getDataURL () {
  var canvas = document.getElementById("canvas")
  console.log(canvas.toDataURL())
}

Prove it!


Why does d3 fit well with Meteor?


d3 + changing dataset = awesome animations!
Meteor puts a database in your browser
...and keeps it in sync with the server
Through pub/sub, multiple clients can add to & receive updates to the SAME dataset


Can you see where I'm going with this?


PUT IT IN THE DATABASE!


http://foam.meteor.com
http://meteor.com
https://github.com/alanshaw/meteor-foam
http://twitter.com/_alanshaw


## webrtc+canvas.html
<!doctype html>
<video id="video" width="320" height="240" autoplay></video>
<canvas id="canvas" width="320" height="240"></canvas>
<script>
function initWebcam () {
  var getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia
  var URL = window.URL || window.mozURL || window.webkitURL

  getUserMedia.call(navigator, {video: true}, function (stream) {
    var video = document.getElementById("video")
    video.src = URL.createObjectURL(stream)
    video.play()
  }, function(er) {
    console.error('Video capture error', er)
  })
}

function takeSnap () {
  var context = document.getElementById("canvas").getContext("2d")
  var video = document.getElementById("video")
  context.drawImage(video, 0, 0, video.width, video.height)
}

function getDataURL () {
  var canvas = document.getElementById("canvas")
  console.log(canvas.toDataURL())
}
</script>
	<!doctype html>
	<video id="video" width="320" height="240" autoplay></video>
	<canvas id="canvas" width="320" height="240"></canvas>
	<script>
	function initWebcam () {
	var getUserMedia = navigator.getUserMedia \|\| navigator.mozGetUserMedia \|\| navigator.webkitGetUserMedia
	var URL = window.URL \|\| window.mozURL \|\| window.webkitURL

	getUserMedia.call(navigator, {video: true}, function (stream) {
	var video = document.getElementById("video")
	video.src = URL.createObjectURL(stream)
	video.play()
	}, function(er) {
	console.error('Video capture error', er)
	})
	}

	function takeSnap () {
	var context = document.getElementById("canvas").getContext("2d")
	var video = document.getElementById("video")
	context.drawImage(video, 0, 0, video.width, video.height)
	}

	function getDataURL () {
	var canvas = document.getElementById("canvas")
	console.log(canvas.toDataURL())
	}
	</script>