react-hook-recorder - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

dist/useRecorder.d.ts

@@ -8,10 +8,21 @@ /// <reference types="dom-mediacapture-record" />
 };
-declare function useRecorder(constraints?: Partial<MediaStreamConstraints>, options?: Partial<MediaRecorderOptions>): {
+declare type StopRecordingCallback = (blob: Blob, url: String) => void;
+export declare const enum RecorderStatus {
+    "IDLE" = "idle",
+    "INIT" = "init",
+    "RECORDING" = "recording"
+}
+export declare const enum RecorderError {
+    "STREAM_INIT" = "stream-init",
+    "RECORDER_INIT" = "recorder-init"
+}
+declare function useRecorder(mediaStreamConstraints?: Partial<MediaStreamConstraints>, mediaRecorderOptions?: Partial<MediaRecorderOptions>): {
     mediaRecorder: MediaRecorder | undefined;
+    stream: MediaStream | undefined;
     startRecording: () => void;
-    stopRecording: (callback: (blob: Blob, url: String) => void) => () => void;
-    recording: boolean;
+    stopRecording: (callback: StopRecordingCallback) => () => void;
     register: (element: HTMLVideoElement) => void;
-    ready: boolean;
+    status: RecorderStatus;
+    error: RecorderError | undefined;
 };
 export default useRecorder;

dist/useRecorder.js

@@ -55,47 +55,42 @@ "use strict";
 };
-function useRecorder(constraints, options) {
+function useRecorder(mediaStreamConstraints, mediaRecorderOptions) {
     var _this = this;
-    var videoRef = react_1.useRef();
     var mediaRecorderRef = react_1.useRef();
     var streamRef = react_1.useRef();
-    var _a = react_1.useState(false), recording = _a[0], setRecording = _a[1];
-    var _b = react_1.useState(false), ready = _b[0], setReady = _b[1];
+    var _a = react_1.useState("init" /* INIT */), status = _a[0], setStatus = _a[1];
+    var _b = react_1.useState(), error = _b[0], setError = _b[1];
     var register = react_1.useCallback(function (element) {
-        videoRef.current = element;
+        initStream(element).then(initMediaRecorder).catch(setError);
     }, []);
     var startRecording = react_1.useCallback(function () {
         var _a;
-        setRecording(true);
+        setStatus("recording" /* RECORDING */);
         (_a = mediaRecorderRef.current) === null || _a === void 0 ? void 0 : _a.start();
     }, []);
-    var stopRecording = react_1.useCallback(function (callback) {
-        return function () {
-            var _a;
-            setRecording(false);
-            if (mediaRecorderRef.current) {
-                mediaRecorderRef.current.ondataavailable = function (_a) {
-                    var blob = _a.data;
-                    callback(blob, URL.createObjectURL(blob));
-                };
-                (_a = mediaRecorderRef.current) === null || _a === void 0 ? void 0 : _a.stop();
-            }
-        };
-    }, []);
-    var initStream = react_1.useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
-        var _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+    var stopRecording = react_1.useCallback(function (callback) { return function () {
+        var _a;
+        setStatus("idle" /* IDLE */);
+        if (mediaRecorderRef.current) {
+            mediaRecorderRef.current.ondataavailable = function (_a) {
+                var blob = _a.data;
+                callback(blob, URL.createObjectURL(blob));
+            };
+            (_a = mediaRecorderRef.current) === null || _a === void 0 ? void 0 : _a.stop();
+        }
+    }; }, []);
+    var initStream = react_1.useCallback(function (videoRef) { return __awaiter(_this, void 0, void 0, function () {
+        var _a, err_1;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
-                    _c.trys.push([0, 2, , 3]);
+                    _b.trys.push([0, 2, , 3]);
                     _a = streamRef;
-                    return [4 /*yield*/, navigator.mediaDevices.getUserMedia(__assign(__assign({}, defaultContraints), (constraints ? __assign({}, constraints) : {})))];
+                    return [4 /*yield*/, navigator.mediaDevices.getUserMedia(__assign(__assign({}, defaultContraints), (mediaStreamConstraints ? __assign({}, mediaStreamConstraints) : {})))];
                 case 1:
-                    _a.current = _c.sent();
-                    if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) {
-                        videoRef.current.srcObject = streamRef.current;
-                    }
+                    _a.current = _b.sent();
+                    videoRef.srcObject = streamRef.current;
                     return [2 /*return*/, streamRef.current];
                 case 2:
-                    _b = _c.sent();
-                    throw new Error("Unable to get stream");
+                    err_1 = _b.sent();
+                    throw new Error("stream-init" /* STREAM_INIT */);
                 case 3: return [2 /*return*/];
@@ -106,12 +101,15 @@ }
     var initMediaRecorder = react_1.useCallback(function (stream) {
-        if ((options === null || options === void 0 ? void 0 : options.mimeType) && !MediaRecorder.isTypeSupported(options.mimeType)) {
-            console.warn("MIME type " + options.mimeType + " not supported");
+        if ((mediaRecorderOptions === null || mediaRecorderOptions === void 0 ? void 0 : mediaRecorderOptions.mimeType) &&
+            !MediaRecorder.isTypeSupported(mediaRecorderOptions.mimeType)) {
+            console.warn("MIME type " + mediaRecorderOptions.mimeType + " not supported");
         }
-        var recorder = new MediaRecorder(stream, __assign({}, options) || {});
-        mediaRecorderRef.current = recorder;
-        setReady(true);
+        try {
+            var recorder = new MediaRecorder(stream, __assign({}, mediaRecorderOptions) || {});
+            mediaRecorderRef.current = recorder;
+            setStatus("idle" /* IDLE */);
+        }
+        catch (_a) {
+            throw new Error("recorder-init" /* RECORDER_INIT */);
+        }
     }, []);
-    react_1.useEffect(function () {
-        initStream().then(initMediaRecorder);
-    }, [initStream, initMediaRecorder]);
     if (!navigator.mediaDevices) {
@@ -122,9 +120,10 @@ throw new Error("Navigator is not compatible");
         mediaRecorder: mediaRecorderRef === null || mediaRecorderRef === void 0 ? void 0 : mediaRecorderRef.current,
+        stream: streamRef === null || streamRef === void 0 ? void 0 : streamRef.current,
         startRecording: startRecording,
         stopRecording: stopRecording,
-        recording: recording,
         register: register,
-        ready: ready,
+        status: status,
+        error: error,
     };
 }
 exports.default = useRecorder;

package.json

 {
   "name": "react-hook-recorder",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "React based hook to use native MediaRecorder API",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/useRecorder.ts

@@ -17,3 +17,3 @@ import { useCallback, useRef, useState } from "react";
 
-export enum RecorderStatus {
+export const enum RecorderStatus {
   "IDLE" = "idle",
@@ -24,3 +24,3 @@ "INIT" = "init",
 
-export enum RecorderError {
+export const enum RecorderError {
   "STREAM_INIT" = "stream-init",
@@ -27,0 +27,0 @@ "RECORDER_INIT" = "recorder-init",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15332

increased by3.36%

Lines of code

273

increased by3.8%

No dependency changes