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

Don't load hls.js from Cloudflare #605

Closed
mxmtsk opened this issue Mar 25, 2019 · 9 comments
Closed

Don't load hls.js from Cloudflare #605

mxmtsk opened this issue Mar 25, 2019 · 9 comments

Comments

@mxmtsk
Copy link

mxmtsk commented Mar 25, 2019

Is it possible to not load hls.js from cloudflare but locally from the own server? We are building a client website that cannot load from third party sites.

@mryarbles
Copy link
Contributor

I had the same issue. Had to fork this project to resolve.

@mxmtsk
Copy link
Author

mxmtsk commented Mar 26, 2019

I have done the same. I wonder if a PR would be accepted @cookpete cause that would solve a lot of GDPR issues in Europe if you could just reference a local file or your own CDN. :)

@schuylr
Copy link

schuylr commented May 4, 2019

Ideally this should be bundled as a dependency, or at least give us the power to define where it loads from.

@tim-mit
Copy link

tim-mit commented May 15, 2019

FYI you can achieve this already and don't need to fork the project or wait for any changes before doing so.

The code that by default loads hls.js (and dash) from a CDN first calls the function at https://github.com/CookPete/react-player/blob/master/src/utils.js#L63-L66. What this does is check for the following window variables existing;

  • window.Hls
  • window.dashjs

These values are defined in HLS_GLOBAL and DASH_GLOBAL in https://github.com/CookPete/react-player/blob/master/src/players/FilePlayer.js#L11,L14.

If the variables already exist then instead of sourcing the libraries from the CDN react-player simply expects the libraries to already be available at those variables. So all you need to do in your own code is source the libraries as you see fit, attach them to those window variables and then use react-player.

We use this in our own codebase and it works fine. It could be worth including this info in the documentation somewhere?

@dancron
Copy link

dancron commented Jun 12, 2019

I am preparing to deploy this code to run on servers across the world in production. Some installations will have the server and the client (laptop/browser) connected to the internet, and some installations will be on local networks which are not connected to the internet. Thanks to the window variables provided (see the comment by @tim-mit), it won't be too hard for me to get this to run without internet connectivity.

However, my vote would be to change the code so that by default it does not dynamically download hls.min.js at run time. I would prefer the default to change so HLS is included at build time.

@cookpete
Copy link
Owner

However, my vote would be to change the code so that by default it does not dynamically download hls.min.js at run time. I would prefer the default to change so HLS is included at build time.

This would bundle a 242 KB file into the library, for every implementation, regardless of if they are using HLS or not. Hopefully it's obvious why this isn't a great idea.

@tim-mit's solution is a happy coincidence, but actually quite elegant. Simply including the script (eg <script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.12.4/hls.min.js"></script>) before mounting the player, the library will use whatever is loaded in the global scope, as long as it makes the correct global available.

@ahmad-crossplatform
Copy link

ahmad-crossplatform commented Oct 17, 2019

Hello guys , I am pretty new to React and web development in general .
@tim-mit mentioned that we can change the values of HLS_GLOBAL and DASH_GLOBAL to get what we need by accessing some kind of window .

What does that mean ? does the window mean the div that wraps React-Player component ? or is there another way to access HLS_GLOBAL and DASH_GLOBAL ?

Edited:
now i have the code like this before I place the React-Player component

	window.Hls = "https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.12.4/hls.js";
	window.dashjs =
		"https://cdnjs.cloudflare.com/ajax/libs/dashjs/3.0.0/dash.all.debug.js";

and that managed to crash the code which means i am getting closer , but what values i should place here ?
I got the following error
Uncaught (in promise) TypeError: Hls is not a constructor

@tim-mit
Copy link

tim-mit commented Oct 17, 2019

You'll need to get the Hls constructor that Hls.js exposes attached to the variable window.Hls.
The variable window is a special global object that the browser always has available, if you don't scope your variables differently they will be available as window.<variable name>.

From the looks of things just including <script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.12.4/hls.js"></script> before your own code will likely be enough no more code required as once that external code loads it sets window.Hls. Be careful of asynchronous loading though, i.e. don't try and auto-play in your own js code that may end up being invoked before the third party library has loaded.

If you're using npm modules you may be able to find one of those that packages hls.js up and then not have to worry about the script tag or async loading. You'd just import the Hls constructor provided by the module and then set window.hls to the value you imported.

@subvertallchris
Copy link

subvertallchris commented Apr 21, 2020

