presentation.md

title	author	date	output
Show Your Webcam in R Markdown Presentations	Yihui Xie	2015/10/25	slidy_presentation incremental duration footer includes true 40 Webcam in R Markdown, Yihui Xie, 2015 before_body webcam.html

How

• Insert a <video> tag in the HTML output of R Markdown via includes in YAML
• Use JavaScript to get the video stream from your webcam; see webcam.html

Demo

• Compile (R) Markdown to HTML (you can click the button Knit HTML or Preview HTML in RStudio, or call rmarkdown::render('presentation.md') in R)
• Install the servr package (https://github.com/yihui/servr)
• In the directory of your presentation, run servr::httd(), and click the link of the HTML file
• If you are in RStudio, make sure you open the presentation in an external Google Chrome browser (by default, the address is http://127.0.0.1:4321)

webcam.html

<video autoplay id="webcam" width="200" height="200" style="position:absolute;top:0;left:0;z-index:100;cursor:move;" draggable="true"></video>

<script>
// for Google Chrome only; if you use other web browsers,
// you need to change webkit to other names; see
// http://www.html5rocks.com/en/tutorials/getusermedia/intro/
navigator.webkitGetUserMedia({video: true, audio: false}, function(stream) {
  var video = document.getElementById('webcam');
  video.src = window.URL.createObjectURL(stream);
}, function(e) {});

// make the video draggable
(function() {
  function drag_start(event) {
      var style = window.getComputedStyle(event.target, null);
      event.dataTransfer.setData("text/plain",
      (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
  }
  function drag_over(event) {
      event.preventDefault();
      return false;
  }
  function drop(event) {
      var offset = event.dataTransfer.getData("text/plain").split(',');
      dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
      dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
      event.preventDefault();
      return false;
  }
  var dm = document.getElementById('webcam');
  dm.addEventListener('dragstart',drag_start,false);
  document.body.addEventListener('dragover',drag_over,false);
  document.body.addEventListener('drop',drop,false);
})();
</script>