How can Flowplayer and Ant Media help you grow your business?
We previously announced our partnership with Ant Media. With Flowplayer and Ant Media combined you get a reliable, small, and fast video player with the possibility to do highly scalable video streaming. The partnership between Flowplayer and Ant Media ensures that both platforms work flawlessly with your business-critical applications. The support and the technology stack behind both companies help companies build their solutions based on proven and battle-tested technologies. In this blog post we will explain how to integrate Flowplayer and Ant Media.
How do Flowplayer and Ant Media help you grow your business?
Ant Media Server (AMS) provides a ready-to-use, highly scalable real-time video streaming platform for live video streaming needs. AMS has highly scalable, ultra-low latency (WebRTC) and low latency (CMAF & HLS) video streaming solutions supported with operational management utilities. It can be deployed easily and quickly on-premises or on public cloud networks such as AWS, Azure, and DigitalOcean.
Some of the great features of AMS are:
- Ready-to-use, highly scalable, real-time, and live video streaming solutions
- Extensive APIs to upload, encode, transcode and stream videos
- Ability to re-stream to social media platforms
- Adaptive bitrate streaming
- Free iOS, Android, JavaScript, Unity, and Flutter SDKs
- Intuitive dashboard
How can you integrate Ant Media Server to Flowplayer?
Flow player supports a lot of video formats like HLS, DASH and VoD. You need to have Ant Media Server stream inputs for integration. You can get stream input sources with below docs:
HLS: https://resources.antmedia.io/docs/hls-playing#more-details-about-hls DASH: https://resources.antmedia.io/docs/dash-playing-cmaf#how-to-use-cmaf VoD: https://resources.antmedia.io/docs/play-live-and-vod-streams-and-previews
How can you play HLS/DASH/VoD live streaming with Ant Media Server?
In this section, we will use Flowplayer demos. We will choose Standart Layout in demo page. We will click try button on right-top of the source code example. Add Ant Media Server input source(HLS, DASH or VoD) to Flowplayer js script as below
flowplayer("#player", { src: "https://###.antmedia.io:5443/LiveApp/streams/stream1.m3u8"
})
How can you use DVR in Flowplayer with Ant Media Server?
Ant Media Server deletes the obsolete HLS segments by default. So we need to make Ant Media Server keep every HLS segments in the list. In order to do that:
- Open your application properties file with your favorite editor. i.e. for LiveApp it's /usr/local/antmedia/webapps/LiveApp/WEB-INF/red5-web.properties
Set or add the following properties in the file
settings.hlsPlayListType=event
settings.hlsflags=
- Default hls flags is delete_segments so that we just keep it empty.
Save the file and restart Ant Media Server
sudo service antmedia restart
-
Send a Live Stream to Ant Media Server with WebRTC or RTMP. Let's assume that you're sending a live stream with stream1 id
-
Add DVR parameter to Flow player as below:
flowplayer("#player", {
src: "https://###.antmedia.io:5443/LiveApp/streams/stream1.m3u8",
dvr: true })
- Open the Flow player in your browser. You should see the slider bar in the player as shown below. It's by default playing the Live edge