react-hook-recorder - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

package.json

 {
   "name": "react-hook-recorder",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "React based hook to use native MediaRecorder API",
@@ -9,3 +9,3 @@ "main": "dist/index.js",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "build-storybook": "build-storybook -o ./storybook",
     "prepublish": "rimraf ./dist && tsc"
@@ -12,0 +12,0 @@ },

README.md

@@ -12,3 +12,3 @@ # react-hook-recorder
 ```javascript
-import { useState, useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import useRecorder from "react-hook-recorder";
@@ -22,28 +22,30 @@
 
-  const {
-    startRecording,
-    stopRecording,
-    register,
-    recording,
-    ready,
-  } = useRecorder();
+  const { startRecording, stopRecording, register, status } = useRecorder();
 
   return (
     <div>
-      <video ref={register} autoPlay muted>
-        VideoRTC
-      </video>
-      {url && <video controls src={url} />}
-      {!!ready && (
+      <video ref={register} autoPlay muted playsInline />
+      {url && (
         <>
-          <button onClick={startRecording} disabled={recording}>
-            start
+          Recorded video&nbsp;:
+          <video controls src={url} />
+        </>
+      )}
+      {status !== "init" && (
+        <>
+          <button onClick={startRecording} disabled={status === "recording"}>
+            Start Recording
           </button>
-          <button onClick={stopRecording(onStop)} disabled={!recording}>
-            stop
+          <button
+            onClick={stopRecording(onStop)}
+            disabled={status !== "recording"}
+          >
+            Stop Recording
           </button>
         </>
       )}
-
-      <div>{recording ? "Recording" : "Standby"}</div>
+      <div>
+        <strong>Status :</strong>&nbsp;
+        {status}
+      </div>
     </div>
@@ -69,8 +71,16 @@ );
 
-| Property       | Type            | Description                        |
-| -------------- | --------------- | ---------------------------------- |
-| mediaRecorder  | `MediaRecorder` | MediaRecorder instance ref         |
-| startRecording | `function`      | function to start recording        |
-| stopRecording  | `function`      | function to stop recording         |
-| register       | `function`      | function to register video element |
-| ready          | `boolean`       | true when stream is ready          |
+| Property       | Type             | Args                                        | Description                        |
+| -------------- | ---------------- | ------------------------------------------- | ---------------------------------- |
+| mediaRecorder  | `MediaRecorder`  |                                             | MediaRecorder instance ref         |
+| stream         | `MediaStream`    |                                             | MediaStream instance ref           |
+| startRecording | `function`       |                                             | function to start recording        |
+| stopRecording  | `function`       | `function(blob: Blob, url: string) => void` | function to stop recording         |
+| register       | `function`       | `HTMLVideoElement`                          | function to register video element |
+| status         | `RecorderStatus` |                                             | return recorder status             |
+| error          | `RecorderError`  |                                             | return recorder error              |
+
+## Types
+
+#### _`enum RecorderStatus`_ : _`"idle" | "init" | "recording"`_
+
+#### _`enum RecorderError`_ : _`"stream-init" | "recorder-init"`_

src/useRecorder.ts

@@ -15,2 +15,15 @@ import { useCallback, useRef, useState } from "react";
 
+type StopRecordingCallback = (blob: Blob, url: String) => void;
+
+export enum RecorderStatus {
+  "IDLE" = "idle",
+  "INIT" = "init",
+  "RECORDING" = "recording",
+}
+
+export enum RecorderError {
+  "STREAM_INIT" = "stream-init",
+  "RECORDER_INIT" = "recorder-init",
+}
+
 function useRecorder(
@@ -22,11 +35,11 @@ mediaStreamConstraints?: Partial<MediaStreamConstraints>,
   const streamRef = useRef<MediaStream>();
-  const [recording, setRecording] = useState<boolean>(false);
-  const [ready, setReady] = useState<boolean>(false);
+  const [status, setStatus] = useState<RecorderStatus>(RecorderStatus.INIT);
+  const [error, setError] = useState<RecorderError>();
 
   const register = useCallback((element: HTMLVideoElement) => {
-    initStream(element).then(initMediaRecorder);
+    initStream(element).then(initMediaRecorder).catch(setError);
   }, []);
 
   const startRecording = useCallback(() => {
-    setRecording(true);
+    setStatus(RecorderStatus.RECORDING);
     mediaRecorderRef.current?.start();
@@ -36,14 +49,12 @@ }, []);
   const stopRecording = useCallback(
-    (callback: (blob: Blob, url: String) => void) => {
-      return () => {
-        setRecording(false);
-        if (mediaRecorderRef.current) {
-          mediaRecorderRef.current.ondataavailable = ({
-            data: blob,
-          }: BlobEvent) => {
-            callback(blob, URL.createObjectURL(blob));
-          };
-          mediaRecorderRef.current?.stop();
-        }
-      };
+    (callback: StopRecordingCallback) => () => {
+      setStatus(RecorderStatus.IDLE);
+      if (mediaRecorderRef.current) {
+        mediaRecorderRef.current.ondataavailable = ({
+          data: blob,
+        }: BlobEvent) => {
+          callback(blob, URL.createObjectURL(blob));
+        };
+        mediaRecorderRef.current?.stop();
+      }
     },
@@ -61,4 +72,4 @@ []
       return streamRef.current;
-    } catch {
-      throw new Error("Unable to get stream");
+    } catch (err) {
+      throw new Error(RecorderError.STREAM_INIT);
     }
@@ -75,8 +86,12 @@ }, []);
 
-    const recorder = new MediaRecorder(
-      stream,
-      { ...mediaRecorderOptions } || {}
-    );
-    mediaRecorderRef.current = recorder;
-    setReady(true);
+    try {
+      const recorder = new MediaRecorder(
+        stream,
+        { ...mediaRecorderOptions } || {}
+      );
+      mediaRecorderRef.current = recorder;
+      setStatus(RecorderStatus.IDLE);
+    } catch {
+      throw new Error(RecorderError.RECORDER_INIT);
+    }
   }, []);
@@ -90,7 +105,8 @@
     mediaRecorder: mediaRecorderRef?.current,
+    stream: streamRef?.current,
     startRecording,
     stopRecording,
-    recording,
     register,
-    ready,
+    status,
+    error,
   };
@@ -97,0 +113,0 @@ }

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

17017

increased by11.86%

Lines of code

347

increased by9.81%

Number of lines in readme file

84

increased by13.51%

No dependency changes