Unable to play DRM video in iOS Mobile ( Safari and Chrome )

[khushhalTravelxp]

Have you read the FAQ and checked for duplicate open issues?
Yes

If the problem is related to FairPlay, have you read the tutorial?
Yes

What version of Shaka Player are you using?
4.13.2

Can you reproduce the issue with our latest release version?
Yes

Can you reproduce the issue with the latest code from main?
Yes

Are you using the demo app or your own custom app?
Both

If custom app, can you reproduce the issue using our demo app?
Yes

What browser and OS are you using?
iOS (Safari and Chrome)

For embedded devices (smart TVs, etc.), what model and firmware version are you using?
Not applicable

What are the manifest and license server URIs?
I can share them via email if needed.

What did you do?

• Tried to play a DRM-protected video on iOS mobile devices using Shaka Player v4.13.2.

• Drm video are playing fine in desktop browsers ( Mac Safari , Mac Chrome ) , Having issue in mobile browsers
  ( I am playing video in iPhone 14plus )

• Tested the playback on both the Shaka Player demo app and a custom Next.js implementation deployed at shaka-player-hls-1nf1.vercel.app.

• Changed the manifest codec from H.265 (HEVC) to H.264 (AVC) but still encountered the same issue.

What did you expect to happen?
The DRM-protected video should play successfully on iOS devices.

What actually happened?
The video failed to load, and I received an error stating "Media failed to load" in both the Shaka Player demo app and the Next.js implementation.

Are you planning to send a PR to fix it?
No

---

This is my implementation of shaka player with next js

"use client";
import { useEffect, useRef, useState } from "react";
import shaka from "shaka-player";

export default function ShakaPlayer() {
  const videoRef = useRef(null);
  const playerRef = useRef(null);
  const [codecInfo, setCodecInfo] = useState("");

  useEffect(() => {
    async function initPlayer() {
      if (!videoRef.current) return;

      shaka.polyfill.installAll();
      playerRef.current = new shaka.Player(videoRef.current);

      playerRef.current.addEventListener("error", (event) => {
        console.error("Error code", event.detail.code, "object", event.detail);
      });

      playerRef.current.getNetworkingEngine().registerRequestFilter((type, request) => {
        if (type === shaka.net.NetworkingEngine.RequestType.LICENSE) {
          request.headers["X-AxDRM-Message"] = "";
        }
      });

      const drmConfig = {
        "com.apple.fps": ""
      };
      playerRef.current.configure({
        drm: {
          servers: drmConfig,
          advanced: {
            "com.apple.fps": {
              serverCertificateUri: ""
            }
          }
        }
      });

      try {
        await playerRef.current.load("https://travelxp.akamaized.net/60a66806d659ded70c8f1eb6/manifest_v1_hd_28042023_1353_only_h264.m3u8");
        console.log("The video has been loaded successfully!");

        // Get codec information from the loaded manifest
        const tracks = playerRef.current.getVariantTracks();
        if (tracks.length > 0) {
          const codecs = tracks.map((track) => track.videoCodec + ", " + track.audioCodec).join(" | ");
          console.log("Codec Information:", codecs);
          setCodecInfo(codecs);
        } else {
          console.warn("No tracks found!");
        }
      } catch (error) {
        console.error("Error loading video", error);
      }
    }

    if (shaka.Player.isBrowserSupported()) {
      initPlayer();
    } else {
      console.error("Browser not supported!");
    }

    return () => {
      if (playerRef.current) {
        playerRef.current.destroy();
      }
    };
  }, []);

return (

);
}

https://travelxp.akamaized.net/60a66806d659ded70c8f1eb6/manifest_v1_hd_28042023_1353_only_h264.m3u8 - This manifest has the H.264 (AVC)

https://travelxp.akamaized.net/60a66806d659ded70c8f1eb6/manifest_v1_hd_28042023_1353_new.m3u8 - This manifest has multiple codec

Both are unable to play in both player ( shaka demo player and shaka player with next js )

[avelad]

I have tested both FairPlay examples from the Shaka demo and they work fine in Safari and Chrome on iOS 18.3. I have no experience with nextjs so it has to be an issue with your content or the integration with next.js.

[khushhalTravelxp]

Hiii @avelad . I have also tried to play the video on Shaka demo player , I have provided the same below , please check on iOS mobile browser ( Safari and Chrome ) , I am playing video on iPhone 14 plus on both browser :-

