Прямая трансляция во Flutter через WebCodecs: как пришлось написать свой декодер

Когда live-видео приходит как сырой H.264 поток через WebSocket, стандартные Flutter-плееры перестают работать. В этой статье я разбираю, почему готовые решения не подошли и как я пришёл к необходимости реализации собственного декодера на C++ с использованием FFmpeg.

https://habr.com/ru/articles/1010458/

#WebCodecs #Flutter #FFmpeg #h264 #ffi

During the WebEvolve 2024 conference in #Shanghai 🇨🇳, Jun Liu (bilibili) highlighted #WebCodecs, discussing what WebCodecs can do, its applications, advantages and limitations. #W3CChina

Check slides and event report:
▶️ https://www.w3.org/2024/01/webevolve-series-events/media/slides/liu-jun.pdf (in Chinese)
▶️ https://www.w3.org/2024/01/webevolve-series-events/media/en.report.html

... and watch the 🎬! https://youtu.be/j9H-RNdFtT0?si=bsojoc9icRwu6zlc

(again, sorry for the bad sound! fortunately there are English subtitles 😁)

I found lots of quirks while converting an MP4 to a MediaStream for #WebRTC use. I looked at:
* CDN vs. media server vs. client slide
* #WebCodecs
* captureStream
* Lots of fun getDisplayMedia options

Read about all of this with demos on webrtcHacks: https://webrtchacks.com/all-the-ways-to-send-a-video-file-over-webrtc/

🎬 For #w3cTPAC, @tidoust demoes how web technologies such as #WebCodecs, #WebGPU, #WebRTC, #Streams, etc. create a very powerful platform to process video frames in real-time.

Slides and transcript avail. at https://w3.org/2023/09/TPAC/demos/video-processing.html
Also on @w3c's YT: https://youtu.be/bEP5VrMtGaE

📗 For in-depth insight, read the 2-part article that explores how #WebApps can build processing media pipelines, by @tidoust and @dontcallmeDOM https://webrtchacks.com/video-frame-processing-on-the-web-webassembly-webgpu-webgl-webcodecs-webnn-and-webtransport/

Wanna get an overview of current @w3c work? Watch this 🎬 from @plehegar about #WebNN #MachineLearning #Security #WebRTC #PrivateAdvertising #WebAssembly #WebGPU #WebTransport #WebCodecs, #DIDs #WCAG, and much more!
https://youtu.be/rNFpgT8ZRqQ?si=H74Z5Eyo0718eH2o

This talk is among the 20 presentations recorded during the "Web Technology Forum" event, organized by the W3C China team.
English and Chinese captions are avail.!: https://www.youtube.com/watch?v=3VxD4_4NTBI&list=PLNhYw8KaLq2UvXR79_FPMFcHLG0ipGly4

Read more about this successful event: https://www.w3.org/blog/2023/infinite-intelligence-and-secure-connection-w3c-chinas-web-technology-forum-report/

9 June at 11am ET: webrtcH4cKS organizes a live panel discussion on #WebTransport, #WebCodecs and the future of #WebRTC w/ @tidoust (@w3c), Bernard Aboba (Microsoft) and Jordi Cenzano (Meta).
Get a cal invite here: https://webrtchacks.com/livestream/

This follows a series of 2 articles by @tidoust and @dontcallmeDOM: https://webrtchacks.com/real-time-video-processing-with-webcodecs-and-streams-processing-pipelines/

🗓️ June@w3c: events in 🇪🇺
▶️ 13 June: register for 🆓 to the "Web technologies for #apps" event in Paris, 🇫🇷! With speakers: @dontcallmeDOM, @espinr, Alex Bourlier, @webmink, @utopiah, @rvailleux, @MrChristian #WebTechForApps https://systematic-paris-region.org/evenement/web-technologies-for-applications-workshop-and-coding-contest/
Check out the coding contest too, with nice 🏆 to WIN!

▶️ 13-14 June: @tidoust explores the future of real-time video processing with #WebCodecs and #Streams at the 10th "Media Web Symposium" event @fraunhoferfokus in #Berlin, 🇩🇪 https://www.fokus.fraunhofer.de/go/mws/

🆕 You've enjoyed reading the creation of a multi-step video processing pipeline? This second article by @tidoust explores the actual processing of video frames! https://webrtchacks.com/video-frame-processing-on-the-web-webassembly-webgpu-webgl-webcodecs-webnn-and-webtransport/

Technologies involved are #JavaScript #WebAssembly #WebGPU #WebCodecs #WebGL #WebTransport #WebNN.

Give feedback and contribute to an experimental code for creating video processing pipelines using these web technologies: https://github.com/tidoust/media-tests/ Thanks!