docs: Add Widevine Service Certificate tutorial (shaka-project#5018)

Also fixes a related typo in the FairPlay tutorial and adds a missing
entry to the tutorial index.

docs/tutorials/fairplay.md

@@ -53,12 +53,12 @@ you.
 const req = await fetch('https://example.com/cert.der');
 const cert = await req.arrayBuffer();
 
-player.configure('drm.advanced.com\\.apple\\.fps\\.serverCertificate',
+player.configure('drm.advanced.com\\.apple\\.fps.serverCertificate',
                  new Uint8Array(cert));
 ```
 
 ```js
-player.configure('drm.advanced.com\\.apple\\.fps\\.serverCertificateUri',
+player.configure('drm.advanced.com\\.apple\\.fps.serverCertificateUri',
                  'https://example.com/cert.der');
 ```
 

docs/tutorials/index.json

@@ -9,13 +9,15 @@
   { "license-wrapping": { "title": "License Wrapping" } },
   { "ui": { "title": "UI Library" } },
   { "ui-customization": { "title": "Configuring the UI" } },
+  { "errors": { "title": "Error Handling" } },
   { "a11y": { "title": "Creating accessible buttons" } },
   { "ad_monetization": { "title": "Serving ads with our IMA SDK integration" } },
   { "plugins": { "title": "Plugins and Customizing the Build" } },
   { "manifest-parser": { "title": "Manifest Parser Plugins" } },
   { "architecture": { "title": "Architecture Diagrams" } },
   { "service-worker": { "title": "Service Worker Caching" } },
   { "offline": { "title": "Offline Storage and Playback" } },
+  { "widevine-service-certs": { "title": "Widevine Service Certificates" } },
   { "fairplay": { "title": "FairPlay support" } },
   { "application-level-redirects": { "title": "Application-Level Redirects" } },
   { "blob-url": { "title": "Blob URL" } },

docs/tutorials/widevine-service-certs.md

@@ -0,0 +1,45 @@
+# Widevine Service Certificates
+
+With Widevine, you can eliminate one round-trip to your license server or proxy
+per session by preloading a Widevine service certificate. You can either provide
+it directly or set a URI and let Shaka fetch it for you. Do this before calling
+`player.load()`. The values will persist across multiple calls to `load()` on
+the same `shaka.Player` instance.
+
+```js
+// This is an example of loading the certificate from your site at runtime.
+// You could also choose to bundle it into your JavaScript as a Uint8Array.
+const req = await fetch('https://example.com/service.cert');
+const cert = new Uint8Array(await req.arrayBuffer());
+
+// This is the short form for configuration of a certificate:
+player.configure('drm.advanced.com\\.widevine\\.alpha.serverCertificate',
+                 cert);
+
+// This is the long form:
+player.configure({
+  drm: {
+    advanced: {
+      'com.widevine.alpha': {
+        'serverCertificate': cert,
+      },
+    },
+  },
+});
+
+
+// This is the short form for configuration of a certificate URI:
+player.configure('drm.advanced.com\\.widevine\\.alpha.serverCertificateUri',
+                 'https://example.com/service.cert');
+
+// This is the long form:
+player.configure({
+  drm: {
+    advanced: {
+      'com.widevine.alpha': {
+        'serverCertificateUri': 'https://example.com/service.cert',
+      },
+    },
+  },
+});
+```