Utility functions | SignalWire

`buildVideoElement`

buildVideoElement(options): Promise<BuildVideoElementReturnType>

A function that creates and optionally injects a video DOM element for a given Call or Room object.

If you have passed a rootElement when instantiating the SignalWire client, or when dialing a call, the SDK will manage the DOM automatically; injecting the resulting video stream into the rootElement that you specified.

But for more fine grained control, or if you’re using a library like React, you can choose to manually manage DOM using this function. Be sure to not specify a rootElement at instantiation or during dialing.

Parameters

Name	Type	Required?	Description
`options`	`object`	Required
`options.room`	`CallFabricRoomSession`	Required	The Call Fabric Room Session to build the video element for
`options.rootElement`	`HTMLElement`	Optional	The HTML container element which will contain the video stream. If `rootElement` is not passed, the resulting DOM element will be returned, and can be injected into any container element manually.
`options.applyLocalVideoOverlay`	boolean	Optional	Whether to apply local video overlays on the remote stream

Response

Name	Type	Description
`response`	`object`	-
`response.element`	`HTMLElement`	The container for the stream. If `rootElement` was not passed, this is a newly created container. Otherwise, it is the same as the `rootElement` which was passed in.
`response.unsubscribe`	`()=>void`	Call this function to turn off all event handling for the stream before disposing of the container element.

Example

After the SignalWire Client has been instantiated, you can dial a video call and inject it into the DOM as follows:

1 const call = await client.dial({
2   /* ... */
3 });
4 
5 await call.start();
6 
7 const { element, unsubscribe } = await buildVideoElement({
8   room: call,
9 });
10 const container = document.getElementById("container");
11 container.appendChild(element);

Alternatively, you can pass in the rootElement parameter and let the function automatically manage DOM:

1 const { element, unsubscribe } = await buildVideoElement({
2   room: call,
3   rootElement: document.getElementById("container"),
4 });