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.1
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 things2 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,3 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):
-
Captures the video through your camera and displays it;
-
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.
-
I know some people open QuickTime and resize it to a tiny floating window. Then overlay the window on the slides. Essentially the slides and the video are in two windows. The technique I mention in this post makes it possible to embed the video right on the slide pages. ↩︎
-
The other one is the Shiny voice input app: https://yihui.shinyapps.io/voice/. ↩︎
-
He pinged me on Twitter, which was understandable but not necessary, and I want to repeat in this corner: I read every single question on Stack Overflow related to my software packages, as long as you used the correct tags. If I’m able to answer your question, I’ll just answer it. That said, if your question is extremely urgent, feel free to ping me anyway. ↩︎
Donate
As a freelancer (currently working as a contractor) and a dad of three kids, I truly appreciate your donation to support my writing and open-source software development! Your contribution helps me cope with financial uncertainty better, so I can spend more time on producing high-quality content and software. You can make a donation through methods below.
-
Venmo:
@yihui_xie, or Zelle:xie@yihui.name -
Paypal
-
If you have a Paypal account, you can follow the link https://paypal.me/YihuiXie or find me on Paypal via my email
xie@yihui.name. Please choose the payment type as “Family and Friends” (instead of “Goods and Services”) to avoid extra fees. -
If you don’t have Paypal, you may donate through this link via your debit or credit card. Paypal will charge a fee on my side.
-
-
Other ways:
WeChat Pay (微信支付：谢益辉) Alipay (支付宝：谢益辉) 
When sending money, please be sure to add a note “gift” or “donation” if possible, so it won’t be treated as my taxable income but a genuine gift. Needless to say, donation is completely voluntary and I appreciate any amount you can give.
Please feel free to email me if you prefer a different way to give. Thank you very much!
I’ll give back a significant portion of the donations to the open-source community and charities. For the record, I received about $30,000 in total (before tax) in 2024-25, and gave back about $15,000 (after tax).