Embed A Live Video of Yourself Through Your Camera in HTML5 Slides

Two years ago, I did a quick search on how to embed a live video through my webcam in my HTML5 presentations, and it turned out to be simple enough if you have a modern web browser. I was looking for this because sometimes when you do webinars, your audience may want to see you (perhaps to confirm that they are not listening to a robot). It is also helpful when you record a video tutorial. Typically you can only record either your desktop or your face but not both, when your slides go fullscreen.¹

So I used the technique in one of my remote presentations. It was pretty cool. There are a lot of cool stuff on my computer that I either don’t have time to write about or simply forget. I think it is one of the two coolest little things² I have done these years related to web technologies, yet the technologies are relatively simple.

The reason that it came to my mind again was because Daijiang Li asked a question on Stack Overflow a week ago,³ and it seemed he was trying to do something similar, so I pulled out my JavaScript code and created a minimal example to show how to embed a live video through your webcam in your HTML5 slides.

When you open this link for the first time, your web browser will ask you for permission to access your camera, and display a video if you have a camera connected.

The key is to include an HTML fragment webcam.html in the output. This fragment does two things (read its HTML source to know how):

1. Captures the video through your camera and displays it;

2. Makes the video draggable, so you have put it anywhere on your screen.

The Rmd source file of the slides is here. Enjoy! Hacking HTML and JavaScript is a lot of fun, as Colin Fay may have discovered.