@e-group/material-lab/MediaStreamClipper/useGetVideoSnapshot.js

EGroup Team Lab - Incubator for EGroup Team experimental React components.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = useGetVideoSnapshot;

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _react = require("react");

const isBrowser = typeof document !== 'undefined';

function useGetVideoSnapshot(ref, options = {}) {
  const mirrored = options.mirrored;
  const getVideoSnapshot = (0, _react.useCallback)( /*#__PURE__*/function () {
    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(type, quality) {
      var canvas, ctx;
      return _regenerator.default.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            if (isBrowser) {
              _context.next = 2;
              break;
            }

            return _context.abrupt("return", Promise.reject(new Error('Not browser environment.')));

          case 2:
            canvas = document.createElement('canvas');

            if (!(!ref || !ref.current)) {
              _context.next = 5;
              break;
            }

            return _context.abrupt("return", new Promise(resolve => resolve(undefined)));

          case 5:
            canvas.width = ref.current.videoWidth;
            canvas.height = ref.current.videoHeight;
            ctx = canvas.getContext('2d'); // fixed ctx maybe null issue
            // https://github.com/microsoft/TypeScript/issues/19229

            if (ctx) {
              _context.next = 10;
              break;
            }

            throw new Error("2d context not supported or canvas already initialized");

          case 10:
            if (mirrored) {
              ctx.scale(-1, 1);
              ctx.drawImage(ref.current, 0, 0, canvas.width * -1, canvas.height);
            } else {
              ctx.drawImage(ref.current, 0, 0);
            }

            return _context.abrupt("return", new Promise((resolve, reject) => {
              try {
                canvas.toBlob(blob => {
                  resolve({
                    canvas,
                    ctx,
                    blob
                  });
                }, type, quality);
              } catch (error) {
                reject(error);
              }
            }));

          case 12:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));

    return function (_x, _x2) {
      return _ref.apply(this, arguments);
    };
  }(), [ref, mirrored]);
  return [getVideoSnapshot];
}