Installation

To use VIDIZMO widgets in your website, the following files need to be embedded in the code of your website.


<script type="text/javascript" src="{portal-address}/static/compiled/widget/widgets.js"></script>
<script type="text/javascript" src="{portal-address}/static/js/vidizmo-player/player.js"></script>
<link rel="stylesheet" href="{portal-address}/static/compiled/widget/widgets.css"/>


Note: https://{portal-address} or http://{portal-address} is your fully qualified registered portal domain URL without brackets.


Portal Configuration

From the Portal's Homepage:

  1. From the top left navigation menu, expand the Admin tab and click on the Portal Settings
  2. In the Admin tab, open the Portal Settings page



2. From the Portal Settings page, click on Apps to expand it

  1. Navigate to the Integration Apps Tab, and click to open it.
  2. Navigate to the Add New Apps button, and Click on it.


 


3. The Apps Catalog modal will appear, click on the + icon to add Widgets App 



4. The Widgets App is added for you to configure.



Note: All widgets require authentication if Media Viewing Access is not Anonymous.


5.  Enable the added Widget App by clicking on toggle button


Note: Mashups are protected when the security policy of your portal does not allow anonymous users or specific mashup access is not available for anonymous viewership.
Public/Anonymous Access is not available in VIDIZMO Digital Evidence Management (DEMS) product package.



Widgets App Configuration

Steps to Add & Configure the Widgets App 

  1. Click on the Gear icon displayed in the diagram above
  2. The following fields will be shown:
    1. Application Name: This is to uniquely identify your Widgets App within VIDIZMO portal. You can give it a name of your choice
    2. Application ID: This is a unique system-generated ID of the Widgets Application that will be used for authentication
    3. Whitelisted Domain: The website domains that will be marked as trusted will only be able to consume VIDIZMO widgets. You can provide multiple whitelisted domains. e.g: yourwebsite.com (Do not use the prefix of the web address i.e. www or HTTP). In order to allow all domain asterisk (*) can be used.
    4. Client Secret: This is a unique system-generated secret of the Widgets Application that will be used for authentication 
    5.  Expiry: This is the Widgets App's expiry date after which the widgets consuming this application's information will not be usable. You can set the expiry date by choosing a date from the calendar



Steps to Regenerate Client Secret


1. Click on the redo arrow next to the Client Secret field

2. Copy the new generated Secret

3. Use the new secret in the widget code the same way it was done the first time


Note: Client secret is only required to play protected media. All anonymous Media can be played without passing in the client secret. Client Secret can also be regenerated. 


Please refer to this article to see how you can configure Widgets App to playback authenticated media within widgets Authentication


Embedding Media Player - Detail View

The following code will display Media Library - Detail View widget

<vdz-mashup-detailview class="detail-view" data-widget="true"/>

Embedding Video Player

The following code will display Video Player 

<vdz-mashup-video class="video-player" data-widget="true" mashup-id={mashup-id}/>
Note: {mashup-id} is the media id within your portal that you want to play in the video player and data-widget="true" is mandatory which applies VIDIZMO's default styling on widgets.


Sample Code: Media Library - Detail View

The following sample code for Media Library - Detail View widget authenticates user using email address, application Id, and Client secret.


<html>

<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      window.widgetContext = {
        appLoginInfo: {
          appId: "{application-id}",
          emailAddress: "{email-address}",
          clientSecret: "{client-secret}"
        }
      }
    </script>

// where portal address can be either https://{portal-address} or http://{portal-address}
    <script type="text/javascript" src="{portal-address}/static/js/vidizmo-player/player.js"></script>
    <link rel="stylesheet" href="{portal-address}/static/compiled/widget/widgets.css" />
    <script type="text/javascript" src="{portal-address}/static/compiled/widget/widgets.js"></script>
</head>

<body>
    <div class="row">
        <div class="col-sm-9">
            <vdz-mashup-detailview class="detailView" data-widget="true" />
        </div>
    </div>
</body>

</html>

Note: {email-address} is your portal's registered email address where {application-id} and {client-secret} are your VIDIZMO widget app's application id and client secret.


Sample Code: Video Player

The following sample code creates widgets dynamically to set access token in window.widgetContext in DOM before "widget.js" file gets loaded because authentication call is an asynchronous process which is required by widgets having authorized media. This dynamic loading of widget implementation is mandatory when authenticating using user credentials. 


<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="{portal-address}/static/compiled/widget/widgets.css"/>
</head>

<body>
    <div style="width: 720px;" class="widgetContainer"></div>
</body>

<script type="text/javascript">
    var authInfo = {
        appId: "{application-id}
        emailAddress: "{email-address}",
        password: "{password}"
    };

    fetch(
        '{portal-address}/api/v1/user/authenticate',
        { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(authInfo) }
    )
        .then(response => response.text())
        .then(data => {
            window.widgetContext = {
                 authenticationInfo: { accessToken: data },
                 appLoginInfo: { appId: "{application-id}" }
             };

            new Promise((resolve, reject) => {
                let callBacksCount = 0;
                const playerJs = document.createElement('script');
                const widgetJs = document.createElement('script');

                playerJs.onload = function () { callBacksCount += 1; if (callBacksCount >= 2) { resolve(); } };
                widgetJs.onload = function () { callBacksCount += 1; if (callBacksCount >= 2) { resolve(); } };

                playerJs.src = "{portal-address}/static/js/vidizmo-player/player.js";
                widgetJs.src = "{portal-address}/static/compiled/widget/widgets.js";

                document.head.appendChild(playerJs);
                document.head.appendChild(widgetJs);

            }).then(() => {
                const widget = document.createElement("vdz-mashup-video");
                widget.setAttribute("data-widget", "true");
                widget.setAttribute("mashup-id", "{mashup-id}");

                document.querySelector('.widgetContainer').appendChild(widget);

            });

        });
</script>

</html>


Note: {email-address} and {password} are your portal's registered email address and password respectively. {application-id} is your VIDIZMO Widgets App's application id.