https://shaka-player-demo.appspot.com/demo/#audiolang=en-IN;textlang=en-IN;uilang=en-IN;assetBase64=eyJuYW1lIjoiVHJhdmVseHAiLCJzaG9ydE5hbWUiOiIiLCJpY29uVXJpIjoiIiwibWFuaWZlc3RVcmkiOiJodHRwczovL3RyYXZlbHhwLmFrYW1haXplZC5uZXQvNjBhNjY4MDZkNjU5ZGVkNzBjOGYxZWI2L21hbmlmZXN0X3YxX2hkXzI4MDQyMDIzXzEzNTNfb25seV9oMjY0Lm0zdTgiLCJzb3VyY2UiOiJDdXN0b20iLCJmb2N1cyI6ZmFsc2UsImRpc2FibGVkIjpmYWxzZSwiZXh0cmFUZXh0IjpbXSwiZXh0cmFUaHVtYm5haWwiOltdLCJleHRyYUNoYXB0ZXIiOltdLCJjZXJ0aWZpY2F0ZVVyaSI6Imh0dHBzOi8vdHJhdmVseHAuYWthbWFpemVkLm5ldC9jZXJ0L2ZhaXJwbGF5L2ZhaXJwbGF5LmNlciIsImRlc2NyaXB0aW9uIjpudWxsLCJpc0ZlYXR1cmVkIjpmYWxzZSwiZHJtIjpbIk5vIERSTSBwcm90ZWN0aW9uIl0sImZlYXR1cmVzIjpbIlZPRCJdLCJsaWNlbnNlU2VydmVycyI6eyJfX3R5cGVfXyI6Im1hcCIsImNvbS5hcHBsZS5mcHMiOiJodHRwczovL2M4ZWFlYWUxLWRybS1mYWlycGxheS1saWNlbnNpbmcuYXhwcm9kLm5ldC9BY3F1aXJlTGljZW5zZSJ9LCJvZmZsaW5lTGljZW5zZVNlcnZlcnMiOnsiX190eXBlX18iOiJtYXAifSwibGljZW5zZVJlcXVlc3RIZWFkZXJzIjp7Il9fdHlwZV9fIjoibWFwIiwiWC1BeERSTS1NZXNzYWdlIjoiZXlKaGJHY2lPaUpJVXpJMU5pSjkuZXlKMlpYSnphVzl1SWpveExDSmpiMjFmYTJWNVgybGtJam9pWWpRMU9EYzJOMlF0WVRnellpMDBNV1EwTFdGbE5qZ3RZV05oTnpBd1pETmtPRFJtSWl3aWJXVnpjMkZuWlNJNmV5SjBlWEJsSWpvaVpXNTBhWFJzWlcxbGJuUmZiV1Z6YzJGblpTSXNJblpsY25OcGIyNGlPaklzSW14cFkyVnVjMlVpT25zaVpYaHdhWEpoZEdsdmJsOWtZWFJsZEdsdFpTSTZJakl3TWpVdE1ESXRNVGhVTURNNk5EUTZNREF1T0RJeFdpSXNJbUZzYkc5M1gzQmxjbk5wYzNSbGJtTmxJanAwY25WbExDSnlaV0ZzWDNScGJXVmZaWGh3YVhKaGRHbHZiaUk2ZEhKMVpYMHNJbU52Ym5SbGJuUmZhMlY1WDNWellXZGxYM0J2YkdsamFXVnpJanBiZXlKdVlXMWxJam9pVUc5c2FXTjVJRUVpTENKM2FXUmxkbWx1WlNJNmV5SmtaWFpwWTJWZmMyVmpkWEpwZEhsZmJHVjJaV3dpT2lKVFYxOVRSVU5WVWtWZlExSlpVRlJQSW4xOVhTd2lZMjl1ZEdWdWRGOXJaWGx6WDNOdmRYSmpaU0k2ZXlKcGJteHBibVVpT2x0N0ltbGtJam9pTVRBeU0ySmhNVGhpWlRNellXRTRZVGcyTVRGbFpXRTRPR05rWldRNVpUTWlMQ0oxYzJGblpWOXdiMnhwWTNraU9pSlFiMnhwWTNrZ1FTSjlMSHNpYVdRaU9pSmpZMkkwWmpKbVlqRXhOVFZtTjJKbVltSXdOMlUzWXpjMVpESTJZVFkzWVNJc0luVnpZV2RsWDNCdmJHbGplU0k2SWxCdmJHbGplU0JCSW4wc2V5SnBaQ0k2SWpVNE9ERTVNMlZqWmpoak16YzVPR1kyTWpNeFlqTTFOMk0wTjJZd1lXSmlJaXdpZFhOaFoyVmZjRzlzYVdONUlqb2lVRzlzYVdONUlFRWlmVjE5ZlN3aWFXRjBJam94TnpNNU56WTNORFF3TENKbGVIQWlPakUzTXprNE5UTTROREI5LlZoWkEyVXJTWEFSNTJzeVVKLWRldThXTkFzVDY1Uk1KRGJESWRvZ0t4NE0ifSwicmVxdWVzdEZpbHRlciI6bnVsbCwicmVzcG9uc2VGaWx0ZXIiOm51bGwsImNsZWFyS2V5cyI6eyJfX3R5cGVfXyI6Im1hcCJ9LCJleHRyYUNvbmZpZyI6bnVsbCwiZXh0cmFVaUNvbmZpZyI6bnVsbCwiYWRUYWdVcmkiOm51bGwsImltYVZpZGVvSWQiOm51bGwsImltYUFzc2V0S2V5IjpudWxsLCJpbWFDb250ZW50U3JjSWQiOm51bGwsImltYU1hbmlmZXN0VHlwZSI6bnVsbCwibWVkaWFUYWlsb3JVcmwiOm51bGwsIm1lZGlhVGFpbG9yQWRzUGFyYW1zIjpudWxsLCJ1c2VJTUEiOnRydWUsIm1pbWVUeXBlIjoiYXBwbGljYXRpb24veC1tcGVnVVJMIn0=;panel=CUSTOM%20CONTENT;build=uncompiled

