If you have a video streaming app, and you would like to integrate Video Stream Analytics into its videos, then you can follow this guide.
Video Stream Analytics provides engagement and Quality of Experience (QoE) insights of your videos. You can use these insights to identify problems with your videos, and also to gauge the conversion rate and success of your videos.
The figure below shows the process flow.
To do this in the platform, navigate to ‘ Stream’ > ‘Live Streams’, then click the ‘Create live stream’ button.
You will be directed to another page where you can set up the following:
- Stream Details, and
- CDN Configuration
Stream Details
The Stream details includes:
- Stream source name: a unique name for the stream source.
- Protocol: specify the video format/container of the video stream. For this scenario, choose HLS as the protocol.
- Origin server: the origin server is where your video streams are hosted. Use the domain name associated with your origin server. And then set this origin as a ‘CDN candidate’.
CDN Configuration
By default, the system will recommend you to install Basic CDN by default, namely Alibaba Cloud.
If you just needed Stream Analytics, you are free to disable them later.
Optional: You may enable P2P delivery. You can check this article to learn more about P2P delivery.
Finally, click the ‘ Create stream’ button, to finish the setup.
The created stream will be integrated with Stream Analytics.
Generate the code snippet
VNIS Video Stream provides an easy way to integrate Stream Analytics into your web app or mobile app through the SDK.
SDK is available in 2 formats depending on the platform of your video streaming app: web SDK and iOS SDK.
Mltyics Video Stream will auto-generate code snippet containing the SDK for this video. You can then copy the code snippet into your streaming application.
To generate the code snippet, navigate to ‘ Stream’ > ‘Live Streams’.
On this page and under the section ‘ Stream List’, you can click the stream name of your selected live stream, and by doing so, this will direct you to the Stream details page.
On the Stream details page, go to the ‘CDN Load Balancer’ tab and then to the ‘CDN Configuration’ section.
Disable the CDNs except for the ‘Origin server’, and then click the ‘Save’ button.
The, go to the ‘ Install & Test’ tab.
On this tab, input the manifest (m3u8) URL of your target video under the ‘Playlist URL’ field. You can choose your preferred video player on this page.
The system will generate a code snippet containing all the configurations you set.
Copy the code snippet
After you finished the configuration on the ‘Install & Test’, you may now access the generated code snippet on the ‘ Code Snippet’ tab.
You also need to input the manifest (m3u8) URL of your target video under the ‘Playlist URL’ field (only for HLS protocol case).
You can click the ‘ Copy’ button to copy all the code snippet into your video streaming app code.
You can also open the ‘ See our docs’ link, to check more detailed instructions on how to input the code snippet for different platforms (web, or iOS), different players (Video.js, HLS.js, or DPlayer), and JS frameworks (HTML, React, Vue).