├── .gitignore ├── .vscode └── settings.json ├── README.md ├── index.html └── script.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "javascript.implicitProjectConfig.checkJs": true 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Camera 2 | 3 | Example code showing how to access device cameras via JavaScript (no external libraries needed) 4 | 5 | See the post: https://www.webdevdrops.com/en/how-to-access-device-cameras-with-javascript/ 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript Camera 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 |

17 |

18 | JavaScript Camera 19 |

20 |

21 | 26 | 31 | 36 | 42 |

43 |

44 |

Screenshots

45 |

46 |

47 |

48 |

49 |

50 | 51 | 59 | 60 |

61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | if ( 3 | !"mediaDevices" in navigator || 4 | !"getUserMedia" in navigator.mediaDevices 5 | ) { 6 | alert("Camera API is not available in your browser"); 7 | return; 8 | } 9 | 10 | // get page elements 11 | const video = document.querySelector("#video"); 12 | const btnPlay = document.querySelector("#btnPlay"); 13 | const btnPause = document.querySelector("#btnPause"); 14 | const btnScreenshot = document.querySelector("#btnScreenshot"); 15 | const btnChangeCamera = document.querySelector("#btnChangeCamera"); 16 | const screenshotsContainer = document.querySelector("#screenshots"); 17 | const canvas = document.querySelector("#canvas"); 18 | const devicesSelect = document.querySelector("#devicesSelect"); 19 | 20 | // video constraints 21 | const constraints = { 22 | video: { 23 | width: { 24 | min: 1280, 25 | ideal: 1920, 26 | max: 2560, 27 | }, 28 | height: { 29 | min: 720, 30 | ideal: 1080, 31 | max: 1440, 32 | }, 33 | }, 34 | }; 35 | 36 | // use front face camera 37 | let useFrontCamera = true; 38 | 39 | // current video stream 40 | let videoStream; 41 | 42 | // handle events 43 | // play 44 | btnPlay.addEventListener("click", function () { 45 | video.play(); 46 | btnPlay.classList.add("is-hidden"); 47 | btnPause.classList.remove("is-hidden"); 48 | }); 49 | 50 | // pause 51 | btnPause.addEventListener("click", function () { 52 | video.pause(); 53 | btnPause.classList.add("is-hidden"); 54 | btnPlay.classList.remove("is-hidden"); 55 | }); 56 | 57 | // take screenshot 58 | btnScreenshot.addEventListener("click", function () { 59 | const img = document.createElement("img"); 60 | canvas.width = video.videoWidth; 61 | canvas.height = video.videoHeight; 62 | canvas.getContext("2d").drawImage(video, 0, 0); 63 | img.src = canvas.toDataURL("image/png"); 64 | screenshotsContainer.prepend(img); 65 | }); 66 | 67 | // switch camera 68 | btnChangeCamera.addEventListener("click", function () { 69 | useFrontCamera = !useFrontCamera; 70 | 71 | initializeCamera(); 72 | }); 73 | 74 | // stop video stream 75 | function stopVideoStream() { 76 | if (videoStream) { 77 | videoStream.getTracks().forEach((track) => { 78 | track.stop(); 79 | }); 80 | } 81 | } 82 | 83 | // initialize 84 | async function initializeCamera() { 85 | stopVideoStream(); 86 | constraints.video.facingMode = useFrontCamera ? "user" : "environment"; 87 | 88 | try { 89 | videoStream = await navigator.mediaDevices.getUserMedia(constraints); 90 | video.srcObject = videoStream; 91 | } catch (err) { 92 | alert("Could not access the camera"); 93 | } 94 | } 95 | 96 | initializeCamera(); 97 | })(); 98 | --------------------------------------------------------------------------------