Public
Edited
Nov 3, 2022
Insert cell
Insert cell
Insert cell
video = htl.html`<video autoplay style="background-color: #666; border: 10px #000 solid;" />`
Insert cell
{
if (webcam) {
// check to make sure that the user's browser supports the JavaScript getUserMedia API
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
let webcamStream = null;
try {
// prompts for user's permission to use their webcam
// prefer front camera if both front (facingMode: "user") & rear (facingMode: "environment") cameras are available
webcamStream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: "user"} });
} catch (error) {
console.log("Something went wrong while fetching video stream from webcam.");
}

// check for old browsers that do not support srcObject attribute.
if ("srcObject" in video) {
video.srcObject = webcamStream;
} else {
video.src = window.URL.createObjectURL(webcamStream);
}
} else {
// User's browser does not support JavaScript's getUserMedia API.
console.log("Are you a dinosaur?");
}
} else {
if (video.srcObject) {
const tracks = video.srcObject.getTracks();
tracks.forEach(track => track.stop());
}
}
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more