devcshort / react-hls

Simple React component for playing hls/rtmp live streams.

Languages	Developer Tools

Frontend	Backend

react-hls's Issues

Playerref result show undefined

Hi, i tried the playerref in my application. but it display undefined in the console. I tried this example. Am i missing something? Thanks in advance.

Get Current Position of Pre-Recorded Video

My site is encoding pre-recorded video assets in hls format. I need to get the current position of the video playback to set a bookmark. There doesn't seem to be a way to do this.

can we use it for audio files too?

If yes, then how to play and pause the audio?

Define thumbnail for video

Have you thought about adding functionality for defining the thumbnail for a video file? Mine show a black viewer right now.

Add support for iOS web browsers

This is not working on ios browsers, I guess because hls are natively supported on ios browsers and even hls.js (https://github.com/video-dev/hls.js) has to be handled separately for ios browers

As I am using react-hls, do you have suggestion on what to include in codes to make it work on ios browsers?

                            <ReactHlsPlayer
                                url={this.state.video.hls_url}
                                autoplay={false}
                                controls={true}
                                width="100%"
                                height="auto"
                            />

ReferenceError: window is not defined

I using react-hls lib with next.js but when i import lib in component it throw an error: ReferenceError: window is not defined

React-native app

is it working on react-native also?

Error safari mobile does not work

Hi, I am using react htl player and it works perfect in browsers, but in safari mobile it doesn't, I can't find the error, they know it may be the error.

 <ReactHlsPlayer
            url={this.state.video}
            autoplay={true}
            controls={true}
            width="100%"
            height="80%"
            className="playerppal"
            hlsConfig={{
              liveDurationInfinity:false,
              forceVideo: true,
              autoStartLoad: true,
              startPosition: -1,
              debug: false,
            }}
          />

Thank you

react 17 support

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: hls-player@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/react-hls-player
npm ERR! react-hls-player@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/ibrahimabushammah/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ibrahimabushammah/.npm/_logs/2021-11-12T17_24_37_235Z-debug.log

type error: this._initPlayer not defined

Hello. Thanks for publishing this module!
I'm attempting to use it in a create-react app and get this error when loading the component.
Using the URL directly in the browser plays the stream, however using the same exact URL in my component's render function I get that error.

import React from 'react';
import ReactHLS from 'react-hls-player';

class VideoPlayer extends React.Component {

render() {
return(

);
}
}

Add import statements to documentation

Documentation is simple and concise but for beginners who are new to using npm packages, it will be better to include steps on how to import the react-hls packages into their react applications

How should I register hls runtime event listener?

I want to register a HLS.Events.LEVEL_SWITCHED listener event, but found that there is no way. Is there any solution?

video-dev/hls.js#2497 (comment)
@devcshort

from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I am facing a CORS error when I start streaming Url. I just confused about how to remove the problem. Can you please help over the problem?

TypeScript error - "playerRef" is required prop

I am getting the error Property playerRef is missing on type '{src: string; autoPlay: true; controls: true; width: string;} 'but is required in type' HlsPlayerProps'. Can you please make this props an optional parameter, as it is in the examples?

HTTP “Content-Type” of “application/vnd.apple.mpegurl” is not supported.

I don't know what is happening; I build the player, but now, nothing works anymore, neither using the demos provided it works anymore.

HTTP “Content-Type” of “application/vnd.apple.mpegurl” is not supported. 
Load of media resource https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8 failed.

If I use the HLS Demo alone, it works https://hls-js.netlify.app/demo/?src=https%3A%2F%2Ftest-streams.mux.dev%2Fx36xhzz%2Fx36xhzz.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsInN0b3BPblN0YWxsIjpmYWxzZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xfQ==

even using this mine media url

https://d2wb6ogmp6oqcd.cloudfront.net/63ae06f2c69ce59054a11006/9220d682-5ac7-4348-8506-bfcd4933fe3b/hls/f71a4dc6-3be5-4c08-b562-e053ddba6434.m3u8?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kMndiNm9nbXA2b3FjZC5jbG91ZGZyb250Lm5ldC82M2FlMDZmMmM2OWNlNTkwNTRhMTEwMDYvOTIyMGQ2ODItNWFjNy00MzQ4LTg1MDYtYmZjZDQ5MzNmZTNiL2hscy9mNzFhNGRjNi0zYmU1LTRjMDgtYjU2Mi1lMDUzZGRiYTY0MzQubTN1OCIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTY3NzAwOTI3OH19fV19&Key-Pair-Id=K11OCWBU2VLNBZ&Signature=y-scvUeaydZ4HGWGIvXaNNAIqvqUb7n1-XqK6PqQUK9~Vkd~cyl3BIIlFSuIUuByGoYVAPXW5A8ql5TOX~1NTXkEeG-p0Q5ogK~BcZc52YjEkZ0gWNPn3PYm-qxu3V4gqVxrEXRHGAf3OQhuzen-mbsMtAMisTQEwbVmpwHHs-3X3JHejsKcb-hrsJVTrFVlIBHSu~I4nlGKUlqMqK-Hdx-NfIh5i-~QzeIIvv7hsl99qq5QbiHmqS9wvZcB~elR~cj~e25bR7US1DbDP8yOSRFguPWaYcuBSbPYc273UBkfBDxKiCF-XjHZzrasMI0a8p0rU-IyTh8SVnc9StONEg__

Convert package to TypeScript

Currently I have an index.d.ts file so that users of my package can take advantage of VSCode's intellisense. While this works, I'd prefer to have this package changed to use proper types, interfaces, etc and utilize TypeScript for the components within the src directory.

This change will need to take semver in to consideration, and changes will need to be fully backwards compatible with the current API. Once this change is done, I should only need to update a minor version for the next publish.

Use it in react native

As i am getting a issue. I am not able to use it in the react-native. So anybody have idea about it to use in react native to play .m3u8 format.

How to start the player from a given location?

What is the right way to start the player from a given location in the video?

Player start playing from start every time there is a state update with useSate

Useable with signed Cloudfront urls?

Do you have any information on whether or not this is also useable with signed Cloudfront urls?

Would appreciate any information. I'm a bit new to React and am having trouble integrating this with a signed url.

Listen to video buffer data

I'm currently using a listener to check if there's enough buffer like so:

      if (targetRef.readyState > targetRef.HAVE_FUTURE_DATA) {
        keepPlaying();
      } else { stopPlaying(); }

However this property willl only listen to audio data and not video data.

Audio is being buffered before video causing audio to keep playing without video.

Is it a way to listen the current video buffer data?

Thanks for the great work with the package!

Playback stalling at @59.598812 due to low buffer

I see this error when streaming live cctv cam. It buffers first 50s or so then fails.

Playback stalling at @59.598812 due to low buffer

 <ReactHlsPlayer
        src="http://10.0.4.201/video.m3u8"
        autoPlay={true}
        controls={true}
        width="600px"
        height="500px"
        playerRef={playerRef}
        hlsConfig={{
          liveDurationInfinity: true,
          debug: true
        }}
      />

Setup Travis CI for deployment to NPM

I'd like for this repo to be set up with Travis CI. It will need to run tests (once implemented), and then deploy to NPM if all tests succeed.

Not able to play hls video in react-native-webview

SSR error (Gatsby)

When using SSR in Gatsby, the build stage throws the following error:

 ERROR #95313 

Building static HTML failed for path "/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  72 |         };
  73 |     }, [autoPlay, hlsConfig, playerRef, src]);
