Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make Shaka compatible with React Native #1842

Closed
kevinscroggins-youi opened this issue Mar 13, 2019 · 8 comments

Comments

Projects
None yet
3 participants
@kevinscroggins-youi
Copy link

commented Mar 13, 2019

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

This comment has been minimized.

Copy link
Author

commented Mar 13, 2019

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

This comment has been minimized.

Copy link
Member

commented Mar 14, 2019

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:

const originalCreateObjectURL = window.URL.createObjectURL;

Would you be interested to contribute a PR for this?

@joeyparrish joeyparrish changed the title Is Shaka compatible with React Native? Make Shaka compatible with React Native Mar 14, 2019

@kevinscroggins-youi

This comment has been minimized.

Copy link
Author

commented Mar 14, 2019

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!

@shaka-bot shaka-bot added this to the Backlog milestone Mar 14, 2019

@kevinscroggins-youi

This comment has been minimized.

Copy link
Author

commented Mar 15, 2019

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

This comment has been minimized.

Copy link
Member

commented Mar 15, 2019

Thank you!

nitro404 added a commit to nitro404/shaka-player that referenced this issue Mar 16, 2019

Fix React Native createObjectURL polyfill incompatibility
React Native introduces its own polyfill for window.URL.createObjectURL which is not compatible with Shaka. Encapsulating a reference to the original function inside of the MediaSourceEngine circumvents this issue.

Issue google#1842
@kevinscroggins-youi

This comment has been minimized.

Copy link
Author

commented Mar 18, 2019

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

@joeyparrish joeyparrish modified the milestones: Backlog, v2.5 Mar 18, 2019

@joeyparrish

This comment has been minimized.

Copy link
Member

commented Mar 18, 2019

@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

This comment has been minimized.

Copy link
Author

commented Mar 18, 2019

No problem! Sure thing, sorry about that.

nitro404 added a commit to nitro404/shaka-player that referenced this issue Mar 19, 2019

Fix React Native createObjectURL polyfill incompatibility
React Native introduces its own polyfill for window.URL.createObjectURL which is not compatible with Shaka. Encapsulating a reference to the original function inside of the MediaSourceEngine circumvents this issue.

Issue google#1842

nitro404 added a commit to nitro404/shaka-player that referenced this issue Mar 19, 2019

Fix React Native createObjectURL polyfill incompatibility
React Native introduces its own polyfill for window.URL.createObjectURL which is not compatible with Shaka. Encapsulating a reference to the original function inside of the MediaSourceEngine circumvents this issue.

Issue google#1842

nitro404 added a commit to nitro404/shaka-player that referenced this issue Mar 20, 2019

Fix React Native createObjectURL polyfill incompatibility
React Native introduces its own polyfill for window.URL.createObjectURL which is not compatible with Shaka. Encapsulating a reference to the original function inside of the MediaSourceEngine circumvents this issue.

Issue google#1842

kevinscroggins-youi added a commit to kevinscroggins-youi/shaka-player that referenced this issue Apr 15, 2019

Fix React Native createObjectURL polyfill incompatibility (google#1845)
React Native introduces its own polyfill for window.URL.createObjectURL which is not compatible with Shaka. Encapsulating a reference to the original function inside of the MediaSourceEngine circumvents this issue.

Closes google#1842

kevinscroggins-youi added a commit to kevinscroggins-youi/shaka-player that referenced this issue Apr 17, 2019

Fix React Native createObjectURL polyfill incompatibility (google#1845)
React Native introduces its own polyfill for window.URL.createObjectURL which is not compatible with Shaka. Encapsulating a reference to the original function inside of the MediaSourceEngine circumvents this issue.

Closes google#1842

kevinscroggins-youi added a commit to kevinscroggins-youi/shaka-player that referenced this issue May 9, 2019

Fix React Native createObjectURL polyfill incompatibility (google#1845)
React Native introduces its own polyfill for window.URL.createObjectURL which is not compatible with Shaka. Encapsulating a reference to the original function inside of the MediaSourceEngine circumvents this issue.

Closes google#1842

kevinscroggins-youi added a commit to YOU-i-Labs/shaka-player that referenced this issue May 9, 2019

Fix React Native createObjectURL polyfill incompatibility (google#1845)
React Native introduces its own polyfill for window.URL.createObjectURL which is not compatible with Shaka. Encapsulating a reference to the original function inside of the MediaSourceEngine circumvents this issue.

Closes google#1842

@shaka-bot shaka-bot added the archived label May 19, 2019

@google google locked and limited conversation to collaborators May 19, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.