jsnapcam

JSnapCam

The JSnapCam is a JavaScript class that facilitates webcam interaction and streaming. It provides methods to access and manage video input devices, start and stop webcam streaming, take photos, and more.

Table of Contents

• Introduction
• Installation
• Usage
• API Reference
  • Constructor
  • Properties
  • Methods
• Contributing
• License

Introduction

The JSnapCam simplifies webcam interactions in web applications. It allows you to:

• Access and list available video input devices.
• Start and stop webcam streaming.
• Flip between front-facing and rear-facing cameras (if available).
• Take photos and capture webcam frames as base64-encoded images.
• Store and retrieve the last selected camera choice using local storage.

Installation

Use Git Clone

git https://github.com/iguilhermeluis/JSnapCam.git

OR Use NPM

npm install jsnapcam
# or
yarn add jsnapcam

To use the JSnapCam in your project, you can either include the source code directly in your JavaScript bundle or import the class from a module.

Usage

1. Include script tag in html

<script
  type="text/javascript"
  src="https://unpkg.com/jsnapcam/dist/jsnapcam.min.js"
></script>

or Import into javascript

import Webcam from "jsnapcam";

2. Place elements in HTML

<video id="webcam" autoplay playsinline width="640" height="480"></video>
<canvas id="canvas" class="d-none"></canvas>
<audio id="snapSound" src="audio/snap.wav" preload="auto"></audio>

3. Call constructor in javascript

const webcamElement = document.getElementById("webcam");
const canvasElement = document.getElementById("canvas");
const snapSoundElement = document.getElementById("snapSound");
const webcam = new Webcam(
  webcamElement,
  "user",
  canvasElement,
  snapSoundElement
);

4. Start Webcam

webcam
  .start()
  .then((result) => {
    console.log("webcam started");
  })
  .catch((err) => {
    console.log(err);
  });

5. Take Photo

var picture = webcam.snap();

6. Stop Webcam

webcam.stop();

API Reference

Constructor

constructor(
  webcamElement,
  facingMode,
  canvasElement,
  snapSoundElement,
  ratio,
  activateAutofocusIfItExists,
  rememberLastCameraChoice
);

Creates a new instance of the JSnapCam.

• webcamElement: The HTML video element that will display the webcam stream.
• `facingMode (optional): The camera's facing mode (either "user" or "environment"). Default is "user".
• canvasElement (optional): The HTML canvas element for capturing images. Default is null.
• snapSoundElement (optional): The HTML audio element to play a sound when taking a photo. Default is null.
• ratio (optional): The aspect ratio for capturing images. Default is 16:9.
• activateAutofocusIfItExists (optional): Enables continuous autofocus if supported. Default is true.
• rememberLastCameraChoice (optional): Enable saving the last camera choice to local storage. Default is true.

Properties

• facingMode - Gets or sets the current facing mode of the camera (either "user" or "environment").

• webcamList - Gets the list of available video input devices (MediaDeviceInfo[]).

• webcamCount - Gets the number of available video input devices.

• selectedDeviceId - Gets or sets the ID of the selected video input device.

• streamList- Gets the list of camera streams (MediaStream[]).

Methods

• start(startStream) - Starts the webcam and begins streaming if specified.
• stream() - Starts streaming the webcam to the video element.
• stop() - Stops the webcam streaming and releases the media tracks.
• snap() - Takes a photo from the webcam and returns the image as a base64 string.
• flip() - Flips the camera's facing mode between "user" and "environment".
• getInfoVideoInputs() - Gets information about available video input devices.

Contributing ✨

Contributions to the JSnapCam are welcome! If you find any issues or have suggestions for improvements, feel free to open an issue or submit a pull request.

Thanks goes to these wonderful people (emoji key):

Guilherme L. Faustino 💻 📖 ⚠️

Credit

This project was built with inspiration and guidance from webcam-easy by Benson Ruan. Their work provided valuable insights and contributed to the development of this project.

License

The JSnapCam is licensed under the MIT License. Feel free to use it in your projects, both personal and commercial.