Make Shaka compatible with React Native

[kevinscroggins-youi]

Hi! Our team here at You.i TV has a huge interest in utilizing Shaka to bring improved and more consistent video playback across several projects on a range of different Tizen TVs. We have a custom C++ based engine solution that allows us to code once and deploy to multiple platforms, one of which we support being Tizen through Samsung's NaCl Pepper C++ interface. We have faced a number of limitations, restrictions and issues with the built in player both through the JavaScript AVPlay API and the C++ NaCl MediaPlayer interfaces, which is why we have branched out to seek alternative player solutions for this platform. We currently have the player working successfully on all Tizen TV models on multiple C++ applications with DRM support except for 2016 due to the limitations and restrictions around the EME 0.1b interface. We also have a React Native wrapper on top of our engine that allows our applications to be developed using either C++ or React Native. We're currently trying to get our C++ wrapper for Shaka player to work in conjunction with React Native, both of which are injected into the actual Tizen web application, however we have run into some complications. I searched through the Github issues and general information and did not see any mention of compatibility or incompatibility with React Native specifically, so we would like to inquire and try and find out more information on this front. Any information or assistance to help us get this working would be greatly appreciated!

On a technical note, we are currently seeing an issue on version 2.4.6 when attempting to load a video that triggers a strange exception around creating the MediaSource object and attaching it to the video element. On a side note, we have also tried 2.4.7, 2.5.0 Beta 3 and building from the latest source, but ran into some other issues initializing the player on those versions. We are still actively investigating this issue, but currently we are seeing an error being raised with the message Cannot create URL for blob! which is rather strange. We believe that React Native may introduce some polyfills that change the expected behaviour of this function in some way. Here is a full stack trace:

Error: Cannot create URL for blob!
    at Function.createObjectURL (<anonymous>:12679:17)
    at shaka.media.MediaSourceEngine.createMediaSource (file:///opt/usr/apps/FmHXPQSBwZ/res/wgt/scripts/shaka-player.compiled.2.4.6.debug.js:230:176)
    at new shaka.media.MediaSourceEngine (file:///opt/usr/apps/FmHXPQSBwZ/res/wgt/scripts/shaka-player.compiled.2.4.6.debug.js:229:438)
    at shaka.Player.createMediaSourceEngine (file:///opt/usr/apps/FmHXPQSBwZ/res/wgt/scripts/shaka-player.compiled.2.4.6.debug.js:833:382)
    at $jscomp.generator.Engine_.program_ (file:///opt/usr/apps/FmHXPQSBwZ/res/wgt/scripts/shaka-player.compiled.2.4.6.debug.js:848:3)
    at $jscomp.generator.Engine_.nextStep_ (file:///opt/usr/apps/FmHXPQSBwZ/res/wgt/scripts/shaka-player.compiled.2.4.6.debug.js:26:105)
    at $jscomp.generator.Engine_.next_ (file:///opt/usr/apps/FmHXPQSBwZ/res/wgt/scripts/shaka-player.compiled.2.4.6.debug.js:22:234)
    at $jscomp.generator.Generator_.next (file:///opt/usr/apps/FmHXPQSBwZ/res/wgt/scripts/shaka-player.compiled.2.4.6.debug.js:27:73)
    at b (file:///opt/usr/apps/FmHXPQSBwZ/res/wgt/scripts/shaka-player.compiled.2.4.6.debug.js:13:322)
    at tryCallOne (<anonymous>:3416:14)

The Mozilla documentation for this function also specifically indicates that using this function is deprecated / removed on newer browsers and should not be used, and that the MediaSource object should be directly attached to the media element instead. Perhaps React Native is somehow enforcing this now? Not too sure. In any case, we have been extremely impressed and grateful for having access to such a fantastic web based player, and we hope to continue using it going forward. Thank you!

[kevinscroggins-youi]

After further investigation today, we have tracked down the source of the issue, which confirms our initial suspicions that React Native is interfering with the functionality of createObjectURL, as used by Shaka. If we print out the function before injecting React Native, the following is printed to the console:

function () { [native code] }

And after React Native is injected, the function definition for createObjectURL is now:

function createObjectURL(blob) {
  if (BLOB_URL_PREFIX === null) {
    throw new Error('Cannot create URL for blob!');
  }

  return "" + BLOB_URL_PREFIX + blob.data.blobId + "?offset=" + blob.data.offset + "&size=" + blob.size;
}

Which originates from this file. The polyfill is then in turn executed here. I suspect that storing a local reference to the original function at the time of including Shaka and executing that instead should help with React Native compatibility and overcome this hurdle. I'm not sure if / what other issues may come up, but hopefully this helps shed some light on the situation.

[joeyparrish]

It doesn't seem to have anything to do with deprecating the function, as far as I can tell. It seems to be related to the native implementation of Blob URLs.

I'm not certain if we could attach the MediaSource object to the video element directly across browsers. It depends on how widely-implemented that newer method is.

Maybe we could do as you suggest and capture the native implementation at load-time. That would work around the issue, so long as you control the order of execution for the two scripts.

It would also change the mocking of URL in the related unit tests, which could then mock MediaSourceEngine instead of URL:
https://github.com/google/shaka-player/blob/0f0a3515b6423e1909c8f658407047b660b7ccbf/test/media/media_source_engine_unit.js#L164

Would you be interested to contribute a PR for this?

[kevinscroggins-youi]

Hi @joeyparrish, thank you for the quick response! That is exactly what I was thinking. Right, good call regarding the unit tests. I am definitely interesting in helping contribute a pull request for this, and I've been experimenting with this already, but stuck with some linting errors that I am trying to work my way through. I will follow up once I have made some progress. Thanks again!

[kevinscroggins-youi]

It looks like we have found a viable solution for solving this issue. I have internalized the original createObjectURL function inside of the Media Source Engine and updated the unit tests accordingly and we have managed to get playback working on React Native! We will do some more internal testing and then open a pull request soon.

[joeyparrish]

Thank you!

[kevinscroggins-youi]

I opened a PR from my personal account. Please let me know if any changes are needed! Thanks.

[joeyparrish]

@kevinscroggins-youi, thank you! I ran it through our build bot and it failed some linter checks. Can you please take a look and fix those?

[kevinscroggins-youi]

No problem! Sure thing, sorry about that.