element-call/src/video-grid/useMediaStream.js

import { useRef, useEffect } from "react";

export function useMediaStream(stream, audioOutputDevice, mute = false) {
  const mediaRef = useRef();

  useEffect(() => {
    console.log(
      `useMediaStream update stream mediaRef.current ${!!mediaRef.current} stream ${
        stream && stream.id
      }`
    );

    if (mediaRef.current) {
      if (stream) {
        mediaRef.current.muted = mute;
        mediaRef.current.srcObject = stream;
        mediaRef.current.play();
      } else {
        mediaRef.current.srcObject = null;
      }
    }
  }, [stream, mute]);

  useEffect(() => {
    if (
      mediaRef.current &&
      audioOutputDevice &&
      mediaRef.current !== undefined
    ) {
      console.log(`useMediaStream setSinkId ${audioOutputDevice}`);
      mediaRef.current.setSinkId(audioOutputDevice);
    }
  }, [audioOutputDevice]);

  useEffect(() => {
    const mediaEl = mediaRef.current;

    return () => {
      if (mediaEl) {
        // Ensure we set srcObject to null before unmounting to prevent memory leak
        // https://webrtchacks.com/srcobject-intervention/
        mediaEl.srcObject = null;
      }
    };
  }, []);

  return mediaRef;
}