Docs
Get startedGuidesReferenceBlogChangelog
  1. Home
  2. Reference Docs
  3. React Native
  4. Instance Methods
  5. startRecording()

startRecording()
Scale plan only

startRecording()

If server-side recording (cloud or rtp-tracks) is enabled for the room, this starts a recording of all meeting participants that have their cams and/or mics on. Devices that are off will not be recorded. For example, if a participant's cam is off, it will not be recorded. Same goes for the mic.

Has no effect if recording is not enabled.

In order to turn on recording and listen for recording events, you'll need to be on the Scale plan. There is also a per minute recording fee. Please reach out if you have any questions about Scale.

Control "cloud" recording layouts

Beta feature

Heads up! You must be running react-native-daily-js 0.18.0+ to try out the "cloud" recording type.

If you're using the cloud recording type, you can pass configuration properties to startRecording() to control the look and feel of the recording.

The options currently include:

  • height, width: Can be specified to control the resolution of the live stream

  • backgroundColor: Specifies the background color of the stream, formatted as #rrggbb or #aarrggbb string.

  • fps: Specifies the video frame rate per second.

  • layout: an object specifying the way participants’ videos are laid out in the live stream. A preset key with one of the following values must be provided:

    • 'default': This is the default grid layout, which renders participants in a grid, or in a vertical grid to the right, if a screen share is enabled. Optionally, a max_cam_streams integer key can be provided to specify how many cameras to include in the grid. The default value is 20, which is also the maximum number of cameras in a grid. The maximum may be increased at a later date.
    • 'single-participant': Use this layout to limit the audio and video to be streamed to a specific participant. The selected participant’s session ID must be specified via a session_id key.
    • 'active-participant': This layout focuses on the current speaker, and places up to 9 other cameras to the right in a vertical grid in the order in which they last spoke.
    • 'portrait': Allows for mobile-friendly layouts. The video will be forced into portrait mode, where up to 2 participants will be shown. An additional variant key may be specified. Valid values are:
      • 'vertical' for a vertical grid layout (the default)
      • 'inset'for having one participant's video take up the entire screen, and the other inset in a smaller rectangle. Participants' videos are scaled and cropped to fit the entire available space. Participants with the is_owner flag are shown lower in the grid (vertical variant), or full screen (inset variant).
    • 'custom': Allows for custom layouts. (See below.)

Customize your video layout with the VCS baseline composition

The baseline composition option is only available for cloud recordings and live streaming.

Daily offers a "baseline" composition option via the "custom" layout preset for customizing your video layouts while recording. This option allows for even more flexibility while using Daily's recording API.

Review our Video Component System (VCS) guide or VCS Simulator for additional information and code examples.

Baseline composition properties

mode
string

Sets the layout mode. Valid options:

  • single: Show a single full-screen video.
  • split: Show the first two participants side-by-side.
  • grid: Show up to 20 videos in a grid layout.
  • dominant: Show the active speaker in a large pane on the left, with additional video thumbnails on the right.
  • pip: Show the active speaker in a full-screen view, with the first participant inlaid in a corner.
Default: grid
showTextOverlay
boolean

Sets whether a text overlay is displayed. You can configure the contents of the overlay with the text.* properties.

Default: false
showImageOverlay
boolean

Sets whether an image overlay is displayed. You can configure the display of the overlay with the image.* properties. The image used must be passed in the session_id layout option when the stream or recording is started.

Default: false
videoSettings.showParticipantLabels
boolean

Sets whether call participants' names are displayed on their video tiles.

Default: false
videoSettings.roundedCorners
boolean

Sets whether to display video tiles with squared or rounded corners.

Default: false
videoSettings.preferScreenshare
boolean

When enabled, screen share inputs will be sorted before camera inputs. This is useful when prioritizing screen shares in your layout, especially when all inputs are not included in the final stream.

Default: false
videoSettings.scaleMode
string

Controls how source video is displayed inside a tile if they have different aspect ratios. Use fill to crop the video to fill the entire tile. Use fit to make sure the entire video fits inside the tile, adding letterboxes or pillarboxes as necessary.

Default: fill
videoSettings.placeholder.bgColor
string

Sets the background color for video placeholder tile. Valid options:

  • Hex color codes

  • RGB or RGBA syntax

  • Standard CSS color names (e.g. 'blue')

