npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@eatsjobs/media-mock

v0.2.0

Published

Media-Mock is a JavaScript library that simulates media devices (like webcams) in web applications, allowing developers to test and debug media constraints, device configurations, and stream functionality without needing physical devices. This is particul

Downloads

427

Readme

@eatsjobs/media-mock

Media-Mock is a JavaScript library that simulates media devices (like webcams) in web applications, allowing developers to test and debug media constraints, device configurations, and stream functionality without needing physical devices. This is particularly useful in scenarios where hardware or user permissions aren't available or desired, such as in automated testing environments.


npm version build license issues PRs Welcome TypeScript Node Version codecov

Table of Contents


Key Features

  • Device Simulation: Simulate configurations for various devices like iPhone, desktop, or custom configurations.
  • Constraint Support: Set custom video constraints such as resolution, frame rate, and more.
  • Canvas-based Mock Stream: Use an image as a video input source and capture it as a canvas stream.
  • Debug Mode: Visualize the mock stream by displaying the canvas and image in the DOM.
  • Easy Integration with Testing: Ideal for testing media applications with tools like Vitest, Jest or Playwright.

Installation

Install with npm:

NPM or JSR

npm install @eatsjobs/media-mock

Install with jsr:

npx jsr add @eatsjobs/media-mock

Usage

Basic Usage

To start using MediaMock, initialize the library, configure a mock media stream, and then request a stream from navigator.mediaDevices.

import { MediaMock, devices } from "@eatsjobs/media-mock";

// Configure and initialize MediaMock with default settings
MediaMock
  .setMediaURL("./assets/640x480-sample.png")
  .mock(devices["iPhone 12"]); // or devices["Samsung Galaxy M53"] for Android, "Mac Desktop" for desktop mediaDevice emulation

// Set up a video element to display the stream
const videoElement = document.createElement("video");
document.body.appendChild(videoElement);

videoElement.srcObject = await navigator.mediaDevices.getUserMedia({ video: true });
videoElement.play();

const devices = await navigator.mediaDevices.enumerateDevices();
const supportedConstraints = await navigator.mediaDevices.getSupportedConstraints();
console.log(devices, supportedConstraints);

Configuring a Custom Device and Constraints

You can set a specific device and define video constraints such as resolution and frame rate.

MediaMock
  .setMediaURL("./assets/640x480-sample.png")
  .mock(devices["Mac Desktop"])

API Documentation

MediaMock

The main class of the library, used to configure, initialize, and manage the mock media devices.

setMediaURL(path: string): MediaMock

Sets a custom image URL or a video url to be uses as the source and returns the instance for chaining.

  • path: string - Path to the image.

enableDebugMode(): MediaMock

Enables debug mode, appending the mock canvas and image elements to the DOM for visualization. This allows you to see what’s being used as a video feed during tests.

mock(device: DeviceConfig, options?: MockOptions): MediaMock

Initializes the mock with a specific device configuration and enables specified media device methods for testing.

  • device: DeviceConfig - The device configuration preset to use (e.g., devices["iPhone 12"]).
  • options: MockOptions - An optional configuration to enable specific navigator.mediaDevices methods, such as getUserMedia and enumerateDevices.

unmock(): MediaMock

Restores original navigator.mediaDevices methods by removing the mock properties and stops any ongoing mock stream. Useful for cleanup after testing.


MockOptions

Defines which navigator.mediaDevices methods should be mocked:

  • getUserMedia: boolean - Enables navigator.mediaDevices.getUserMedia.
  • getSupportedConstraints: boolean - Enables navigator.mediaDevices.getSupportedConstraints.
  • enumerateDevices: boolean - Enables navigator.mediaDevices.enumerateDevices.

Settings

Interface that contains the mock settings for image URL, device configuration, and video constraints.

  • imageURL: string - The URL of the image used as the video source.
  • device: DeviceConfig - Specifies the configuration for the mock device, such as resolution and media information.
  • constraints: Record<keyof MediaTrackSupportedConstraints & "torch", boolean> - Specifies video constraints, like resolution and frame rate, for testing against browser media APIs.

DeviceConfig

Represents configuration settings for mock devices, including available video resolutions and media device information like device ID and group ID. Used in MediaMock.mock() to apply device-specific settings.

interface DeviceConfig {
  videoResolutions: { width: number; height: number }[];
  mediaDeviceInfo: MockMediaDeviceInfo[];
  supportedConstraints: Record<
    keyof MediaTrackSupportedConstraints & "torch",
    boolean
  >;
}

interface MockMediaDeviceInfo extends MediaDeviceInfo {
  getCapabilities: () => MediaTrackCapabilities;
}

Debugging

enableDebugMode() appends the canvas and the loaded image used by the canvas to the document.body.


import { MediaMock, devices } from "@eatsjobs/media-mock";

// Configure and initialize MediaMock with default settings
MediaMock
  .setMediaURL("./assets/640x480-sample.png")
  .enableDebugMode()
  .mock(devices["iPhone 12"]); // or devices["Samsung Galaxy M53"] for Android, "Mac Desktop" for desktop mediaDevice emulation

// Set up a video element to display the stream
const videoElement = document.createElement("video");
document.body.appendChild(videoElement);

videoElement.srcObject = await navigator.mediaDevices.getUserMedia({ video: true });
videoElement.play();

Similar libraries