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.

1.
Web DRM

9. Watching videos anytime, anyplace

31. 📄

35. 📄

36. 📄
🔑

37. 📄
📄
🔒
🔑
📄🔒 📄🔒 📄🔒

38. 📄
📄
🔒
🔑
📄🔒 📄🔒 📄🔒

39. 📄
📄
🔒
🔑
📄🔒 📄🔒 📄🔒

40. 📄
📄
🔒
🔑
📄🔒
🔑
📄🔒 📄🔒

43.
📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒

44.
📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒

45.
📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒 📄🔒📄🔒 📄🔒

67. 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);

68. 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);

70. https://arashafiei.wordpress.com/2012/11/13/quick-dash/

76. [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

77. [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

80. const config = [{
initDataTypes: ['keyids', 'cenc'],
videoCapabilities: [{
contentType: 'video/mp4; codecs="avc1.4d401f"'
}]
}];

81. 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) );

83. 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);

85. 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);
});
});
}

86. 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);
});
}

89. 2016/11/11 - http://abematv.connpass.com/event/42695/
2016/12/08 - http://abematv.connpass.com/event/43779/