Default: rgb(0, 50, 80)
videoSettings.dominant.position
string

Control where the dominant (or "active speaker") video is displayed in the dominant layout mode. Values are left, right, top or bottom.

Default: left
videoSettings.dominant.splitPos
number

Sets the position of the imaginary line separating the dominant video from the smaller tiles when using the dominant layout. Values are from 0 to 1. The default is 0.8, so if videoSettings.dominant.position is set to left, the dominant video will take 80% of the width of the screen on the left.

Default: 0.8
videoSettings.dominant.followDomFlag
boolean

When in "dominant" mode, the large tile displays the active speaker by default. Turn off this followDomFlag to display the first participant instead of the active speaker.

Default: true
videoSettings.dominant.numChiclets
number

Controls how many "chiclets", or smaller video tiles, appear alongside the dominant video when using the dominant layout.

Default: 5
videoSettings.pip.position
string

Sets the position of the smaller video in the pip (picture-in-picture) layout. Valid options: top-left, top-right, bottom-left, bottom-right.

Default: top-right
videoSettings.pip.aspectRatio
number

Sets the aspect ratio of the smaller video in the pip layout. The default is 1.0, which produces a square video.

Default: 1
videoSettings.pip.height_vh
number

Sets the height of the smaller video in the pip layout as a percentage of total frame height, from 0 to 1. The default is 0.3, meaning the smaller video is 30% of the total height of the frame. Width is set based on the aspect ratio.

Default: 0.3
videoSettings.pip.margin_vh
number

Sets the margin between the smaller video and the edge of the frame in the pip layout. The default is 0.04, meaning the video will be inset by 4% of the frame height, or approximately 43 pixels in a 1920x1080 video. The same margin (in pixels, not percentage) is applied horizontally.

Default: 0.04
videoSettings.pip.followDomFlag
boolean

When in "pip" (or picture-in-picture) mode, the overlay tile displays the first participant in the participant array by default. Turn on this followDomFlag to display the active speaker instead.

Default: false
videoSettings.labels.fontFamily
string

Sets the participant label style option: font family. Valid options: Roboto, RobotoCondensed, Bitter, Exo, Magra, SuezOne, Teko

Default: Roboto
videoSettings.labels.fontWeight
string

Sets the participant label text font weight. Valid options: 100, 200, 300, 400, 500, 600, 700, 800, 900.

Note: Not all font weights are valid for every font family.

Default: 600
videoSettings.labels.fontSize_pct
number

Sets the participant label text font size.

Default: 100
videoSettings.labels.offset_x
number

Sets the offset value for participant labels on the x-axis.

Default: 0
videoSettings.labels.offset_y
number

Sets the offset value for participant labels on the y-axis.

Default: 0
videoSettings.labels.color
string

Sets the participant label font color. Valid options:

  • Hex color codes

  • RGB or RGBA syntax

  • Standard CSS color names (e.g. 'blue')

Default: white
videoSettings.labels.strokeColor
string

Sets the label font stroke color (the line outlining the text letters). Valid options:

  • Hex color codes

  • RGB or RGBA syntax

  • Standard CSS color names (e.g. 'blue')

Default: rgba(0, 0, 0, 0.9)
videoSettings.margin.left_vw
number

Sets the left margin value applied to videos. Step: 0.01.

Default: 0
videoSettings.margin.right_vw
number

Sets the right margin value applied to videos. Step: 0.01.

Default: 0
videoSettings.margin.top_vh
number

Sets the top margin value applied to videos. Step: 0.01.

Default: 0
videoSettings.margin.bottom_vh
number

Sets the bottom margin value applied to videos. Step: 0.01.

Default: 0
text.content
string

Sets the string to be displayed if showTextOverlay is true.

Default:
text.align_horizontal
string

Sets the horizontal alignment of the text overlay within the video frame. Values are left, right, or center.

Default: center
text.align_vertical
string

Sets the vertical alignment of the text overlay within the video frame. Values are top, bottom, or center.

Default: center
text.offset_x
number

Sets an X offset to be applied to the text overlay's position based on the values of text.align_horizontal and text.align_vertical.

Default: 0
text.offset_y
number

Sets a Y offset to be applied to the text overlay's position based on the values of text.align_horizontal and text.align_vertical.

Default: 0
text.rotationInDegrees
number