> 74 |     if (Hls.isSupported())
     |         ^
  75 |         return React.createElement("video", __assign({ ref: playerRef }, props));
  76 |     return React.createElement("video", __assign({ ref: playerRef, src: src, autoPlay: autoPlay }, props));
  77 | }

It appears to be coming from hls.js. The problem is that any reference to window or document will throw an error during SSR, although this appears to have been rectified in subsequent versions of hls.js (the latest version doesn't seem to mention either window or document). Might be worth bumping the version in your package.json.

For anyone stumbling across this issue, a quick fix is to conditionally render your <ReactHlsPlayer /> component, dependant on whether or not window is defined:

import React from "react";
import ReactHlsPlayer from 'react-hls-player';

const MyVideoComponent = (props) => {
  return (
    typeof window !== "undefined" ?
      <ReactHlsPlayer src={src} />
    : null
  );
};
export default MyVideoComponent;

Cheers.

Seekbar is not working in IOS.

Seekbar is working perfectly in android but not wotking in IOS Phones. Does this seekbar compatible in the IOS devices or not ? If not what can be the solution ?

App throwing error on first time clone

getting Uncaught (in promise) DOMException: The play() request was interrupted by a new load request

I am trying to play hls .m3u8 url using react-hls-player but video get interrupted continuously by giving error Uncaught (in promise) DOMException: The play() request was interrupted by a new load request in the console. Here is a screenshot of the error.

use latest version of hls.js, and enable fetch loader?

Could the player use latest version of hls.js, and enable fetch loader, other than xmlhttprequest loader?

How to use playerRef?

Hi, can you please provide an example of how to use playerRef to control playback? I would like to be able to tap the middle of the video to toggle play/pause and for the video to repeat infinitely. I would also like to have callbacks for playback events like start/complete... Is this possible?

Here's what I've got so far:

import React, {useEffect, useRef} from "react"
import ReactHlsPlayer, {ReactHlsPlayerProps} from 'react-hls-player'


export interface VideoPlayerProps {
  src: string;
}

/**
 * Docs https://github.com/devcshort/react-hls#README
 * @param src
 * @constructor
 */
const VideoPlayer: React.FC<VideoPlayerProps> = ({src}) => {
  const playerRef = useRef<ReactHlsPlayerProps>()

  useEffect(() => {
    if (playerRef.current) {
    
     // TypesScript doesn't recognize `play` here. Not sure how to control playback or configure for repeat on playback complete. 
      playerRef.current.play();
    }
  }, [])

  return (
    <ReactHlsPlayer
        url={src}
        autoplay={false}
        controls={false}
        width={200}
        height={355}
        playerRef={playerRef}
    />
  )
};

export default VideoPlayer;

Player gets destroyed when interacting with components that use setState/state

mingxinstar#7 for reference.

import error

trying to run the very basic example:

  const renderHlsPlayer = () => {
    return (
      <ReactHlsPlayer
        playerRef={null}
        src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
        autoPlay={false}
        controls={true}
        width="100%"
        height="auto"
      />
    );
  };

and getting this error 🤔

How do i add subtitle from url?

Is there a way to specify subtitle using URL

Add Unit Testing

This repo needs to have proper testing put in place to ensure the stability of future releases.

Multiple audio tracks not supported

As it would be possible to access and manipulate a hls video with multiple audios, I can only access and manipulate subtitles, but I need to access and change the audios (languages) of the m3u8 video. In the following example there are no audio tracks in the player reference.

hls.js version

The package.json shows this uses hls.js version ^0.14.17. hls.js is now at 1.0.0.
Could the version be updated?

Add the ability to access the HLS.js object that is created for the video player

I need to add quality switcher for this player but I really confused to how to add it,
it would be great someone create an example on codesandbox.io

Open for contributors?

We are a media company and we would like to start contributing to this repo to keep it up-to-date. Can one of our team member be added as contributor?

All we will need is just publish on NPM whenever we tag new version (may be that can also be automated with Github actions).

Our customers are facing lot of issues and we would like to get them fixed or we will be forced to fork this. @devcshort

React 18 Support

npm config set legacy-peer-deps true
Is it ok to use this library with above script without React 18 support?

this package is dead ?

This package is dead.

NEW Package here: https://github.com/gumlet/react-hls-player

We have now started maintaining this as a fork and new package is available here: https://github.com/gumlet/react-hls-player

Please feel free to open issues/PR there.

Bring video props to root, and update Typescript definition to reflect this

I'm new to React, Typescript, etc but have managed to use this component with Typescript by creating a custom type definition file.

declare module 'react-hls-player' {

	export class ReactHls extends React.Component<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>> {
		url: string;
		hlsConfig?: Partial<Hlsjs.Config>;
		controls?: boolean;
	}

	export default ReactHls;
}

I'm unsure if it's correct but it got the basics working for me. Hopefully this helps someone else until someone more experienced than myself could perhaps improve the definition and submit a pull request.

Stream is running in loop

I am passing below url to player.
https://sample.net/playback/playlist.m3u8

which return below response:
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:BANDWIDTH=250000
chunklist_w541369878.m3u8

while calling the chuncklist it returns :>

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:166850424
#EXT-X-DISCONTINUITY-SEQUENCE:0
#EXTINF:8.008,
media_w541369878_166850424.ts

Here I dint specify the any loop but player is running stream in loop.