​
Publishing Media Streams

When a user decides to enable video or audio in a room using the Kwei SDK, several key steps occur behind the scenes:

​
Video/Audio Activation

  1. Activation Request: When enableVideo(true) or enableAudio(true) is called on the localParticipant object, the SDK sends a request to the user’s device to access the specified media type (video or audio).

  2. Media Stream Capture: The browser interfaces with the underlying hardware to capture the media stream. This involves accessing the camera and microphone of the device.

  3. Stream Initialization: Once access is granted, the media stream is initialized. This stream captures real-time video or audio data.

  4. Stream Handling:

    • The local stream then can be set as the source object for a video or audio HTML element on the user’s interface (localVideo.srcObject = room.localParticipant.getLocalStream()), allowing the user to see or hear their own media output.
    • This stream is also sent to the Kwei server, where it is managed and prepared to be distributed to other participants in the room.

​
Code Example:

// Enabling video
room.localParticipant
  .enableVideo(true)
  .then(() => {
    const localVideo = document.getElementById("localVideo");
    localVideo.srcObject = room.localParticipant.getLocalStream();
    console.log("Video enabled");
  })
  .catch((error) => {
    console.error("Error enabling video:", error);
  });

​
Subscribing to Media Streams

When one participant enables their video or audio, other participants in the same room need to handle these incoming media streams.

  1. Media Distribution: The Kwei server distributes the incoming stream to all other participants in the room.

  2. Receiving Streams: Other participants receive a notification about the new media stream through a TrackSubscribed event, which includes the media stream object and identifiers.

  3. Rendering Media:

    • Participants create new video or audio elements dynamically to render the incoming streams.
    • They then set the srcObject of these elements to the received stream, allowing them to see or hear the other participant.

​
Code Example:

// Handling incoming video streams
room.on("TrackSubscribed", (track, remoteProducerId) => {
  const videoElement = document.createElement("video");
  videoElement.autoplay = true;
  videoElement.srcObject = track;
  document.body.appendChild(videoElement);
  console.log("Subscribed to a new track:", remoteProducerId);
});

​
Important Considerations

  • Room Initialization: All these operations require that the room be properly initialized (room.init(...)). Attempting to enable or subscribe to media before the room initialization completes will result in errors.

  • Permissions: Users must grant appropriate permissions for accessing cameras and microphones. Failure to grant these permissions will prevent media from being captured.

  • Network Conditions: The quality of the media stream can be affected by network conditions. Kwei SDK typically handles variable network conditions to optimize the media quality.

  • Privacy and Security: Always ensure that participants are aware that video or audio is being captured and transmitted. Implement features that allow users to disable their media if needed.

​
Conclusion

Managing video and audio streams effectively requires careful initialization, permission handling, and network management. The Kwei SDK facilitates these processes, but developers must implement additional UI/UX elements and error handling to ensure a smooth experience for end-users.

Joining RoomHandling Disconnect