webcaster-api - v6.1.0

Documentation

Welcome to the Webcaster SDK documentation.
You can find additional documentation for integrating Webcaster into your project here.
Please also take a look into our samples here.

Prerequisites

Download and include the Webcaster JavaScript file in your project.
Create a new stream. Read about stream creation via the nanoStream Cloud dashboard here.
Basic understanding of TypeScript or JavaScript is advantageous.

Implementation

Include Webcaster: Ensure the Webcaster JavaScript file is downloaded and included in your project.
Configure Webcaster: Create a configuration object with essential properties, notably the bintu stream name.
Instantiate Webcaster: Initialize a Webcaster instance with your configuration.
Setup and Begin Streaming:
- Execute the setup method to configure your client.
- Employ startPreview to initiate video preview.
- Utilize startBroadcast to commence your live stream.

Code Snippet

The following code snippet assumes you extracted the JavaScript file to a folder named "myproject/dist". Create an HTML file with the following minimalistic content and run it in a browser:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        <script src="../../dist/nanostream.webcaster.js"></script>

        <link rel="stylesheet" href="./../style.css">

        <title>nanoStream Webcaster API Demo</title>
    </head>

    <body>
        <script>

            import { Config as WebcasterConfig, Webcaster } from './dist/nanostream.webcaster';

            const config = {
                streamName: 'my-stream-name'
            };

            const client = new Webcaster(config);

            document.addEventListener('DOMContentLoaded', async () => {

                client.setup().then(async (fullConfig) => {
                    console.log(fullConfig);

                    await client.startPreview('myPreviewElId');
                    client.startBroadcast();
                });

            });


        </script>
    </body>
</html>

With the fundamental streaming setup complete, you are encouraged to delve into more sophisticated functionalities like stream control, metrics integration, and personalization. For comprehensive information, refer to the detailed feature sections in the Webcaster SDK documentation.