Options
All
  • Public
  • Public/Protected
  • All
Menu

Module media

Provides classes and functions related to the rendering process of different media.

Usage

 
import { Composition, startDevice } from './brooxMedia.js';

Composition

Allows to create an image based on many media objects (images, videos, etc.).

// example
const composition = new Composition(width, height, borderWidth);
composition.addElement(webcam, 0, 0, webcam.videoWidth, webcam.videoHeight, 1, false);
composition.get().then(blob => {
   image.src = URL.createObjectURL(blob);
)};

Allows to record a stream. 
// example
const recorder = new Recorder(stream);
recorder.start();
setTimeout(() => {
  recorder.stop().then(blob => {
    console.log(blob);
  )};
}, 10000);

Functions

Index

Classes

Functions

Functions

blobToImage

  • blobToImage(blob: Blob): Promise<unknown>

  • Converts a blob to an image.

    Parameters

    • blob: Blob

    Returns Promise<unknown>

    Promise with the resulting image.

    // example
    blobToImage(blobg).then(image => {});

drawElement

  • drawElement(element: CanvasImageSource, context: CanvasRenderingContext2D, sourceWidth: number, sourceHeight: number, destinationWidth: number, destinationHeight: number, destinationX: number, destinationY: number, mirror?: boolean): void

  • Renders an element in the given 2d context.

    Parameters

    • element: CanvasImageSource

      Element to draw in context.

    • context: CanvasRenderingContext2D

      2d context.

    • sourceWidth: number

      Source width.

    • sourceHeight: number

      Source height.

    • destinationWidth: number

      Destination width.

    • destinationHeight: number

      Destination height.

    • destinationX: number

      Destination x position.

    • destinationY: number

      Destination y position.

    • mirror: boolean = false

      Value indicating whether to mirror the image before.

      // example
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      const context = canvas.getContext('2d');
      const element = document.getElementById('img')
      drawElement(element, context, element.width, element.height, width, height, 0, 0, false);

    Returns void

drawPartOfElement

  • drawPartOfElement(element: CanvasImageSource, context: CanvasRenderingContext2D, cutToScale: boolean, sourceWidth: number, sourceHeight: number, sourceX: number, sourceY: number, destinationWidth: number, destinationHeight: number, destinationX: number, destinationY: number, mirror?: boolean): void

  • Renders an element in the given 2d context.

    Parameters

    • element: CanvasImageSource

      Element to draw in context.

    • context: CanvasRenderingContext2D

      2d context.

    • cutToScale: boolean
    • sourceWidth: number

      Source width.

    • sourceHeight: number

      Source height.

    • sourceX: number

      Source x position.

    • sourceY: number

      Source y position.

    • destinationWidth: number

      Destination width.

    • destinationHeight: number

      Destination height.

    • destinationX: number

      Destination x position.

    • destinationY: number

      Destination y position.

    • mirror: boolean = false

      Value indicating whether to mirror the image before.

      // example
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      const context = canvas.getContext('2d');
      const element = document.getElementById('img')
      drawPartOfElement(element, context, false, element.width, element.height, 0, 0, width, height, 0, 0, false);

    Returns void

drawVideo

  • drawVideo(video: HTMLVideoElement, context: CanvasRenderingContext2D, destinationWidth: number, destinationHeight: number, destinationX: number, destinationY: number, mirror?: boolean): void

  • Renders a video element in the given 2d context.

    Parameters

    • video: HTMLVideoElement

      Video to draw in context.

    • context: CanvasRenderingContext2D

      2d context.

    • destinationWidth: number

      Destination width.

    • destinationHeight: number

      Destination height.

    • destinationX: number

      Destination x position.

    • destinationY: number

      Destination y position.

    • mirror: boolean = false

      Value indicating whether to mirror the image before.

      // example
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      const context = canvas.getContext('2d');
      const video = document.getElementById('video')
      drawElement(video, context, width, height, 0, 0, false);

    Returns void

getAvailableDevices

  • getAvailableDevices(): Promise<any[]>

  • Gets all available devices.

    Returns Promise<any[]>

    Promise with list of available devices.

    // example
    getAvailableDevices().then(devices => {});

getDeviceId

  • getDeviceId(name: string): Promise<string>

  • Gets the id for the given device name.

    Parameters

    • name: string

      Device name.

    Returns Promise<string>

    Promise with device id if found. Error otherwise.

    // example
    getDeviceId('OBS Virtual Camera').then(id => {
      startDevice(id, 1080, 1920).then(stream => {});
    });

startDevice

  • startDevice(deviceId: string, width: number, height: number): Promise<MediaStream>

  • Starts the media stream.

    Parameters

    • deviceId: string

      Webcam identifier.

    • width: number

      Webcam width.

    • height: number

      Webcam height.

    Returns Promise<MediaStream>

    MediaStream object to display webcam content.

    // example
    getDeviceId('OBS Virtual Camera').then(id => {
      startDevice(id, 1080, 1920).then(stream => {});
    });

Generated using TypeDoc