Page Content
Using Overlays from Singular on Phenix Streams
Create overlays and render them on top of your Phenix video, add a Phenix video widget to your singular composition, or combine the two. Track user activity and adapt in real time to user trends, and control the full user experience.
Common use cases include:
- scoreboards
- transitions
- branding
- social media links
Integration Options
Adding overlays from Singular (www.singular.live) to Phenix real-time streams is simple and straightforward.
If you are interested in using Singular overlays, please contact your Phenix representative for an example.
There are two options for creating an overlay:
- Add a Singular overlay on top of Phenix video
- Add a Phenix video widget to your Singular composition
There are three options for using the overlay:
- Add Singular overlay to your site's source code (preferred solution)
- Use the Singular player rendering Phenix streams for an all-in-one solution
- Use a tool such as OBS to render a "burned-in" overlay (not interactive)
How-To Guide
- Create a Singular Live overlay
- Copy the token code from Singular for the overlay
- Add rendering the Singular overlay to your site's source code
- Add the Singular token code to the page's query string
Create an Overlay
Log into your Singular Live account and create an overlay, which involves creating a composition and a control app. If you're new to Singular, follow their documentation and guides such as their Beginner's Guide.
A composition can include one or more "Video Phenix" widgets, using a viewing token created in the Phenix Customer Portal.
Paste the viewing token into the Token field of the Phenix Video widget.
Once your composition is complete, create a new control app from the composition:
Add overlays or other elements to the control app.
Get the Token Code
Once you've created your overlay, get the token code to use in your web page. From the Singular Live control dashboard, copy the App Output URL using the copy button in the upper right hand corner of the screen.
The dashboard will confirm that the URL has been copied.
The token is between /output/ and /Output, shown in bold in the example below (ignore the spaces shown in the URL).
https://app.singular.live/output/4JD3VH7WfY3Sqp5ftP55aU/Output?aspect=16:9
Add Singular to Your Page Source
Add a Singular overlay to your page's CSS as shown below.
CSS
.hide {
display: none;
}
#myVideoId {
width: 100%;
height: 100%;
background: black;
position: absolute;
}
#SingularOverlay {
width: 100%;
height: 100%;
position: absolute;
}
#theContainer {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
/* top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%); */
}Add a reference to the Singular JavaScript script source and add the Singular overlay as a div as shown below.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Singular.live Enabled Channel Viewer</title>
<link rel="stylesheet" href="./main.css">
<!-- Optional: Initialize environment based on URL parameter `token` -->
<meta name="phenix-channel-token-uri-parameter-name" value="token" />
<script>
__phenixPageLoadTime = new Date().getTime();
</script>
<script src="https://dl.phenixrts.com/JsSDK/2023.2.latest/channels/min/channels.js"></script>
<script src="https://app.singular.live/libs/singularoverlay/1.0.0/singularoverlay.js"></script>
</head>
<body>
<div id="theContainer">
<video id="myVideoId" controls muted autoplay playsinline></video>
<div id="SingularOverlay"></div>
</div>
<script src="./main.js"></script>
</body>
</html>
Add rendering of the overlay to your page's JavaScript code. This example uses a search parameter to get the token from the URL, but you can also hard-code the token if desired.
JavaScript
/**
* Copyright 2023 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
*/
const searchParams = new URLSearchParams(location.search);
const token = searchParams.get('token') || '';
const singularToken = searchParams.get('singularToken') || '5a7jmzaSASpLx6KQtLgr0X';
const videoElement = document.getElementById("myVideoId");
const channel = phenix.Channels.createChannel({
videoElement,
token
});
channel.autoMuted.subscribe(autoMuted => {
if (autoMuted) {
console.log('Playback was auto-muted by browser. Please use user action to initiate `channel.unmute()`');
}
});
channel.autoPaused.subscribe(autoPaused => {
if (autoPaused) {
console.log('Playback was auto-paused by browser. Please use user action to initiate `channel.play()`');
}
});
var options = {
class: "iFrameClass",
endpoint: "https://app.singular.live",
interactive: true,
syncGraphics: false,
showPreloader: false,
aspect: ""
};
var overlay = SingularOverlay("#SingularOverlay", options, (params) => {
console.log("Overlay Created");
});
overlay.setContent(
{
appOutputToken: singularToken
},
(params) => {
console.log("Content Loaded - params:", params);
}
);
overlay.addListener("message", (params) => {
if (params.type == "backgroundClick") {
console.log(
"Overlay SDK: message from composition - params.type:",
params.type
);
}
});Add the Token Code
When accessing your page, include the token code in the query string. Skip this step if the token is hard-coded in the page source.
https://example.com/?token=DIGEST:eyJ...RlbW9cIn0ifQ==&singularToken=4JD3VH7WfY3Sqp5ftP55aU
Result
When the page is rendered, the overlay is shown, and will update when changes are made in the control dashboard.
v2024-08-13T19:29:16.000Z