Introduction

In this section, we will delve into the fundamental concepts of working with video stream services and prepare an HTML template for our example. To stream video from various sources or services, we need to obtain a link to the video feed, which we can later embed within an iframe. In our case, authentication is often required, which is typically achieved through a secure (HTTPS) POST request to the service's server, providing authentication data.

Let's begin with the HTML template required for displaying the video.

<section class="camera-player">
    <iframe id="camera-output" frameborder="0" style="width: 100%; height: 100%"></iframe>
    <div class="bottom-panel">
        <button class="icon-settings"></button>
        <button class="full-screen icon-enlarge"></button>
    </div>
    <div class="controls hidden">
       <!-- Structure of your controls if needed -->
    </div>
</section>

Configuring the View and Authentication Request

In this section, we will take a closer look at the authentication process. To send a request, you need to create a "Request configuration" by navigating to the "Administration" menu and selecting "Request configuration." If you have the option to create a configuration that suits all domains, you can do this outside of the domain and mark it as "Public" using the checkbox.

Here are the steps to create a new configuration:

  1. Specify a name for the configuration in the "Name" field.
  2. Choose the request type from the dropdown menu.
  3. In the configuration JSON, include the following:
    • "url": The URL to which the request will be sent.
    • "methodType": The request type (in our case, it's a POST request).
    • "headers": Request headers in the format of a JSON array of objects with "name" and "value" fields, e.g., [{"name": "Authorization", "value": "$token"}].

You can also include variables in the request path or JSON configuration by using the "$" sign, like "$variableName" or "$token." If the request body remains static without changes, you can add it as a "Payload Template" and click "Add." You can add multiple static templates if needed.

Once the configuration is ready, click "Save" to save the newly created configuration.

Moving forward, let's put our configuration to work. We will use it in an endpoint to conceal authentication data and return only a temporary access token in the response body. You can find more details on creating and configuring endpoints here.

To make use of the created request configuration, employ the "httpRequestAsync" function. This function takes three parameters and returns a request identifier for further processing. Here are the parameters:

  1. Request configuration ID (number 1 in the image).
  2. Payload (which can be null).
  3. An associative array of key-value pairs for substituting values in the configuration JSON.

Please note that when using the "payload" parameter, templates will not be applied ("Payload Template").


To handle the request, we will need the "serviceResponse" function. It takes three parameters and a callback function. The first parameter is the request ID, generated by the "httpRequestAsync" function. The second parameter specifies the frequency at which the request will be checked for a response, and the third parameter defines the timeout duration after which the request is considered unsuccessful.

Inside the function, you have access to response processing fields such as "responseRetrieved", "httpStatusCode" and "httpBody". Let's examine these fields in the code example below.

def response;
def requestId = httpRequestAsync(255, null, null);
serviceResponse(requestId, 250, 10000) {
  if (!responseRetrieved) {
    response = Response.ok('No response retrieved','text/plain').status(500).build();
    return;
  }

  if (httpStatusCode != 200) {
    response = Response.ok('Something went wrong during the authorization','text/plain').status(httpStatusCode as Integer).build();
    return;
  }

  try {
    response = Response.ok(httpBody as String, 'application/json').build()
  } catch (Exception e) {
    response = Response.ok('Internal server error: ' + e.message, 'text/plain').status(500).build();
  }
}

return response;


After validation, you can return the token separately or the entire response body, as shown above. Save this endpoint as a "BellaDati" endpoint. You can call it using JavaScript at the necessary point in your application.

Next, you should create and describe the logic for all UI components. At the appropriate moment to obtain an access token, invoke the endpoint with a URL structure like `${location.origin}/endpoint/endpointURL`, where "endpointURL" is the URL you specified during creation.

Upon acquiring the access token, we can proceed to interact with the streaming service provider and obtain the URL to embed into the previously prepared iframe. This can be achieved on the client side or by creating a new request configuration.

You can adapt the UI by adding CSS files to the extension.

  • No labels