Merge pull request #253 from ant-media/md/updte-playlist

update the playlist document

docs/guides/publish-live-stream/playlist/_category_.json

@@ -0,0 +1,8 @@
+{
+    "label": "Playlist",
+    "position": 7,
+    "link": {
+      "type": "generated-index",
+      "description": "Create and stream playlist with Ant Media Server."
+    }
+  }

docs/guides/publish-live-stream/playlist/creating-playlist.md

@@ -0,0 +1,101 @@
+---
+title: Creating a playlist
+description: Creating a playlist
+keywords: [Creating a playlist, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 2
+---
+
+It is very simple to create a playlist from the Ant Media Server dashboard by following a set of steps. So let's get started 🙂
+
+## VoD files
+
+In order to create a playlist, we need to have a set of VoD files that will be used as playlist items. Therefore, as the first step, we will upload some VoD files to the Ant Media Server.
+
+### Login to your Ant Media Server Dashboard
+
+Login to your Ant Media Server Web Panel/dashboard. The url is like this: `https://YOUR_ANT_MEDIA_SERVER:5443/`
+
+![image.png](@site/static/img/publish-live-stream/playlist/webpanel.png)
+
+### Accessing the Application
+
+- Navigate to your preferred application from the left side. For this demonstration, we are using the LiveApp application.
+- Once you are in the LiveApp application, go to the VoD section.
+
+![image.png](@site/static/img/publish-live-stream/playlist/vod-section.png)
+
+### Uploading the VoD files
+
+Now we can upload the VoD files that we want to stream with the playlist.
+
+- Click on `Upload VoD` tab and then click on `Choose File` to select the files you want to upload. For this demonstration, I will upload three VoD files.
+
+![image.png](@site/static/img/publish-live-stream/playlist/vod-upload.png)
+
+:::info
+Furthermore, uploading MP4 files to your Ant Media Server is optional. Ant Media Server can retrieve MP4 files from any location. You simply need to ensure that the file URL is accessible to AMS.
+:::
+
+## Creating the Playlist
+
+Now that we have the VoD files ready, we will create the playlist with these VoD files as the playlist items.
+
+### Get the VoD URL
+
+- The sample path of a VoD file is like `http(s)://ams-server-urlPort/LiveApp/streams/vod_id.mp4`
+- In order to get the VOD URL, click on the hamburger icon, which is located at the right side of the screen and then click `Copy VoD URL`
+
+![image.png](@site/static/img/publish-live-stream/playlist/vod-url.png)
+
+- Now we have the VoDs accessible through the below links
+
+```
+http://13.201.79.224:5080/LiveApp/streams/111716684850426702820750.mp4
+http://13.201.79.224:5080/LiveApp/streams/618712696735204930650663.mp4
+http://13.201.79.224:5080/LiveApp/streams/716674157649310868227159.mp4
+```
+
+### Let's create the Playlist
+
+- Go to `Live Streams` section, and click on `New Live Stream` and then select `Playlist` from the drop-down menu.
+
+![image.png](@site/static/img/publish-live-stream/playlist/playlist.png)
+
+- Name your playlist, click on `Add Playlist Item`, add all the playlist items and then click `Create`.
+- The `stream Id` field is not mandatory but you can put your own streamId.
+
+![image.png](@site/static/img/publish-live-stream/playlist/playlist-items.png)
+
+- The playlist is created and it is offline by default.
+
+- Click on the `Start Broadcast` to start streaming of the playlist.
+
+![image.png](@site/static/img/publish-live-stream/playlist/start-playlist.png)
+
+- Congratulations! The playlist is successfully created and running.
+
+![image.png](@site/static/img/publish-live-stream/playlist/playlist-running.png)
+
+## Optimizing Playlist for Better Playback Experience
+
+Now that we have learned how to create a playlist, let's make some configurations to optimize the playlist for a better playback experience.
+
+- Go to the `Settings` section of the application and scroll down.
+
+![image.png](@site/static/img/publish-live-stream/playlist/settings.png)
+
+- Uncheck the `Delete HLS files after the stream is finished` as this setting will preserve the HLS files after the stream has ended.
+
+![image.png](@site/static/img/publish-live-stream/playlist/hls-settings.png)
+
+- Scroll to the bottom and Click `Save` button to save the changes.
+
+- Scroll to the top and choose the settings mode from `Basic` to `Advanced`
+
+![image.png](@site/static/img/publish-live-stream/playlist/advanced-settings.png)
+
+- Find `hlsflags` and change its value to `delete_segments+append_list+omit_endlist`
+
+![image.png](@site/static/img/publish-live-stream/playlist/hls-flags.png)
+
+- Save the changes and start/restart the playlist to apply the changes.

docs/guides/publish-live-stream/playlist/managing-playlist-programmatically.md

@@ -0,0 +1,135 @@
+---
+title: Managing the playlist programmatically
+description: Managing the playlist programmatically
+keywords: [Managing the Playlist Programmatically, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 3
+---
+
+In the previous sections, we learned how to create and manage playlists via the management panel/dashboard. The playlist can also be managed programmatically with the help of the Ant Media Server REST APIs.
+
+## Make Ant Media Server Respond to REST API calls
+
+By default, only localhost can make REST calls to the Ant Media Server and for any other IPs to be able to make the API call, we need to enable that IP in the application settings under `REST API Security`.
+
+For this demonstration to test the playlist programmatically, I will open the REST API for everyone.
+
+:::important 
+I have opened Ant Media Server to respond to all REST methods for testing purposes. It's not something recommended for production environments. So, you should only open the REST calls to specific IPs by [securing the REST APIs](https://antmedia.io/docs/guides/developer-sdk-and-api/rest-api-guide/securing-rest-apis/).
+:::
+
+- Find `REST API Security` section under settings and add `0.0.0.0/0` to the text area within the `Enable IP Filter for RESTful API`.
+
+- Save the settings.
+
+![image.png](@site/static/img/publish-live-stream/playlist/rest-api.png)
+
+## Manage PlayList Programmatically
+
+:::info
+This section requires basic knowledge of terminal usage and Linux. You can also use some API clients, like Postman, etc., to call Rest APIs.
+:::
+
+- To create the playlist, we will use the same VoD URLs that we uploaded in the last section under `Get the VoD URL`
+
+```
+http://13.201.79.224:5080/LiveApp/streams/111716684850426702820750.mp4
+http://13.201.79.224:5080/LiveApp/streams/618712696735204930650663.mp4
+http://13.201.79.224:5080/LiveApp/streams/716674157649310868227159.mp4
+```
+
+### Passing the Variables
+
+- Open a shell terminal in your Linux or Mac.
+
+- Define your own values for variables below according to your server domain/IP or playlist streamId. `ITEM1`, `ITEM2` and `ITEM3` are VoD URL that we copied. You can copy and paste one line at a time.
+
+```
+export MY_ANT_MEDIA_SERVER=localhost
+export MY_PLAYLIST_ID=myPlaylistId
+export ITEM1=http://13.201.79.224:5080/LiveApp/streams/111716684850426702820750.mp4
+export ITEM2=http://13.201.79.224:5080/LiveApp/streams/618712696735204930650663.mp4
+export ITEM3=http://13.201.79.224:5080/LiveApp/streams/716674157649310868227159.mp4
+```
+![image.png](@site/static/img/publish-live-stream/playlist/items.png)
+
+### Creating the Playlist
+
+Create a Playlist with the items above. Just Copy and Paste the below command.
+
+```bash
+curl -X 'POST' \
+"http://${MY_ANT_MEDIA_SERVER}:5080/LiveApp/rest/v2/broadcasts/create" \
+  -H 'Content-Type: application/json' \
+  -d '{ 
+          "streamId": "'"${MY_PLAYLIST_ID}"'", 
+          "type": "playlist",
+          "playListItemList": [
+            {
+              "streamUrl": "'"${ITEM1}"'",
+              "type": "VoD"
+            },
+            {
+              "streamUrl": "'"${ITEM2}"'",
+              "type": "VoD"
+            },
+            {
+              "streamUrl": "'"${ITEM3}"'",
+              "type": "VoD"
+            }
+          ]
+        }'
+```
+
+- Ant Media Server responds with a generated broadcast JSON object. If you don't give `streamId` in the request above, then Ant Media Server will generate a random `streamId`.
+
+![image.png](@site/static/img/publish-live-stream/playlist/playlist-creation.png)
+
+- Check that the playlist is also visible on the web panel, as shown below.
+
+![image.png](@site/static/img/publish-live-stream/playlist/playlist-panel.png)
+
+### Starting the Playlist
+
+```bash
+curl -X 'POST' "http://${MY_ANT_MEDIA_SERVER}:5080/LiveApp/rest/v2/broadcasts/${MY_PLAYLIST_ID}/start" 
+```
+
+![image.png](@site/static/img/publish-live-stream/playlist/playlist-start.png)
+
+- Go back to web panel and check that the playlist state is changed to "Broadcasting"
+
+![image.png](@site/static/img/publish-live-stream/playlist/running-playlist.png)
+
+### Watching the Playlist
+
+- Open a new tab in your browser and visit `http://{MY_ANT_MEDIA_SERVER}:5080/LiveApp/play.html?id={MY_PLAYLIST_ID}&playOrder=hls`
+
+- Pay attention to the fact that we use HLS for playback because it provides better experience in playlists and there is no need to have ultra-low latency when playing with WebRTC as it is VoD streaming.
+
+![image.png](@site/static/img/publish-live-stream/playlist/playing-playlist.png)
+
+### Skip the item in the Playlist
+
+To skip item in playback, you can make the below REST call.
+
+```bash
+curl -X 'POST' "http://${MY_ANT_MEDIA_SERVER}:5080/LiveApp/rest/v2/broadcasts/playlists/${MY_PLAYLIST_ID}/next" 
+```
+
+If you give index query parameter when skipping an item in the PlayList, it will skip to that item directly in the playlist.
+
+You can add index query parameters by just appending a question mark to the URL as follows:
+
+```bash
+curl -X 'POST' "http://${MY_ANT_MEDIA_SERVER}:5080/LiveApp/rest/v2/broadcasts/playlists/${MY_PLAYLIST_ID}/next" ?index=0
+```
+
+- Check that the player has skipped the item. It may take about 10-15 seconds to see that the effect because HLS playback has this latency.
+
+### Stop the Playlist
+
+```bash
+curl -X 'POST' "http://${MY_ANT_MEDIA_SERVER}:5080/LiveApp/rest/v2/broadcasts/${MY_PLAYLIST_ID}/stop"
+```
+
+Stay tuned for more new features to enhance the Playlist experience with Ant Media Server.

docs/guides/publish-live-stream/playlist/playlist.md

@@ -0,0 +1,28 @@
+---
+title: Playlist
+description: Playlist
+keywords: [Playlist, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 1
+---
+
+# Playlist
+
+A video playlist is a curated collection of videos arranged in a specific order for sequential playback. It functions similarly to a music playlist but consists of video content instead. Video playlists are commonly used on platforms like YouTube and other video streaming services.
+
+The different sections of this guide describe how to create and stream a playlist using the Ant Media Server. The playlist feature is available in both the Community Edition and the Enterprise Edition of Ant Media Server.
+
+![image.png](@site/static/img/image(2).png)
+
+## What is Linear Live Streaming?
+
+Linear live streaming, also known as pre-recorded live streaming or VoD streaming, is a method where a prerecorded video is broadcasted to give the illusion of a live stream.
+
+This technique is widely employed, involving the recording of a video that mimics a live event. The recorded video is then scheduled for broadcast, creating the appearance of real-time streaming.
+
+It's often utilized to maintain a continuous 24/7 live presence on various social platforms, such as [YouTube, Facebook, and other social media channels](https://antmedia.io/docs/guides/publish-live-stream/simulcasting/).
+
+Linear live streams consist of scheduled programs with specific start and end times. Additionally, they offer synchronized viewing experiences where all viewers watch the same content simultaneously. This ensures that viewers avoid spoilers before watching.
+
+Live linear streaming provides a "passive" viewing experience, where viewers don't actively search and click for content (except when changing the program). Instead, the content is delivered to them in a manner similar to that of traditional TV channels. While viewers can switch channels, they aren't required to select individual videos as they would with a playlist.
+
+Now you will learn how to create a playlist.