Fix screen recorder and introduce previewStream

Author: DeltaCircuit

README.md

@@ -1,11 +1,16 @@
 # react-media-recorder :o2: :video_camera: :microphone: :computer:
 
-`react-media-recorder` is a fully typed react component with render prop that can be used to record audio/video streams or the screens using [MediaRecorder](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) API.
+`react-media-recorder` is a fully typed react component with render prop that can be used to:
+
+- Record audio/video
+- Record screen
+
+using [MediaRecorder API](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder).
 
 ## Installation
 
 ```
-npm i -S react-media-recorder
+npm i react-media-recorder
 ```
 
 or
@@ -168,6 +173,37 @@ A `blob` url that can be wired to an `<audio />`, `<video />` or an `<a />` elem
 
 A boolean prop that tells whether the audio is muted or not.
 
+#### previewStream
+
+If you want to create a live-preview of the video to the user, you can use this _stream_ and attach it to a `<video />` element. Please note that this is a **muted stream**. This is by design to get rid of internal microphone feedbacks on machines like laptop.
+
+For example:
+
+```tsx
+const VideoPreview = ({ stream }: { stream: MediaStream | null }) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (videoRef.current && stream) {
+      videoRef.current.srcObject = stream;
+    }
+  }, [stream]);
+  if (!stream) {
+    return null;
+  }
+  return <video ref={videoRef} width={500} height={500} autoPlay controls />;
+};
+
+const App = () => (
+  <ReactMediaRecorder
+    video
+    render={({ videoPreviewStream }) => {
+      return <VideoPreview stream={videoPreviewStream} />;
+    }}
+  />
+);
+```
+
 ## Contributing
 
 Feel free to submit a PR if you found a bug (I might've missed many! :grinning:) or if you want to enhance it further.

src/index.ts

@@ -11,6 +11,7 @@ type ReactMediaRecorderRenderProps = {
   mediaBlobUrl: null | string;
   status: StatusMessages;
   isAudioMuted: boolean;
+  previewStream: MediaStream | null;
 };
 
 type ReactMediaRecorderProps = {
@@ -76,7 +77,7 @@ export const ReactMediaRecorder = ({
       if (screen) {
         //@ts-ignore
         const stream = (await window.navigator.mediaDevices.getDisplayMedia({
-          video
+          video: video || true
         })) as MediaStream;
         if (audio) {
           const audioStream = await window.navigator.mediaDevices.getUserMedia({
@@ -88,12 +89,12 @@ export const ReactMediaRecorder = ({
             .forEach(audioTrack => stream.addTrack(audioTrack));
         }
         mediaStream.current = stream;
+      } else {
+        const stream = await window.navigator.mediaDevices.getUserMedia(
+          requiredMedia
+        );
+        mediaStream.current = stream;
       }
-
-      const stream = await window.navigator.mediaDevices.getUserMedia(
-        requiredMedia
-      );
-      mediaStream.current = stream;
       setStatus("idle");
     } catch (error) {
       setError(error.name);
@@ -224,6 +225,9 @@ export const ReactMediaRecorder = ({
     stopRecording,
     mediaBlobUrl,
     status,
-    isAudioMuted
+    isAudioMuted,
+    previewStream: mediaStream.current
+      ? new MediaStream(mediaStream.current.getVideoTracks())
+      : null
   });
 };