Last active
February 22, 2024 01:52
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function drawWebcamContinuous(){ | |
ctx.drawImage(video,0,0); | |
requestAnimationFrame(drawWebcamContinuous); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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