I set up a basic code in client-side to receive producer info from server-side and create tag with that.

try {
          const { id, producerId, kind, rtpParameters } = consumerInfo[key];

          const codecOptions = {};
          const consumer = await consumerTransportRef.current.consume({
            id,
            producerId,
            kind,
            rtpParameters,
            codecOptions,
          });

          const stream = new MediaStream();
          stream.addTrack(consumer.track);

          createMediaElement(kind, stream, user_id);
        } catch (error) {
          console.error(mediasoupErrorMessage.unknow, error);
        }
}

The createMediaElement funtion

function createMediaElement(kind, stream, userId) {
  let mediaElement;
  const container = document.getElementById(cameraPlaceholder);
  if (!container) {
    console.error(`Container element '${cameraPlaceholder}' not found!`);
    return;
  }

  if (kind === "audio") {
    mediaElement = document.createElement("audio");
    mediaElement.id = `remoteAudio_${userId}`;
    mediaElement.srcObject = stream;
    mediaElement.autoplay = true;
    mediaElement.controls = false;
    mediaElement.style.display = "none";
  } else if (kind === "video") {
    console.log("Video tracks:", stream.getVideoTracks());
    mediaElement = document.createElement("video");
    mediaElement.id = `remoteVideo_${userId}`;
    mediaElement.srcObject = stream;
    mediaElement.autoplay = true;
    mediaElement.playsInline = true;
    mediaElement.muted = true;
    mediaElement.style.width = "340px";
    mediaElement.style.height = "180px";
  }

  container.appendChild(mediaElement);
}

The problem is it always return me a black box, even when the kind, stream, userId is not null. I did try to log the stream, stream.active = true, id exists. Is there any things that I miss in here.