From 39194e925757ac9a43402ea90fc63b73b27cf2dc Mon Sep 17 00:00:00 2001
From: Patrick Shelley <pat.shelley92@gmail.com>
Date: Sun, 9 Apr 2023 18:26:05 +1000
Subject: [PATCH] Added function to set a custom media stream after
 initialisation

---
 src/index.ts | 49 +++++++++++++++++++++++++++++++------------------
 1 file changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 8aeed95..c8acab6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,10 @@
-import { register, MediaRecorder as ExtendableMediaRecorder, IMediaRecorder } from "extendable-media-recorder";
+import {
+  register,
+  MediaRecorder as ExtendableMediaRecorder,
+  IMediaRecorder,
+} from "extendable-media-recorder";
 import { ReactElement, useCallback, useEffect, useRef, useState } from "react";
-import { connect } from 'extendable-media-recorder-wav-encoder';
+import { connect } from "extendable-media-recorder-wav-encoder";
 
 export type ReactMediaRecorderRenderProps = {
   error: string;
@@ -16,6 +20,7 @@ export type ReactMediaRecorderRenderProps = {
   previewStream: MediaStream | null;
   previewAudioStream: MediaStream | null;
   clearBlobUrl: () => void;
+  setCustomMediaStream: (customMediaStream: MediaStream | null) => void;
 };
 
 export type ReactMediaRecorderHookProps = {
@@ -73,12 +78,14 @@ export function useReactMediaRecorder({
   stopStreamsOnStop = true,
   askPermissionOnMount = false,
 }: ReactMediaRecorderHookProps): ReactMediaRecorderRenderProps {
-  const mediaRecorder = useRef<IMediaRecorder | null >(null);
+  const mediaRecorder = useRef<IMediaRecorder | null>(null);
   const mediaChunks = useRef<Blob[]>([]);
   const mediaStream = useRef<MediaStream | null>(null);
   const [status, setStatus] = useState<StatusMessages>("idle");
   const [isAudioMuted, setIsAudioMuted] = useState<boolean>(false);
-  const [mediaBlobUrl, setMediaBlobUrl] = useState<string | undefined>(undefined);
+  const [mediaBlobUrl, setMediaBlobUrl] = useState<string | undefined>(
+    undefined
+  );
   const [error, setError] = useState<keyof typeof RecorderErrors>("NONE");
 
   useEffect(() => {
@@ -116,7 +123,7 @@ export function useReactMediaRecorder({
         mediaStream.current = stream;
       } else {
         const stream = await window.navigator.mediaDevices.getUserMedia(
-          requiredMedia,
+          requiredMedia
         );
         mediaStream.current = stream;
       }
@@ -134,7 +141,7 @@ export function useReactMediaRecorder({
 
     if (screen) {
       if (!window.navigator.mediaDevices.getDisplayMedia) {
-        throw new Error("This browser doesn\'t support screen capturing");
+        throw new Error("This browser doesn't support screen capturing");
       }
     }
 
@@ -143,14 +150,14 @@ export function useReactMediaRecorder({
         navigator.mediaDevices.getSupportedConstraints();
       const unSupportedConstraints = Object.keys(mediaType).filter(
         (constraint) =>
-          !(supportedMediaConstraints as { [key: string]: any })[constraint],
+          !(supportedMediaConstraints as { [key: string]: any })[constraint]
       );
 
       if (unSupportedConstraints.length > 0) {
         console.error(
           `The constraints ${unSupportedConstraints.join(
-            ",",
-          )} doesn't support on this browser. Please check your ReactMediaRecorder component.`,
+            ","
+          )} doesn't support on this browser. Please check your ReactMediaRecorder component.`
         );
       }
     };
@@ -165,7 +172,7 @@ export function useReactMediaRecorder({
     if (mediaRecorderOptions && mediaRecorderOptions.mimeType) {
       if (!MediaRecorder.isTypeSupported(mediaRecorderOptions.mimeType)) {
         console.error(
-          `The specified MIME type you supplied for MediaRecorder doesn't support this browser`,
+          `The specified MIME type you supplied for MediaRecorder doesn't support this browser`
         );
       }
     }
@@ -209,7 +216,8 @@ export function useReactMediaRecorder({
         return;
       }
       mediaRecorder.current = new ExtendableMediaRecorder(
-        mediaStream.current, mediaRecorderOptions || undefined,
+        mediaStream.current,
+        mediaRecorderOptions || undefined
       );
       mediaRecorder.current.ondataavailable = onRecordingActive;
       mediaRecorder.current.onstop = onRecordingStop;
@@ -235,7 +243,7 @@ export function useReactMediaRecorder({
     const [chunk] = mediaChunks.current;
     const blobProperty: BlobPropertyBag = Object.assign(
       { type: chunk.type },
-      blobPropertyBag || (video ? { type: "video/mp4" } : { type: "audio/wav" }),
+      blobPropertyBag || (video ? { type: "video/mp4" } : { type: "audio/wav" })
     );
     const blob = new Blob(mediaChunks.current, blobProperty);
     const url = URL.createObjectURL(blob);
@@ -280,6 +288,10 @@ export function useReactMediaRecorder({
     }
   };
 
+  const setCustomMediaStream = (customMediaStream: MediaStream | null) => {
+    mediaStream.current = customMediaStream;
+  };
+
   return {
     error: RecorderErrors[error],
     muteAudio: () => muteAudio(true),
@@ -291,12 +303,12 @@ export function useReactMediaRecorder({
     mediaBlobUrl,
     status,
     isAudioMuted,
-    previewStream: mediaStream.current ?
-      new MediaStream(mediaStream.current.getVideoTracks()) :
-      null,
-    previewAudioStream: mediaStream.current ?
-      new MediaStream(mediaStream.current.getAudioTracks()) :
-      null,
+    previewStream: mediaStream.current
+      ? new MediaStream(mediaStream.current.getVideoTracks())
+      : null,
+    previewAudioStream: mediaStream.current
+      ? new MediaStream(mediaStream.current.getAudioTracks())
+      : null,
     clearBlobUrl: () => {
       if (mediaBlobUrl) {
         URL.revokeObjectURL(mediaBlobUrl);
@@ -304,6 +316,7 @@ export function useReactMediaRecorder({
       setMediaBlobUrl(undefined);
       setStatus("idle");
     },
+    setCustomMediaStream,
   };
 }