Skip to content

Instantly share code, notes, and snippets.

@yihui
Created January 17, 2016 03:29
Show Gist options
  • Save yihui/836f9c995d37776ea62c to your computer and use it in GitHub Desktop.
Save yihui/836f9c995d37776ea62c to your computer and use it in GitHub Desktop.
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)
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment