Attaching & Detaching Library - Storm JavaScript Library

The Storm JavaScript Library can be easily embedded and controlled on any web page. This guide describes two fundamental methods related to attaching and removing the library object from the DOM (Document Object Model).

Static Library Attachment

In the following example, a portion of the configuration object specifies that the library should be embedded inside an HTML container with the ID container:

                        
const streamConfig = {
    stream: {
      ...   // stream settings
    },
    settings: {
        ... // basic settings
        video: {
            containerID: "container",
            width: "1280px",
            height: "720px",
        }
    }
};
                    

Dynamic Library Attachment

The containerID parameter is optional, meaning the library object can be initialized without specifying a container. In this case, playback won’t be possible, but you can already subscribe to the target stream.

Later, the library can be dynamically attached to a container using the attachToContainer() method:

                        
const streamConfig = {
    stream: {
      ...   // stream settings
    },
    settings: {
        ... // basic settings
        video: {
            width: "100%",
            height: "100%"
        }
    }
};

const storm = stormLibrary(streamConfig);
storm.attachToContainer("container");
                    

The attachToContainer() method accepts either:

• a string representing the ID of an HTML element in the DOM, or
• a direct reference to a DOM element:

                        
const myElement = document.getElementById("container");
storm.attachToContainer(myElement);
                    

The method will return true if the operation succeeds (i.e., the container exists) or false if it fails for any reason.

Removing the Library from the DOM

To remove the library object from the DOM, use the detachFromContainer() method:

                        
storm.detachFromContainer();
                    

If the library is removed from the DOM while a stream is playing, playback will stop and the stream will no longer be displayed. This behavior mirrors that of the native <video> element. Once the library is reattached to the DOM, playback will automatically resume by reissuing the play command.

Repositioning the Library in the DOM

If you simply want to change the location of an already initialized library instance within the DOM, you don’t need to explicitly call detachFromContainer() followed by attachToContainer(). Instead, you can directly call attachToContainer() again with the new target container. If a stream is currently playing, it will be seamlessly moved to the new container without pausing or reissuing the play request.

                        
const storm = stormLibrary(streamConfig);
storm.attachToContainer("firstContainer");

// some code

storm.attachToContainer("nextContainer");