If anyone is using webpack and struggling with getting it just right, you can do it in your webpack config using imports-loader like this:

    rules: [
      {
        test: require.resolve('react-player/lib/utils'),
        use: 'imports-loader?window.Hls=hls.js'
      },
    ]

I think this is a pretty unfortunate workaround, it feels brittle and unnecessary. While I agree that bundling Hls.js with ReactPlayer unfairly penalizes folks who aren't using hls, I feel like there should be a compromise to avoid quietly downloading files from a CDN. This might be extreme but maybe the Hls portions of this library could be split out into a separate package that includes hls.js as a dependency, similar to what you see with Apollo, Babel, Uppy, etc,...?

Regardless, thank you for your work on this library, it's excellent.

stepan-anokhin added a commit to stepan-anokhin/VideoDeduplication that referenced this issue Oct 26, 2020
By default react-player tries to lazy-load playback SDK from CDN.
But the application must be able play video files when Internet
connection is not available. To solve that we bundle flv.js and
initialize global variable consumed by react-player's FilePlayer.

See https://www.npmjs.com/package/react-player#sdk-overrides
See cookpete/react-player#605 (comment)
johnhbenetech pushed a commit to benetech/VideoDeduplication that referenced this issue Oct 26, 2020
* Handle missing file in thumbnail endpoint

* Handle missing file in watch endpoint

* Display playback/loading errors

* Handle file missing in database case

* Use bundled flv.js

By default react-player tries to lazy-load playback SDK from CDN.
But the application must be able play video files when Internet
connection is not available. To solve that we bundle flv.js and
initialize global variable consumed by react-player's FilePlayer.

See https://www.npmjs.com/package/react-player#sdk-overrides
See cookpete/react-player#605 (comment)

