RTC Stream - React Native

using RTCView in your app

To display participant video and screen share, you have to use RTCView component.

Using RTCView

import { MediaStream, RTCView } from "@videosdk.live/react-native-sdk";

<RTCView
  streamURL={new MediaStream([webcamStream.track]).toURL()}
  objectFit="cover"
  style={{ flex: 1 }}
/>;

RTCView renders only URLs built from the SDK's streams and tracks:

• For a participant's webcamStream or screenShareStream from useParticipant(), wrap its track in a MediaStream and use new MediaStream([stream.track]).toURL().
• For a CustomStreamTrack you created with createCameraVideoTrack(), use track.toURL().

RTCView shows video only. Audio plays without a view.

Parameters

setMirror

• type : boolean

• OPTIONAL

• default value : false

• Indicates whether the video specified by 'streamURL' should be mirrored during rendering. Commonly, applications choose to mirror the user-facing camera.

---

objectFit

• type : "contain" | "cover"

• OPTIONAL

• default value : "cover"

• contain shows the whole video inside the view. cover fills the view and crops the video.

---

streamURL

• type : string

• REQUIRED

• The URL from MediaStream.toURL() or CustomStreamTrack.toURL(). null renders nothing.

---

zOrder

• type : number

• OPTIONAL

• default value : 0

• Android only. A value other than 0 draws this video above other videos, for example a small self-view placed over a full-screen video.

---

style

• type : ViewStyle or an array of styles

• OPTIONAL

• RTCView also accepts the other standard React Native View props.

---

RTCStream

webcamStream, micStream, screenShareStream and screenShareAudioStream from useParticipant(), and the stream that onStreamEnabled receives, are RTCStream objects. useRTCStream() wraps one by its id.

Member	Description
id	Id of the stream.
kind	"audio", "video", "share" or "shareAudio".
participantId	Id of the participant the stream belongs to.
codec	Codec of the stream.
track	The stream's MediaStreamTrack. Pass new MediaStream([stream.track]).toURL() to RTCView.
paused	true while you have paused the stream.
pause()	Stops receiving a remote participant's stream on this device. Returns a Promise. See pause().
resume()	Resumes a stream you paused. Returns a Promise. See resume().
on("state", listener)	Calls listener({ state, timestamp }) when a remote video or share stream freezes, gets stuck or ends. See onStreamStateChanged.
off("state", listener)	Removes a listener added with on(). Pass the same function.

RTCStream has no toURL(). To render it, wrap its track in a MediaStream as shown above.

MediaStream

MediaStream is a named export of @videosdk.live/react-native-sdk. Build one from a track with new MediaStream([track]).

Member	Description
id	Id of the stream.
active	false once the stream has been released.
toURL()	Returns the URL to pass to RTCView's streamURL, or null when the stream has no track to render.
getTracks()	Every track in the stream.
getVideoTracks()	The video and screen-share tracks.
getAudioTracks()	The microphone and screen-share audio tracks.
release()	Releases the stream. Does nothing for a stream the SDK owns.