[avelad]

In Safari macOS the content works, but in Safari iOS it doesn't work, in both cases using src=, if I change streaming.useNativeHlsForFairPlay = false it works also in iOS. so the error is some problem with the Apple player. but as WO you can use streaming.useNativeHlsForFairPlay = false

[khushhalTravelxp]

@avelad I added the same key, streaming.useNativeHlsForFairPlay = false, in player.configure, but I'm still facing the same issue. I'm getting error 3016 ("Media Failed to Load").

Can you please check why the Shaka Player demo is also unable to play the video specifically on iOS mobile browsers, while it works fine on all other devices?

[avelad]

I have tried your link and changed the configuration that I mentioned and it works. I cannot be of further help t about that.... I recommend that you open a feedback assistant in Apple so that they can give you more details. Sorry...

[khushhalTravelxp]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Shaka Player - HLS DRM</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.5.2/shaka-player.compiled.min.js"></script>
  </head>
  <body>
    <video id="video" width="70%" height="700px" controls autoplay></video>
    <p><strong>Codec Info:</strong> <span id="codec-info">Loading...</span></p>
    <script>
      async function initPlayer() {
        if (!shaka.Player.isBrowserSupported()) {
          console.error("Shaka Player is not supported on this browser.");
          return;
        }

        shaka.polyfill.installAll();
        const video = document.getElementById("video");
        const player = new shaka.Player(video);

        player.configure({
          drm: {
            servers: {
              "com.apple.fps": "https://c8eaeae1-drm-fairplay-licensing.axprod.net/AcquireLicense"
            },
            advanced: {
              "com.apple.fps": {
                serverCertificateUri: "https://travelxp.akamaized.net/cert/fairplay/fairplay.cer"
              }
            }
          },
          streaming: {
            useNativeHlsForFairPlay: true,
            bufferingGoal: 20,
            rebufferingGoal: 4,
            bufferBehind: 20,
            lowLatencyMode: false
          }
        });

        player.getNetworkingEngine().registerRequestFilter((type, request) => {
          if (type === shaka.net.NetworkingEngine.RequestType.LICENSE) {
            request.headers["X-AxDRM-Message"] =
              "eyJhbGciOiJIUzI1NiJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiYjQ1ODc2N2QtYTgzYi00MWQ0LWFlNjgtYWNhNzAwZDNkODRmIiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsInZlcnNpb24iOjIsImxpY2Vuc2UiOnsiZXhwaXJhdGlvbl9kYXRldGltZSI6IjIwMjUtMDItMTlUMDU6MzY6NTUuMTAzWiIsImFsbG93X3BlcnNpc3RlbmNlIjp0cnVlLCJyZWFsX3RpbWVfZXhwaXJhdGlvbiI6dHJ1ZX0sImNvbnRlbnRfa2V5X3VzYWdlX3BvbGljaWVzIjpbeyJuYW1lIjoiUG9saWN5IEEiLCJ3aWRldmluZSI6eyJkZXZpY2Vfc2VjdXJpdHlfbGV2ZWwiOiJTV19TRUNVUkVfQ1JZUFRPIn19XSwiY29udGVudF9rZXlzX3NvdXJjZSI6eyJpbmxpbmUiOlt7ImlkIjoiMTAyM2JhMThiZTMzYWE4YTg2MTFlZWE4OGNkZWQ5ZTMiLCJ1c2FnZV9wb2xpY3kiOiJQb2xpY3kgQSJ9LHsiaWQiOiJjY2I0ZjJmYjExNTVmN2JmYmIwN2U3Yzc1ZDI2YTY3YSIsInVzYWdlX3BvbGljeSI6IlBvbGljeSBBIn0seyJpZCI6IjU4ODE5M2VjZjhjMzc5OGY2MjMxYjM1N2M0N2YwYWJiIiwidXNhZ2VfcG9saWN5IjoiUG9saWN5IEEifV19fSwiaWF0IjoxNzM5ODYwNjE1LCJleHAiOjE3Mzk5NDcwMTV9.R0nUhAfu7aQqLoufBOjhLosKOUadarN_cpLzf5kMNH8";
          }
        });

        try {
          await player.load("https://travelxp.akamaized.net/60a66806d659ded70c8f1eb6/manifest_v1_hd_28042023_1353_only_h264.m3u8");
          console.log("The video has been loaded successfully!");

          const tracks = player.getVariantTracks();
          if (tracks.length > 0) {
            const codecs = tracks.map((track) => track.videoCodec + ", " + track.audioCodec).join(" | ");
            console.log("Codec Information:", codecs);
            document.getElementById("codec-info").textContent = codecs;
          } else {
            console.warn("No tracks found!");
          }
        } catch (error) {
          console.error("Error loading video", error);
        }
      }

      document.addEventListener("DOMContentLoaded", initPlayer);
    </script>
  </body>