* Suppress excessive flv.js error logs (#149)
johnhbenetech added a commit to benetech/VideoDeduplication that referenced this issue Nov 20, 2020
* File cluster proof of concept (#162)

* Implement files data-access object

* Migrate to files-dao

* Update server tests

* Fix regression

* Make module naming more ideomatic

* Resolve linting issues

* Support expunging by session scope

* Draft matches extraction

* Filter matches by distance

* Test query matches with cycles

* Test match loading

* Emulate matches pagination

* Update MatchesDAO tests

* Migrate server.api to MatchesDAO

* Update api/matches tests

* Test multiple hops with cycles

* Update file matches page

* Update cluster page to consume new matches format

* Improve graph container responsiveness

* Fix linting issues

* Improve graph responsiveness

* Implement generic loading trigger

* Support matches filtering

* Implement dynamic matches loading

* Fix loading trigger message

* Fix match reducers

* Improve dynamic match loading

* Implement neighbor loading

* Adjust graph style

* Enable zooming

* Enable cluster navigation

* Fix tooltips

* Make edge opacity dynamic

* Make color scheme static

* Handle playback issues (#165)

* Handle missing file in thumbnail endpoint

* Handle missing file in watch endpoint

* Display playback/loading errors

* Handle file missing in database case

* Use bundled flv.js

By default react-player tries to lazy-load playback SDK from CDN.
But the application must be able play video files when Internet
connection is not available. To solve that we bundle flv.js and
initialize global variable consumed by react-player's FilePlayer.

See https://www.npmjs.com/package/react-player#sdk-overrides
See cookpete/react-player#605 (comment)

* Suppress excessive flv.js error logs (#149)

* coding style improvements and small refactors

* Fix matches loading (#166) (#168)

* Support config tags (#167)

* Support tags by PathReprStorage

* Support tags by SQLiteReprStorage

* Update extract_features.py to support tags

* Add missing dependency

* Make config tag opaque

* Update extract_features.py sript

* Delete obsolete code

* Update repr storage tests

* Update generate_matches.py script

* Update template_matching.py script

* Update general_tests

* Add missing unit-test dependency

* Optimize module dependencies

* Implement side-by-side match comparison view (#155) (#169)

* Refactor file cluster page

* Refacto VideoInformationPane

* Make video details elements collapsible

* Move distance element to common package

* Add comparable file component

* Implement reusable file summary

* Implement match file list

* Implement mother file view

* Fetch matched files scenes

* Setup comparison page routing

* Reset video player on file change

* Fix matched file header

* Improve distance style

* Hook up compare button

* Fix match duplication

* Fix linting issues

* Make compare button primary-colored

* added missing dependency

* removed unnecessary files

* additional refactor and linting fixes

* Improve cluster view (#171)

* Refactor FileSummaryHeader

* Refactor linear list item

* Extract match file id from URL

* Navigate to comparison page on edge click

* Navigate to compare from single match preview

* Improve cluster tooltips

* Implement node highlighting

* Improve link popover

* Fix linting issues

* Add navigation from comparison page (#172) (#177)

* Handle partial processing results (#178)

* Handle missing data in backend (#135)

* Test missing data processing

* Fix go back navigation (#179)

* Fix go-back navigation

* Preserve filters and search results

Previous file filters and fetched files should not be updated when
we navigate from video-details page to the collection page.

* Handle missing video length

* Fix match category selector

* Ensure initial file loading

* Add match file enumeration & sorting (#181)

* Add match enumeration (#175)

* Sort files by match score

* Handle uninitialized ref

* Add image version option (#180)

* Ensure shell is bash

* Refactor setup script

* Select image version during setup (#97)

* Add make-goal for forced setup update

* Improve scripts output

* Add docker update and purge goals (#114)

* Use arrow-select for pre-built option

* Add various UI improvements (#173, #174, #176) (#182)

* Handle dense layout

* Add active filters indication (#176)

* Preserve file view type during session (#174)

* Enlarge links hitbox (#173)

* Fix link click handler

* augmented dataset evaluation pipeline

* Modifications to support benchmarking script

* Add cluster API endpoint (#183) (#184)

* Separate cluster and matches enpoints (#183)

* Update server tests

* Test matches endpoint

* Update REST client

* Refacto API client

* Creat generic hook for entity loading

* Consume matches and cluster API separately

* Manage fields inclusion

* Update immediate match loading

* Update comparison page

* Remove trash

* Remove trash

* Refactor ui state management (#185, #189) (#190)

* Move helpers to separate modules

* Move file cache to separate package

* Move file matches state to separate package

* Move cluster state to separate package

* Move file-list state to separate package

* Collect reusable prop-types in a public package

* Extract entity fetching logic

* Refactor file-cluster state

Use generic approach to manage file-cluster state.

* Refactor file-matches state

Use generic approach to manage file-matches state.

* Update server client

* Update matches params (#189)

* Fix file cluster update

* Disable false-positive linting issue

* Create post_push

* Simplify docker-compose workflow (#187, #188) (#191)

* Simplify docker-compose workflow

Use `build` and `image` simultaneously in compose-file. As a result
no shared configuration is needed and all the configuration is
managed by environment variables (located in the .env file).

To use prebuild images user will need to run `make pull`
To use local images (if production mode is disabled) user will
need to run `make build`. That's it.

* Commit missing script

* Add revision information to docker images (#188)

* Benchmarking improvements

* Update and rename post_push to build

* Delete build

* Parse exif general encoded date (#137) (#193)

* Update db schema

* Fix media-info output parsing

* Parse exif date-time

* Use date-time on backend

* Update tests

* Use numeric timestamps on frontend

* Handle NaN-representation of missing values

The exif metadata is pre-processed by the pandas.json_normalize
method which replaces any missing value with NaNs. As a result
the float value may appear in place of string.

* Handle pandas missing data representation

pandas.Series heuristically determines type of the underlying data
and tries to represent a missing values according to that data
time. In case of datetime the missing values are represented by
pandas.NaT which is not compatible with SQLAlchemy framework. To
fix that we have to explicitly transform NaTs to Nones.
See https://pandas.pydata.org/pandas-docs/stable/user_guide/missing_data.html#datetimes

* Fix deprecated import

* Fix database URI

* Handle more date columns

* Update video metadata model (#139) (#196)

* Update db schema

* Update db access logic

* Update frontend

* Update server tests

* Update storage tests

* Additional error handling for dealing with missing files

* Added Missing frame level features check

* Quick merge fix

Co-authored-by: Stepan Anokhin <38860530+stepan-anokhin@users.noreply.github.com>
Co-authored-by: Felipe Batista <fsbatista1@gmail.com>
Co-authored-by: Stepan Anokhin <stepan.anokhin@gmail.com>
albanqoku added a commit to albanqoku/react-player that referenced this issue Feb 24, 2021
Webmaster1116 added a commit to Webmaster1116/video-player that referenced this issue May 20, 2021
webmiraclepro added a commit to webmiraclepro/video-player that referenced this issue Sep 9, 2022
@edoko edoko mentioned this issue May 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants