M3u8 is a utF-8 encoded plain text file format for recording indexes. In our live clip project, will live streams transcoder m3u8 file, transcoding into can identify m3u8 file editor, the editor will these information into timeline section information, editor is divided into two parts, the lower part is the part time line, to provide users edit operation, the upper part is composed of two Windows around, The window on the left is the real-time screen of the live broadcast signal, and the window on the right is the preview display window of the timeline. Users can play and view the current video screen through Play and seek. In this article, I want to talk about how to dynamically intercept M3U8 according to the start time to achieve the correct display of the editor’s timeline.
StartTime refers to the time from which the user wants to edit the segment of live stream conversion. The value ranges from the time when the live stream conversion starts, denoted as ingestTime, to the end of m3U8 file. To be clear, startTime is not equal to the startTime of the timeline, because this time point may not be the time of the slice file corresponding to m3u8. The start time of the timeline (startTimeFromM3u8), which determines the position of the timeline as the start time point for drawing, as shown in the following figure.
From the time point of ingestTime, the cumulative length of fragments is calculated until the cumulative length is greater than the length from ingestTime to startTime. Then, in order to show a slice-width fragment on the timeline, it is necessary to retrieve a slice forward. The resulting length (ingestToStartFromM3u8) is the length that needs to be cut from m3U8.
Do you think you’ve met your needs? Is not! The above only considers that the startTime position has already been sliced, so what if the position has not been sliced? Is there nothing on the timeline? Of course not. In this case, we will find the last slice (lastIndex) in M3U8, and take the corresponding time of this slice as the start time of the timeline. And remember the cumulative slice length from ingestTime to startTimeFromM3u8 (ingestToStartFromM3u8). The diagram below.
The number of slices in M3U8 will not remain unchanged. As time goes by, the slices converted from the live stream will accumulate gradually. However, the starting time of our timeline has been drawn and cannot be changed, while the slice content in M3U8 is updated in full file every time. Take the previously stored ingestTostartFromM3u8 as the cumulative sum. At this point, the case that the startTime position has not yet generated a slice is handled. As shown in figure.
Do you guys understand this already? What I want to say is that as a front end engineer, being able to understand the requirements of the project correctly and drawing diagrams when necessary can help us write the correct code faster.