</html>
``

@avelad As you told you don't have no experience with nextjs , so I made a player in html with same drm protected video , but same is happenging getting an error ( media failed to load )

[avelad]

I have modified your page to use nightly and the problem is reproduced.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Shaka Player - HLS DRM</title>
    <script src="https://nightly-dot-shaka-player-demo.appspot.com/dist/shaka-player.compiled.js"></script>
  </head>
  <body>
    <video id="video" width="70%" height="700px" controls autoplay></video>
    <p><strong>Codec Info:</strong> <span id="codec-info">Loading...</span></p>
    <script>
      async function initPlayer() {
        if (!shaka.Player.isBrowserSupported()) {
          console.error("Shaka Player is not supported on this browser.");
          return;
        }

        shaka.polyfill.installAll();
        const video = document.getElementById("video");
        const player = new shaka.Player();
        await player.attach(video);

        player.configure({
          drm: {
            servers: {
              "com.apple.fps": "https://c8eaeae1-drm-fairplay-licensing.axprod.net/AcquireLicense"
            },
            advanced: {
              "com.apple.fps": {
                serverCertificateUri: "https://travelxp.akamaized.net/cert/fairplay/fairplay.cer"
              }
            }
          },
          streaming: {
            useNativeHlsForFairPlay: true,
            bufferingGoal: 20,
            rebufferingGoal: 4,
            bufferBehind: 20,
            lowLatencyMode: false
          }
        });

        player.getNetworkingEngine().registerRequestFilter((type, request) => {
          if (type === shaka.net.NetworkingEngine.RequestType.LICENSE) {
            request.headers["X-AxDRM-Message"] =
              "eyJhbGciOiJIUzI1NiJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiYjQ1ODc2N2QtYTgzYi00MWQ0LWFlNjgtYWNhNzAwZDNkODRmIiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsInZlcnNpb24iOjIsImxpY2Vuc2UiOnsiZXhwaXJhdGlvbl9kYXRldGltZSI6IjIwMjUtMDItMTlUMDU6MzY6NTUuMTAzWiIsImFsbG93X3BlcnNpc3RlbmNlIjp0cnVlLCJyZWFsX3RpbWVfZXhwaXJhdGlvbiI6dHJ1ZX0sImNvbnRlbnRfa2V5X3VzYWdlX3BvbGljaWVzIjpbeyJuYW1lIjoiUG9saWN5IEEiLCJ3aWRldmluZSI6eyJkZXZpY2Vfc2VjdXJpdHlfbGV2ZWwiOiJTV19TRUNVUkVfQ1JZUFRPIn19XSwiY29udGVudF9rZXlzX3NvdXJjZSI6eyJpbmxpbmUiOlt7ImlkIjoiMTAyM2JhMThiZTMzYWE4YTg2MTFlZWE4OGNkZWQ5ZTMiLCJ1c2FnZV9wb2xpY3kiOiJQb2xpY3kgQSJ9LHsiaWQiOiJjY2I0ZjJmYjExNTVmN2JmYmIwN2U3Yzc1ZDI2YTY3YSIsInVzYWdlX3BvbGljeSI6IlBvbGljeSBBIn0seyJpZCI6IjU4ODE5M2VjZjhjMzc5OGY2MjMxYjM1N2M0N2YwYWJiIiwidXNhZ2VfcG9saWN5IjoiUG9saWN5IEEifV19fSwiaWF0IjoxNzM5ODYwNjE1LCJleHAiOjE3Mzk5NDcwMTV9.R0nUhAfu7aQqLoufBOjhLosKOUadarN_cpLzf5kMNH8";
          }
        });

        player.addEventListener('error', (e) => {
          console.error(e);
        })

        try {
          await player.load("https://travelxp.akamaized.net/60a66806d659ded70c8f1eb6/manifest_v1_hd_28042023_1353_only_h264.m3u8");
          console.log("The video has been loaded successfully!");

          const tracks = player.getVariantTracks();
          if (tracks.length > 0) {
            const codecs = tracks.map((track) => track.videoCodec + ", " + track.audioCodec).join(" | ");
            console.log("Codec Information:", codecs);
            document.getElementById("codec-info").textContent = codecs;
          } else {
            console.warn("No tracks found!");
          }
        } catch (error) {
          console.error("Error loading video", error);
        }
      }

      document.addEventListener("DOMContentLoaded", initPlayer);
    </script>
  </body>
