Setup a local Ant Media server connection and stream

🟢 Beginner

media

This example shows how setup a local Ant Media server and show the connection status inside a value. It also shows how to setup a test stream in that will be declared in the Ant Media server.

Configure an Ant Media server connection using antmedia-server.media with URL, email and password.
Expose the server connection status through a value.ospp file.
Declare a video stream (camera, OBS, etc.) with stream.media, stream.web and stream.ospp files.
Expose stream state as a value and display the stream in a dashboard via mediaPlayerWidgetSettings.

git checkout origin/osp-media-configuration .
git checkout origin/osp-antmedia-configuration .
git checkout origin/osp-web-configuration .
git checkout origin/example-media-server-stream .

Main features

This example uses the following OnSphere features to work :

Prerequisites

Interaction on streams using callbacks on a Media widget

Learning goals

How to setup a connection to a Ant Media server using antmedia-server.media.
How to setup a value that contains server’s status in a value.ospp.
How to setup a stream that connects to a video (camera, OBS …) stream.media.

Steps

Checkout the example configuration.
Replace properties inside antmedia-server.media with your servers URL, email and password. You can also choose to let the default parameters which will deploy a server in the stack.

{
  "moduleId": "modules.media.media-1",
  "hostname": "http://backend-antmedia",
  "port": 5080,
  "email": "test.test@test.com",
  "password": {
    "type": "PLAINTEXT",
    "password": "testtest"
  }
}

Create a value.ospp that represents your server’s connection state (You can now access to your connection state inside the value) :

{
    "name": "Test11123123",
    "description": "",
    "type": "BOOLEAN"
}

Create a stream linked to a camera using stream.media, stream.web and stream.ospp files :

{
    "serverId": "root.stream-server",
    "streamApplication": "LiveApp",
    "endpoint" : {
        "type": "streamSource",
        "streamUrl": {
             "type" : "RAW",
             "url" : "rtsp://test:test@X.X.X.X/axis-media/media.amp?videocodec=h264"
        }
    },
    "streamId":"testVal"
}

{
    "moduleId" : "modules.web.web-1"
}

{
    "streamName": "Test",
    "description": "Test"
}

Create a value.ospp that represents your stream state :

{
    "name": "Test1123",
    "description": "",
    "type": "BOOLEAN"
}

Add this stream to your dashboard.view in the mediaPlayerWidgetSettings :

{
  "configuration": [
    {
      "mediaPlayerWidgetSettings": {
        "streamSelectorId": "root.stream"
      },
      "id": "L8t1lmuo",
      "type": "Media",
      "title": ""
    }
  ],
  "layout": {
    "lg": [
      {
        "w": 8,
        "h": 6,
        "x": 0,
        "y": 0,
        "i": "L8t1lmuo"
      }
    ]
  },
  "breakpoints": {
    "lg": 1200,
    "md": 996,
    "sm": 768,
    "xs": 480,
    "xxs": 0
  },
  "cols": {
    "lg": 12,
    "md": 10,
    "sm": 6,
    "xs": 4,
    "xxs": 2
  },
  "rowHeight": 150
}