Broadcast
component provides an easy way to livestream video or audio,
including camera and screen sources.
It automatically handles WebRTC connection and allows extremely low latency
livestreaming.
Usage
useCreateStream
, and
the streamKey
was passed to the Broadcast component.Configuration
streamKey
streamKey
passed to the Broadcast
component is used to connect to the
WebRTC ingest URL.
title
Thetitle
for the content. This is highly recommended, since it is used for
accessibility labels in the Broadcast. If you
do not want to show the title visually, see showTitle
.
showTitle
Enables/disables the title component.displayMediaOptions
The display media stream options to use when requesting screen share. This is usually a set of audio and videoMediaTrackConstraints
which are passed to the browser to limit the sources available to the user.
aspectRatio
Sets the aspect ratio for the content. Highly recommended for a great broadcasting experience (for more information, see Cumulative Layout Shift). Defaults to16to9
.
controls
Configures the timeout for autohiding controls, default volume, and (only on web) if keyboard hotkeys for controlling the broadcast are enabled.muted
Sets the video to muted when the broadcast started.objectFit
Sets the video’s object fit property. Defaults tocontain
. cover
is usually used when there is a
guarantee that the aspectRatio
matches the content displayed in the Broadcast.
showPipButton
Shows the Picture-in-Picture button to the left of the fullscreen button. Defaults tofalse
. See children for an example on how to use the
underlying <PictureInPictureButton />
.
We support both the w3c standard
(which most modern browsers support), as well as the older Safari/iOS
spec.
See the browsers which support Picture-in-Picture on
caniuse.
theme
Sets the Player-specific theme overrides. It is recommended to useLivepeerConfig
for any global app styles,
and the theme
prop to override those styles on a per-Broadcast basis.
children
Overrides the custom controls for the Player. See theBroadcast
default controls
for more details on how the ControlsContainer
component is used.
This can be used alongside renderChildrenOutsideContainer
to render the
children outside of the aspect ratio container. This is used for custom
controls, so children of the Player can use useMediaController
without any
parent elements.
mediaElementRef
Sets the React callbackref
passed to the underlying media element. Useful when integrating with third party
tools, or when access to the underlying video element is needed (usually it
isn’t!). Simple refs are not supported - only callback refs (which will be
called when the underlying media element is set/updated on initial render).
onPlaybackStatusUpdate
Callback called when the Broadcast store status updates. This should be used withplaybackStatusSelector
to limit state updates. This allows developers
to use the underlying state of the Broadcast component in their UI.