Importing a local WebCam-stream into a Presentation

Importing a local WebCam-stream into a Presentation

Sometimes you want to show a live video stream from a local WebCam in your presentation, without having to move to another application. This can be done with the following script and video-tag. It will ask for permission to access the camera and will display the video stream in a video element. If you click on the button again, the camera will be closed.

Simply copy both tags into your LiaScript document and you will be able to open and close the camera stream with the button.

How does it work?

The video-tag is the place for your video, it could be placed also below the script tag. The script tag will search for the video element and will try to access the camera stream. If the camera is not available, it will output an error message. If the camera is available, it will display the video stream within the video tag and switch its display style form none to block and change the button text to “Close Camera”. If you click on the button again, the camera will be closed. By using type submit as input, the button will be displayed as a submit button, which will trigger the script execution only if the button is clicked.

Additionally in order to have persistent slide, the persistent: true tag is used, which will keep the state of the video element and the camera stream, even if you switch to another slide and come back. If this is not defined, you will have to click onto the button again when you revisit the slide, to open the camera stream.

Related Posts

Umsetzung, Chancen und Herausforderungen von Remote-Laboren (German)

Aufzeichnung der Webinarreihe “Digitalisierung an den Hochschulen Sachsen Anhalt”. Thema: “„Jederzeit und überall im Labor lernen.

Read More

Teach Your AI to Generate LiaScript Previews

Claude.ai offers a powerful feature in its paid version that allows you to preview generated code directly.

Read More

Tables & Data Visualizations

If Markdown tables are used to store data, why not directly visualizing it?

Read More