Kalan's Blog

Kalan 頭像照片,在淡水拍攝,淺藍背景

四零二曜日電子報上線啦!訂閱訂起來

Software Engineer / Taiwanese / Life in Fukuoka
This blog supports RSS feed (all content), you can click RSS icon or setup through third-party service. If there are special styles such as code syntax in the technical article, it is still recommended to browse to the original website for the best experience.

Current Theme light

我會把一些不成文的筆記或是最近的生活雜感放在短筆記,如果有興趣的話可以來看看唷!

Please notice that currenly most of posts are translated by AI automatically and might contain lots of confusion. I'll gradually translate the post ASAP

Chat flv.js

This article is a record of my thoughts after reading the story of the author of flv.js and serves as a response.

Currently, when it comes to web development related to live streaming or video services, the most popular choices are hls.js or flv.js. Since the native video player in browsers does not support these formats, we need to find a way to decode them ourselves.

In the past, when Flash was dominant, most of these issues could be solved using Flash. However, as Flash is gradually being phased out, alternative methods must be found. Although the Media Source Extension (MSE) introduced in recent years solves this problem, it requires reading files manually and there is not much information available about MSE online. Therefore, the most convenient approach is to use ready-made solutions.

At that time, the most well-known solutions were blibli's flv.js and hls.js.

What's the difference between flv and hls?

FLV is a video format developed to address the issue of large file sizes when exporting SWF files in Flash, making it more efficient for online use. But how is it possible to transmit FLV videos over the internet?

Usually, if you want to play videos directly on web pages using RTMP, you can only decode them using Adobe Flash, which was the solution before HTML5 became mature. However, with Flash being phased out and blocked by various browsers, alternative methods must be found. Since RTMP protocol is often blocked by firewalls, using HTTP is the most appropriate approach. Nowadays, most live streaming protocols are based on HTTP-FLV.

MSE

The regular video tag in HTML5 only supports specific file formats (or containers). Therefore, formats like RTMP or m3u8 that are not supported cannot be played directly using the video tag.

To extend the capabilities of audio and video and modify or read the content of videos, the Media Source Extensions (MSE) API can be used if supported by the browser. With MSE, videos can be decoded and played using the video tag. However, implementing this requires understanding of the protocols and underlying knowledge of video encoding, as well as time for maintenance and debugging. This is why flv.js and hls.js stand out, as they effectively address the needs of frontend developers for video playback.

Handling streaming or encoding like HLS is not a simple task.

Developer's Story

This is a blog post by the core developer, Qian Qian, on his personal blog. He had the idea of packaging FLV as MP4 for web playback when he was in high school, while I was just a bystander.

At that time, HLS already existed, but its architecture was not suitable for FLV, which required progressive parsing. Therefore, a separate architecture had to be designed. The biggest challenge in development was probably the varying browser support. This was around 2015 to 2016, when browser support was not yet stable. To develop flv.js, the author even went to study the source code in chromium/media.

Feeling bored with his current job, the author requested a transfer to focus on developing flv.js. Although flv.js was launched, the management didn't seem to care much about the achievement, and the author ultimately received a low performance rating.

"There were two employees, one responsible for writing a large amount of relatively simple business code with continuous output, and the other independently developing a core library with high difficulty and large engineering volume. The development cycle was long, and it couldn't be released on time due to external factors. In the end, the first employee received a high performance rating, while the second employee received a very low score. Is this fair?"

Realizing that the company was more focused on business outcomes than technical contributions, the author quietly planned to leave and also hoped to open-source flv.js instead of letting it rot within the company.

It is important to remember that developers are human too. They have emotions and can feel dissatisfied with the current situation. I am also grateful that in the early stages of my career, I joined some challenging companies where I could accomplish what I wanted and explore different fields.

Conclusion

Currently, flv.js is used to handle most live streaming services, even when developing our own solutions, we often refer to the code inside flv.js. This demonstrates the significant contribution it has made to the software community and live streaming, all stemming from a cool idea and its realization.

After reading this, my initial feeling was a sense of regret. If you have used flv.js, you would know how significant its contribution is to the HTML5 live streaming field. However, this kind of result only leads to a C performance rating for a company.

At the same time, I started to reflect on the fact that there are more and more APIs supported by browsers now, including the recent hype around WebAssembly. Although there is a growing trend, it still feels like we are just compiling code written in another language into WebAssembly, and we haven't seen many practical applications yet.

Reflection

I am about to turn 26 years old, and although my life has improved significantly since working in Japan, there is still a gap between reality and my expectations. After becoming a Tech Lead, my work efficiency is mostly hindered by writing documents and checking progress, leaving me with little time to focus on programming. Over time, I feel physically and mentally exhausted.

Fortunately, I still have some flexibility here to learn new things, and my manager encourages me to pursue what I want to do. There is not much pressure regarding performance evaluations. However, in recent years, besides expanding my knowledge in frontend, I haven't made much progress.

Since graduating, I haven't had much time to dedicate to learning a complete set of knowledge. This is a source of anxiety and pressure for me. I used to pay great attention to the evolution of technology and tools, but in recent years, I have become increasingly indifferent. Maybe someday, when resources are more abundant, I will return to school to supplement my knowledge and write the code I wanted to write initially. This part will be left to fate.

Prev

Chrome Cookie Policy Adjustments and Reflections

Next

Svelte — What made me meet you like this

If you found this article helpful, please consider buy me a drink ☕️ It'll make my ordinary day shine✨

Buy me a coffee