Applies a rotation to the text overlay. Units are degrees, and positive is a clockwise rotation.

Default: 0
text.fontFamily
string

Sets the font of the text overlay. Valid options: Roboto, RobotoCondensed, Anton, Bangers, Bitter, Exo, Magra, PermanentMarker, SuezOne, Teko

Default: Roboto
text.fontWeight
string

Selects a weight variant from the selected font family. Valid options: 100, 200, 300, 400, 500, 600, 700, 800, 900.

Note: Not all font weights are valid for every font family.

Default: 500
text.fontSize_percentageOfViewH
number

Sets the text overlay font size as a percentage of the video frame height. Values are from 0 to 100, so setting this property to 7 will set the font size to 7% of the height of the video frame.

Default: 7
text.color
string

Sets the color and transparency of the text overlay. Valid options:

  • Hex color codes

  • RGB or RGBA syntax

  • Standard CSS color names (e.g. 'blue')

Default: rgba(255, 250, 200, 0.95)
text.strokeColor
string

Sets the color of the stroke drawn around the characters in the text overlay. Valid options:

  • Hex color codes

  • RGB or RGBA syntax

  • Standard CSS color names (e.g. 'blue')

Default: rgba(0, 0, 0, 0.8)
image.assetName
text

Sets the overlay image. Icon asset must be included in session_assets object. showImageOverlay must be true.

Default: overlay.png
image.position
string

Sets position of overlay image. Valid options: top-left, top-right, bottom-left, bottom-right

Default: top-right
image.enableFade
boolean

Sets the overlay image to fade in or out when the showImageOverlay property is updated.

Default: true
image.fullScreen
boolean

Sets overlay image to full screen.

Default: false
image.aspectRatio
number

Sets aspect ratio of overlay image. Steps: 0.1

Default: 1.778
image.height_vh
number

Sets height of overlay image. Steps: 0.1

Default: 0.3
image.margin_vh
number

Sets margin height of overlay image. Steps: 0.01

Default: 0.04
image.opacity
number

Sets opacity of overlay image. Steps: 0.1

Default: 1
toast.key
number

Triggers display of toast component. To send a toast, increment the value of key

Default: 0
toast.text
text

Sets text displayed in toast component.

Default: Hello world
toast.duration_secs
number

Sets duration of time toast component is displayed (in seconds).

Default: 4
toast.numTextLines
number

Sets number of lines text in toast component is displayed on.

Default: 2
toast.showIcon
boolean

Sets whether icon is displayed in toast component (true or false).

Default: true
toast.icon.assetName
string

Sets asset value for toast icon. Icon asset must be included in session_assets object.

Default:
toast.color
string

Sets the toast component's background color. Valid options:

  • Hex color codes

  • RGB or RGBA syntax

  • Standard CSS color names (e.g. 'blue')

Default: rgba(15, 50, 110, 0.6)
toast.strokeColor
string

Sets the color of the stroke drawn around the text characters in the toast component. Valid options:

  • Hex color codes

  • RGB or RGBA syntax

  • Standard CSS color names (e.g. 'blue')

Default: rgba(0, 0, 30, 0.44)
toast.text.color
string

Sets the toast component's text color. Valid options:

  • Hex color codes

  • RGB or RGBA syntax

  • Standard CSS color names (e.g. 'blue')

Default: white
toast.text.fontFamily
string

Sets the toast component's font family. Valid options: Roboto, RobotoCondensed, Bitter, Exo, Magra, SuezOne, Teko

Default: Roboto
toast.text.fontWeight
number

Sets the font weight for the toast component's text. Valid options: 100, 200, 300, 400, 500, 600, 700, 800, 900.

Note: Not all font weights are valid for every font family.

Default: 500
toast.text.fontSize_pct
number

Sets the font size for the toast component's text.

Default: 100

Session assets

Session assets — including images and fonts — can be included to be made available for VCS customizations. For example, a logo image can be included to use as an image overlay in your video feed.

Session assets must be specified when starting the recording. The asset URLs you pass will be preloaded immediately and cached on the server. This ensures the data is instantly available when your rendering makes use of it (for example, when you send a param update to display the logo overlay).

The session_assets property is optional but must be passed when the stream or recording is started via startLiveStreaming() or startRecording(). Any image assets provided must use the .png file format.

Default values

Previous
Next