Skip to content

Instantly share code, notes, and snippets.

@kongmunist
Last active February 22, 2024 01:52
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kongmunist/83d4862406b3363dcc07199780d81bad to your computer and use it in GitHub Desktop.
Save kongmunist/83d4862406b3363dcc07199780d81bad to your computer and use it in GitHub Desktop.
Code for "Accessing Smartphone Cameras and Webcams with Javascript": https://kongmunist.medium.com/ml-in-browser-accessing-smartphone-cameras-with-javascript-86c9a9c6a20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Face Mesh Demo by Andy Kong</title>
<!-- Import latest version of TF.js-->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<!-- Facemesh model import -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/facemesh"></script>
<!-- Our code goes in here -->
<script src="facemeshsetup.js"></script>
</head>
<body style="background-color:ghostwhite;">
Hello World!
<video autoplay muted hidden playsinline id="video" style="
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
width: auto;
height: auto;">
</video>
</body>
</html>
function drawWebcamContinuous(){
ctx.drawImage(video,0,0);
requestAnimationFrame(drawWebcamContinuous);
}
// Camera setup function - returns a Promise so we have to call it in an async function
async function setupCamera() {
// Find the video element on our HTML page
video = document.getElementById('video');
// Request the front-facing camera of the device
const stream = await navigator.mediaDevices.getUserMedia({
'audio': false,
'video': {
facingMode: 'user',
height: {ideal:1920},
width: {ideal: 1920},
},
});
video.srcObject = stream;
// Handle the video stream once it loads.
return new Promise((resolve) => {
video.onloadedmetadata = () => {
resolve(video);
};
});
}
function drawWebcamContinuous(){
ctx.drawImage(video,0,0);
requestAnimationFrame(drawWebcamContinuous);
}
var canvas;
var ctx;
async function main() {
// Set up front-facing camera
await setupCamera();
video.play()
// Set up canvas for livestreaming
canvas = document.getElementById('facecanvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx = canvas.getContext('2d');
// Start continuous drawing function
drawWebcamContinuous();
console.log("Camera setup done")
}
// Delay the camera request by a bit, until the main body has loaded
document.addEventListener("DOMContentLoaded", main);
// Camera setup function - returns a Promise so we have to call it in an async function
async function setupCamera() {
// Find the video element on our HTML page
video = document.getElementById('video');
// Request the front-facing camera of the device
const stream = await navigator.mediaDevices.getUserMedia({
'audio': false,
'video': {
facingMode: 'user',
height: {ideal:1920},
width: {ideal: 1920},
},
});
video.srcObject = stream;
// Handle the video stream once it loads.
return new Promise((resolve) => {
video.onloadedmetadata = () => {
resolve(video);
};
});
}
var canvas;
var ctx;
async function main() {
// Set up front-facing camera
await setupCamera();
video.play()
// Set up canvas for livestreaming
canvas = document.getElementById('facecanvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx = canvas.getContext('2d');
console.log("Camera setup done")
}
main();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Face Mesh Demo by Andy Kong</title>
<!-- Import latest version of TF.js-->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<!-- Facemesh model import -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/facemesh"></script>
<!-- Our code goes in here -->
<script src="facemeshsetup.js"></script>
</head>
<body style="background-color:ghostwhite;">
<!-- HTML Canvas we're drawing onto -->
<canvas id="facecanvas"></canvas>
<!-- Video that handles the browser access to the camera. The transforms mirror the feed -->
<video autoplay muted hidden playsinline id="video" style="
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
width: auto;
height: auto;">
</video>
</body>
</html>
// Camera setup function - returns a Promise so we have to call it in an async function
async function setupCamera() {
// Find the video element on our HTML page
video = document.getElementById('video');
// Request the front-facing camera of the device
const stream = await navigator.mediaDevices.getUserMedia({
'audio': false,
'video': {
facingMode: 'user',
height: {ideal:1920},
width: {ideal: 1920},
},
});
video.srcObject = stream;
// Handle the video stream once it loads.
return new Promise((resolve) => {
video.onloadedmetadata = () => {
resolve(video);
};
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment