Web Example
This page outlines how to use the Phenix examples to create your own page showing real-time content and to publish that content. This demo publishes user media using the WebSDK, but a similar client workflow is used for publishing and viewing using other client SDKs (e.g., Android and iOS).
Prerequisites
This example builds on the Portal-based demo, and assumes that the Channel created in that exercise is available for use and that a stream is being published to that Channel.
Viewing
Create a Viewing Token
Create a viewing token using the Portal for the Channel you created in the Portal-based demo.
Create a Viewing Web Page
Create a web page that executes the Channel viewer API as shown in our example.
Add the viewing token as a query string with the text ?token=
to the web page URL. For example, if building a page locally, the URL would be similar to
file:///C:/Users/me/Documents/ChannelViewer/index.html?token=DIGEST:eyJ...fSJ9
where DIGEST:eyj...fsJ9
is the viewing token.
Review the JavaScript and HTML for this example to see how to use the APIs for subscribing to the Channel.
You can also review and try out the Embedded I-Frame example.
Publishing
Create a Publishing Token
Create a publishing token using the Portal for the Channel you created in the Portal-based demo.
Create a Publishing Web Page
Create a web page that uses the getUserMedia function as shown in our example.
As you did for viewing, add the publishing token as a query string with the text ?token=
to the web page URL. For example, if building a page locally, the URL would be similar to
file:///C:/Users/me/Documents/ChannelPublisher_v2/index.html?token=DIGEST:eyJ...f489
where DIGEST:eyj...f489
is the publishing token copied from the Portal.
Review the JavaScript and HTML for this example to see how to use the APIs for publishing to the Channel, as well as how to request permission for the user's camera and microphone.
WebSDK Integration
To use the WebSDK in your app, Phenix recommends performing an npm install of the WebSDK in your node.js development environment. By doing this, all dependencies are in one place, and are served by the same server that is serving your application, under your control.
Another option is to link your application to the dl.phenixrts.com area to get the WebSDK. If you reference the "latest" the link will only update to the latest dot release, as any new minor release will have new flag/path.
Please refer to the notes in the examples and SDK readme files for details.