KKCompany-TMT#9-Music Streaming Player A guide to DRM and cross-platform development issues

Music Streaming Player - A guide to DRM and cross-platform development issues, 吳建勳 (Ben Wu), KKCompany

分享在構建前端音樂串流播放器時遇到的痛點和解決方案。像是針對 Mac, Windows, iPadOS, Android 等所使用的 DRM 決策，以及 Chromium 陣營及其他陣營的瀏覽器上針對音檔播放時的處理細節。

Sharing the pain points and solutions we encountered when building front-end music streaming players. The solutions include DRM solutions for Mac, Windows, iPadOS, Android, etc., as well as details on how to handle audio playback on Chromium-based and other browser-based platforms.

Transcript

1. 揭開音樂串流播放器的世界：探索 DRM 和跨平台開發的挑戰 Music Streaming Player A guide to DRM and cross-platform development issues
2. • I’m Ben Wu（吳建勳） • Back-end engineer • 2 years at KKBOX • Prepare for K8s CKA recently • My cat is cute Self introduction
3. 04 Takeway 03 Issues during developing 02 Build a music streaming player 01 Background Agenda
4. Background
6. The moment I joined KKBOX…
7. The moment I joined KKBOX…
8. Build a music streaming player
9. Requirements DRM Protect digital content Cross-platform Reach more users Audio file Essential for player
10. • DRM refers to a set of technologies used to protect the rights associated with digital content. • It is primarily used to control access, usage, and distribution of copyrighted material, such as movies, music, e-books, and software. • DRM systems employ encryption, licensing, and access control mechanisms to enforce restrictions on how digital content can be used and distributed. • The purpose of DRM is to prevent unauthorized copying, sharing, and piracy of digital content, while allowing content owners to monetize and control their intellectual property. Digital Rights Management (DRM)
11. source: https://community.roonlabs.com/t/kkbox-roon-integration-is-coming/230277/17 https://www.ithome.com.tw/news/95627
12. Digital Rights Management (DRM) • DRM refers to a set of technologies used to protect the rights associated with digital content. • It is primarily used to control access, usage, and distribution of copyrighted material, such as movies, music, e-books, and software. • DRM systems employ encryption, licensing, and access control mechanisms to enforce restrictions on how digital content can be used and distributed. • The purpose of DRM is to prevent unauthorized copying, sharing, and piracy of digital content, while allowing content owners to monetize and control their intellectual property.
13. End user Digital Rights Management (DRM) Content owner Developer • Usage rules • Support creators #Support genuine • Copyright protection • Safeguard revenue • License management #Guaranteed income • Hard to develop • Some features are limited #Err #Q_Q
14. • Concern about restrictions • Advocate for user rights #nonprofit organization #liberties #digital world W3C World Wide Web Consortium Digital Rights Management (DRM) • Develope standards • Create a balance #nonprofit organization #standard #develop #rules EFF Electronic Frontier Foundation
15. Digital Rights Management (DRM)
16. How do browsers play media with DRM? source: https://unsplash.com/photos/V7z8MGbfF5Q
17. EME Encrypted Media Extensions Provide mechanisms for encrypting digital content CDM Content Decryption Module Decrypt data content protected by EME EME? MSE? CDM? MSE Media Source Extensions Allow websites to access digital content
18. 1 2 Manifest Encrypted Media (Chunks) License 3 EME? MSE? CDM?
19. Code examples of EME - requestMediaKeySystemAccess Safari
20. Code examples of EME - requestMediaKeySystemAccess Chrome
22. Issues during developing
23. Integrating DRM-protected audio files
24. Integrating DRM-protected audio files
25. iPad/iOS sound control
26. Safari Chrome
27. Safari Chrome
28. Safari Chrome
29. iPad/iOS sound control User-Agent from Safari cannot confirm the type of device iPad/iOS doesn’t allow adjusting volume using JavaScript
30. Auto-play
31. Auto-play
32. Auto-play
37. Takeaway
38. • DRM aims to protect copyright, but in some aspects, it can also cause certain harm to user rights. • There are open-source DRM players available in the market, so you don't have to reinvent the wheel. • EME is an optional feature that enables browsers to have the capability to play DRM-protected content. • MSE allows streaming media to have a more diverse set of playback mechanisms, such as dynamic playback and caching. • CDM is a decryption module provided by various DRM vendors. • iPad/iOS doesn’t allow adjusting volume using JavaScript • User-Agent from Safari cannot confirm the type of device • If there is an autoplay function, pay attention to the auto-play policy Takeaway
39. Thanks !
40. • https://web.dev/media-eme/#how-does-eme-work • https://shaka-player-demo.appspot.com/docs/api/tutorial-fairplay.html • https://developer.mozilla.org/en-US/docs/Web/API/Navigator/requestM ediaKeySystemAccess • https://developer.mozilla.org/en-US/docs/Web/API/Encrypted_Media_Ex tensions_API • https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Exten sions_API • https://www.youtube.com/watch?v=hUeGT91deSM resource