Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.


Web DRM












Watching videos anytime, anyplace
























📄


📄
📄
🔑
📄
📄
🔒
🔑
📄🔒 📄🔒 📄🔒
📄
📄
🔒
🔑
📄🔒 📄🔒 📄🔒
📄
📄
🔒
🔑
📄🔒 📄🔒 📄🔒
📄
📄
🔒
🔑
📄🔒
🔑
📄🔒 📄🔒

 
 



 
 





 
 


📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒

 
 


📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒

 
 


📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒




























function onEncrypted(e) {
// webm
console.log(e.initDataType);
// [30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 30, 31, 32, 33,...
function onEncrypted(e) {
// webm
console.log(e.initDataType);
// [30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 30, 31, 32, 33,...
https://arashafiei.wordpress.com/2012/11/13/quick-dash/


[237,239,139,169,121,214,74,206,163,200,39,220,213,29,33,237]
.reduce( (ac, e) => ac + ("0" + e.toString(16)).slice(-2), "...
[154,4,240,121,152,64,66,134,171,146,230,91,224,136,95,149]
.reduce( (ac, e) => ac + ("0" + e.toString(16)).slice(-2), "" ...


const config = [{
initDataTypes: ['keyids', 'cenc'],
videoCapabilities: [{
contentType: 'video/mp4; codecs="avc1.4d401f"'
}...
navigator
.requestMediaKeySystemAccess('com.widevine.alpha', config)
.then( keySystemAccess => {
return keySystemAccess.cre...
function onEncrypted(e) {
const session = video.mediaKeys.createSession();
session.addEventListener('message', onMessage, ...
function onMessage(e) {
const challenge = e.message;
const session = e.target;
getKey(challenge)
.then( license => {
sessi...
function getKey(challenge) {
return new Promise( resolve => {
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://w...
2016/11/11 - http://abematv.connpass.com/event/42695/
2016/12/08 - http://abematv.connpass.com/event/43779/
























Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Web ブラウザで DRM
Upcoming SlideShare
Loading in …5
×

Web ブラウザで DRM

3,531 views

Published on

Describe the basics of how you protect contents on the Web by Common Encryption, Encrypted Media Extensions, Content Decryption Module, and DRM solutions such as Microsoft PlayReady and Google Widevine.

Published in: Engineering
  • Be the first to comment

Web ブラウザで DRM

  1. 1. 
 Web DRM
  2. 2. 
 
 
 

  3. 3. 
 

  4. 4. Watching videos anytime, anyplace
  5. 5. 
 

  6. 6.
  7. 7.
  8. 8.
  9. 9.
  10. 10. 
 

  11. 11.
  12. 12.
  13. 13. 
 

  14. 14. 📄
  15. 15.
  16. 16. 📄
  17. 17. 📄 🔑
  18. 18. 📄 📄 🔒 🔑 📄🔒 📄🔒 📄🔒
  19. 19. 📄 📄 🔒 🔑 📄🔒 📄🔒 📄🔒
  20. 20. 📄 📄 🔒 🔑 📄🔒 📄🔒 📄🔒
  21. 21. 📄 📄 🔒 🔑 📄🔒 🔑 📄🔒 📄🔒
  22. 22. 
 
 


  23. 23. 
 
 

 

  24. 24. 
 
 

 📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒
  25. 25. 
 
 

 📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒
  26. 26. 
 
 

 📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒
  27. 27.
  28. 28. 
 

  29. 29.
  30. 30. 
 

  31. 31.
  32. 32. 
 
 
 
 
 
 

  33. 33. function onEncrypted(e) { // webm console.log(e.initDataType); // [30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 30, 31, 32, 33, 34, 35] console.log( new Uint8Array(e.initData).map(d => d.toString(16)) ); } video.addEventListener('encrypted', onEncrypted, false);
  34. 34. function onEncrypted(e) { // webm console.log(e.initDataType); // [30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 30, 31, 32, 33, 34, 35] console.log( new Uint8Array(e.initData).map(d => d.toString(16)) ); } video.addEventListener('encrypted', onEncrypted, false);
  35. 35. https://arashafiei.wordpress.com/2012/11/13/quick-dash/
  36. 36.
  37. 37. [237,239,139,169,121,214,74,206,163,200,39,220,213,29,33,237] .reduce( (ac, e) => ac + ("0" + e.toString(16)).slice(-2), "" ); // "edef8ba979d64acea3c827dcd51d21ed"
 // = Widevine SYSTEM ID
  38. 38. [154,4,240,121,152,64,66,134,171,146,230,91,224,136,95,149] .reduce( (ac, e) => ac + ("0" + e.toString(16)).slice(-2), "" ); // "9a04f07998404286ab92e65be0885f95"
 // = PlayReady SYSTEM ID
  39. 39.
  40. 40. const config = [{ initDataTypes: ['keyids', 'cenc'], videoCapabilities: [{ contentType: 'video/mp4; codecs="avc1.4d401f"' }] }];
  41. 41. navigator .requestMediaKeySystemAccess('com.widevine.alpha', config) .then( keySystemAccess => { return keySystemAccess.createMediaKeys(); } ) .then( createdMediaKeys => { video.setMediaKeys(createdMediaKeys); } ) .catch( err => console.error('Failed to set up MediaKeys', err) );
  42. 42. function onEncrypted(e) { const session = video.mediaKeys.createSession(); session.addEventListener('message', onMessage, false); session.generateRequest(e.initDataType, e.initData) .catch( err => { console.error('Failed to request license request', err); } ); } video.addEventListener('encrypted', onEncrypted, false);
  43. 43. function onMessage(e) { const challenge = e.message; const session = e.target; getKey(challenge) .then( license => { session .update(license) .catch( err => { console.error('Failed to update the session: ', err); }); }); }
  44. 44. function getKey(challenge) { return new Promise( resolve => { const xhr = new XMLHttpRequest(); xhr.open('POST', 'http://widevine-license-challenge-url', true); xhr.responseType = 'arraybuffer'; xhr.onload = function () { resolve( this.response ); }; xhr.send(challenge); }); }
  45. 45. 2016/11/11 - http://abematv.connpass.com/event/42695/ 2016/12/08 - http://abematv.connpass.com/event/43779/
  46. 46. 
 
 
 
 
 

  47. 47. 
 
 
 
 
 


×