⚡ Angular Webcam Video Capture

• Displays webcam video stream and captures images from local PC web browser.
• Photos can be captured using a button that will save the images in an array.
• Works in Chrome only.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Webcam Video Capture
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• The captured pictures are added to a 'captures' array. This is cleared each time after the app initialises as part of the ngOnInit lifecycle hook.
• The srcObject property of the HTMLMediaElement interface is now used to get webcam video stream due to deprecation of "createObjectURL".
• This a simple app. No Jasmine/Karma testing included this time.

📷 Screenshots

.

📶 Technologies

• Angular v15
• Angular ElementRefs used as a wrapper inside of a View. Security issues with this method and it means service workers cannot be used. Better to use templating and databinding or use Renderer2.
• Angular ViewChild decorator used to configure a view query.
• navigator.mediaDevices.getUserMedia() method used to prompt the user for permission to use a media input which produces a MediaStream. It returns a Promise that resolves to a MediaStream object (assuming permission is given). A catch function was added to alert the user to any errors.

💾 Setup

• npm i to install dependencies
• Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

💻 Code Examples

• Extract from app.component.ts showing code to get video stream.

    public ngAfterViewInit() {
        if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
                this.video.nativeElement.srcObject = stream;
                this.video.nativeElement.play();
            });
        }
    }

🆒 Features

• Works with Google Chrome Version 86 Official Build 64 bits.

📋 Status & To-Do List

• Status: Working.
• To-Do: Add an improved UI. Add database connection to store captured photos.

👏 Inspiration

• Nic Raboy of X-Team blog: CAPTURE WEBCAM IMAGES FROM A BROWSER WITH ANGULAR]
• Matt McAlister: Get You Some Media With getUserMedia()

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]