react-canvas-recorder

Canvas Element Recorder for React, with really simple API

Install

npm install --save react-canvas-recorder

yarn add react-canvas-recorder

About

It a wrapper around MediaRecorder for supported browsers check:

API

interface CanvasRecorder {
  start: () => void
  stop: () => void
  save: () => Blob
  createStream: <T extends HTMLCanvasElement>(canvas: T) => void
  captureMediaStream: <T extends MediaStream>(mediaStream: T) => void
  recordScreen: () => void
}

Usage

Record canvas element

import React, { Component, useRef, useCallback } from 'react'
import recorder from 'react-canvas-recorder';

const Component () => {
  const ref = useRef()

  const startRecording = useCallback(() => {
    recorder.createStream(ref.current);
    recorder.start();
  }, [ref])

  const stopRecording = useCallback(() => {
    recorder.stop();
    const file = recorder.save();
    // Do something with the file
  }, [])


  return (
    <>
      <button onClick={startRecording}>Start Recording</button>
      <button onClick={stopRecording}>Stop Recording</button>

      <canvas ref={ref} />
    </>
  )
}

Record entire screen

import React, { Component, useRef, useCallback } from 'react'
import recorder from 'react-canvas-recorder';

const Component () => {

  const startRecording = useCallback(async () => {
    await recorder.recordScreen();
    recorder.start();
  }, [ref])

  const stopRecording = useCallback(() => {
    recorder.stop();
    const file = recorder.save();
    // Do something with the file
  }, [])


  return (
    <>
      <button onClick={startRecording}>Start Recording</button>
      <button onClick={stopRecording}>Stop Recording</button>

      <div>Some Content...</div>
    </>
  )
}

License

MIT © rasha08