</html>

I've changed to use an asset we have in the demo, and it works fine:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Shaka Player - HLS DRM</title>
    <script src="https://nightly-dot-shaka-player-demo.appspot.com/dist/shaka-player.compiled.js"></script>
  </head>
  <body>
    <video id="video" width="70%" height="700px" controls autoplay></video>
    <p><strong>Codec Info:</strong> <span id="codec-info">Loading...</span></p>
    <script>
      async function initPlayer() {
        if (!shaka.Player.isBrowserSupported()) {
          console.error("Shaka Player is not supported on this browser.");
          return;
        }

        shaka.polyfill.installAll();
        const video = document.getElementById("video");
        const player = new shaka.Player();
        await player.attach(video);

        player.configure({
          drm: {
            servers: {
              "com.apple.fps": "https://fps.ezdrm.com/api/licenses/b99ed9e5-c641-49d1-bfa8-43692b686ddb"
            },
            advanced: {
              "com.apple.fps": {
                serverCertificateUri: "https://fps.ezdrm.com/demo/video/eleisure.cer"
              }
            }
          },
          streaming: {
            useNativeHlsForFairPlay: true,
            bufferingGoal: 20,
            rebufferingGoal: 4,
            bufferBehind: 20,
            lowLatencyMode: false
          }
        });

        player.addEventListener('error', (e) => {
          console.error(e);
        })

        try {
          await player.load("https://na-fps.ezdrm.com/demo/ezdrm/master.m3u8");
          console.log("The video has been loaded successfully!");

          const tracks = player.getVariantTracks();
          if (tracks.length > 0) {
            const codecs = tracks.map((track) => track.videoCodec + ", " + track.audioCodec).join(" | ");
            console.log("Codec Information:", codecs);
            document.getElementById("codec-info").textContent = codecs;
          } else {
            console.warn("No tracks found!");
          }
        } catch (error) {
          console.error("Error loading video", error);
        }
      }

      document.addEventListener("DOMContentLoaded", initPlayer);
    </script>
  </body>
</html>

I'm afraid your content is wrong, or needs to be configured with FairPlay in another way. @tykus160 do you have any another idea?

[khushhalTravelxp]

@avelad @tykus160 any update