With this configuration, the web component is able to "snap" an image of a live TV stream and retrieve information on the currently playing sporting event shown.
It is expected that the customer's web application will use the response from the SDK to render more detailed information about the sporting event.
The Betradar ID
is provided in each SDK response, in order to match the response from the SDK with your data.
Installing the JavaScript SDK.
To set up the JavaScript SDK two files must be made available:
JavaScript resource
CSS resource
Both files must be added to your web application's index.html. These files are made available via CDN (Content Delivery Network). The following code can be copied and pasted to access the CDN and obtain the SDK.
The SDK must be presented on the whole viewport. For this reason, the following styles must be added. If you already have overlaying elements rendered inside your page, please adjust your z-index
accordingly.
Covers the handling of tokens for authentication purposes.
The SnapOdds SDK requires a valid access token to be provided in order to communicate with the Snapscreen API, which uses the OAuth 2.0 authentication mechanism.
Our customers are provided with a Client ID
and Secret
which must be used to retrieve the access token from the API endpoint described below:
POST
https://api.us.snapscreen.com/oauth/token
Below is an example of the HTTP request using curl
to receive an access token:
Having the access token retrieval system implemented on the client side is unsafe and strongly discouraged, as credentials are available in plain text and could easily be stolen. Therefore SnapOdds recommends implementation of this logic on the server side.
For the implementation to function, a REST API endpoint must be provided from which the client can request the access token. On the server side, the access token will be fetched from the Snapscreen API, stored in the current HTTP session, and then returned to the browser.
To further improve security, we also recommend using the CSRF token technique to protect this resource. If you have other security protection mechanisms available in your Web Application, then we highly recommend using them as well.
Let us assume a REST API endpoint has been created using the path '/token'
. The next required step is to direct this endpoint to the SnapOdds SDK in the form of an access token provider, which is function
that when executed will return a Promise
of the whole access token returned from the Snapscreen API.
Enclosed below is a snippet of a basic implementation of the access token provider.
Note: The access token provider must return a standard Promise (not any equivalent like AngularJS $q or other custom promise libraries like Kris Kowal's Q). The SDK is built as angular element and relies on zone.js for change detection, so only browser native async methods are recognized.
Obtaining live sporting event information by 'snapping'
The following section deals primarily with the code used in capture of live game information for SnapOdds Operator. If your use case requires game odds to be presented, the information captured by SnapOdds Operator is fed into SnapOdds Sports Media to correlate the game odds information, as described in Game Odds.
With this configuration, the web component is able to "snap" an image of a live TV stream and retrieve information on the currently playing sporting event shown. It is expected that the customer's web application will use the response from the SDK to render more detailed information about the sporting event.
First, ensure both the JavaScript and CSS resource are correctly loaded and that the access token manager is correctly implemented.
To render the SnapOdds SDK component, a DOM element must be provided, to which the component will be attached to as a child. In most cases, the document.body
component works best, as the SDK is then added as the last child, which helps with styling as the SDK overlays the full viewport.
Next, it is necessary to configure the SDK and add it as a child to the DOM element of your choice. This can be done by using SnapoddsSdk.snapBuilder()
.
The following configuration is the simplest one and will show the SDK immediately after appendTo()
is called.
The SDK can provide you with the information if there is at least one sportsEvent live, based on your channel's configuration.
Instead of appending the SDK to the document.body
, you need to configure the onLiveEventsStatusChangedCallback()
first. Therefore, you have to call build()
instead of appendTo()
at the end of the SDK's initialisation in order for it to work.
The callback you provide will be executed after initialisation and will return either true
or false,
indicating that there is at least one live sportsEvent available or not.
After that, it will automatically check every 5 minutes for upcoming sportEvents. If one is found the callback will be invoked as soon as the sportsEvent starts..
The following parameters are used in the SnapoddsSdk.operatorsBuilder()
:
tvSearchResult
has the following format:
If you want to customize the colors of the UI you can simply override the CSS Variables in snapodds-sdk.css
.
Name | Type | Description |
---|---|---|
Method | Parameter | Default Value | Description |
---|---|---|---|
client_id*
String
The client identifier specific to the customer.
client_secret*
String
The client secret.
grant_type*
String
The requested access grant type, should be set to "anonymous".
device_fingerprint
String
Unique device fingerprint.
setLanguage
string
en
Set the language of the SDK.
setAutoSnap
boolean
false
Turns on the auto snap functionality.
setVibrate
boolean
false
Uses the phones vibrate functionality, when the snap was successful.
setAccessTokenProvider
function
function that throws an error if not set
A function that takes no parameters and returns the Promise of the access token See access token implementation for more information.
onLiveEventsStatusChangedCallback
function(isLive
): void
no operation
Callback function executed after initialisation and when an upcoming sportsEvent becomes live
onResults
function(tvSearchResult
): void
no operation
Callback function executed when sports events are detected.
onClose
function(): void
no operation
Callback function to handle SDK close events.
appendTo
DOM Element
none
This call will finish the web component configuration and appends it to the given DOM element as child node.
build
none
none
Returns an intermeediate instance of the SdkBuilder. Needs to be used in combination with appendTo()
later on
setSnapBackHidden
boolean
false
Hide the "back" button in the Snap view