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

Youtube like video track selection #1199

Merged
merged 18 commits into from
Jan 1, 2019
Merged

Conversation

sridhard
Copy link
Contributor

  1. Loaded event will give the information about available video tracks
  2. selectedVideoTrack prop will give the interface to select the video track. This prop will take the height of the video (Similar to youtube like 144p, 350p etc) and set the video track. If height is 0 then all video tracks will be added to list so that it will work like 'Auto' in youtube

1. Loaded event will give the information about available video tracks
2. selectedVideoTrack prop will give the interface to select the video track. This prop will take the height of the video (Similar to youtube like 144p, 350p etc) and set the video track. If height is 0 then all video tracks will be added to list so that it will work like 'Auto' in youtube
To show the current bandwidth to user and for debugging purposes current bandwidth is required to be reported. This pull request adds the bandwidth estimate in the progress event.

Also the bandwidth details are added in the audio track in load event. There is another pull request which reports the video track information
reverted deprecated API
Reporting estimatedBandwidth
@cobarx
Copy link
Contributor

cobarx commented Aug 27, 2018

Looks very nice and well implemented, this will be great to have!

Would you mind adding docs to the README for track selection and the onBandwidthUpdate event. Also, do you have a video stream that I can use to test this? I'm not sure I have any samples that have multiple resolutions.

Thanks!

@MarianBe
Copy link

this is only for android, right? do you plan on adding iOS support?

@sridhard
Copy link
Contributor Author

@cobarx @padampadam I am working on IOS next week. Once IOS work is completed I will update documentation
@cobarx here is one sample of multiple resolutions https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8

@cobarx
Copy link
Contributor

cobarx commented Sep 3, 2018

@sridhard Sounds good, looking forward to all these improvements!

@RohitRox
Copy link

RohitRox commented Sep 5, 2018

Great Work 👍

named parameter added for exception. Otherwise this cannot be used in JS
bandwidth report for IOS
IOS bandwidth reporting
@MarianBe
Copy link

MarianBe commented Oct 9, 2018

can anybody fill me in on the current state of this PR? was really looking forward to this feature

@sridhard
Copy link
Contributor Author

@padampadam @cobarx I have finished this feature for Android. For IOS there is no option of track selection.

Android: Bandwidth reporting, video track information reporting and video track selection
IOS: Bandwidth reporting

Can you please merge this to main branch

@cobarx
Copy link
Contributor

cobarx commented Oct 10, 2018

Hi @sridhard, this very very cool! Congrats on getting this working on both platforms. Can you update the README with all the appropriate API info and then I will take a look shortly.

Video.js Outdated
@@ -234,6 +240,7 @@ export default class Video extends Component {
onVideoSeek: this._onSeek,
onVideoEnd: this._onEnd,
onVideoBuffer: this._onBuffer,
onBandwidthUpdate: this._onBandwidthUpdate,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please change this to onVideoBandwidthUpdate. The outward facing prop can still be called onBandwidthUpdate. Event names are global across the app, so if another module (e.g. audio) also declares onBandwidthUpdate, it will conflict.

You can copy the pattern for other events such as onVideoProgress -> onProgress

…t-native-video into react-native-community-master

Merge branch 'master' of git://github.com/react-native-community/react-native-video into react-native-community-master
…ethod

Bandwidth is reported as enevts when download happens. Not by timer method
Some log functions removed
Code cleanup
@sridhard
Copy link
Contributor Author

sridhard commented Nov 1, 2018

@cobarx I have fixed your comments and also done some code clean up

@cobarx
Copy link
Contributor

cobarx commented Nov 2, 2018

This is very exciting and I'm looking forward to reviewing the latest changes.

For other people to get to use this, it's very important we give them documentation so they know the feature exists and how it works. Before I can accept this PR, we need to get it documented.

@cobarx
Copy link
Contributor

cobarx commented Nov 21, 2018

Can you get the README updated so I can test & merge this?

@cobarx
Copy link
Contributor

cobarx commented Dec 13, 2018

@sridhard Still need the documentation to be able to test and merge this. Any chance you can get that drafted up?

Defect fix
@amismailz
Copy link

Hope we hear good news about this PR soon, regards 👍

This also fixes a bug that compared track type & renderer index
@cobarx
Copy link
Contributor

cobarx commented Jan 1, 2019

I have made some tweaks to this. It made sense to have an auto option & refer to it as resolution. I've also noted in the docs that you can pick the track using the index type. For the bandwidth rates, I've removed all formatting and the event now reports the bandwidth as the number of bits. This is in line with what the players & the HTML video player report (which is the gold standard). Developers can reformat this value if they want a different representation. The audio bitrate did not work for any videos I tested, so I have removed that until we figure out how to make it work.

@sridhard I've also gone ahead and documented how this functionality works in the README. I appreciate that you have put a lot of work into this. It has been very frustrating that you have not responded to multiple requests to update the docs. Let me be clear, in the future I will immediately close any future PRs you submit if not accompanied by an update to the docs.

@cobarx cobarx merged commit 04f3f40 into TheWidlarzGroup:master Jan 1, 2019
@am33t
Copy link

am33t commented Jan 23, 2019

@cobarx, is there any work around for "track selection" functionality on iOS?

@MBakhtiyor
Copy link

@cobarx @padampadam I am working on IOS next week. Once IOS work is completed I will update documentation
@cobarx here is one sample of multiple resolutions https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8

Hi. Thank you for Android version. Is iOS version is ready too?

beauner69 pushed a commit to beauner69/react-native-video that referenced this pull request Oct 10, 2019
Youtube like video track selection

(rebased from commit 04f3f40)
@flexgrip
Copy link

So it seems on iOS we can only use maxBitRate, but on android, we can use selectedVideoTrack. However, you have to know the tracks in advance because in 4.4.4 and 5.0.0 I can't seem to get it to give me the track index or names of each hls rendition.

@learnyst
Copy link
Contributor

on IOS we cannot support track selection because IOS player doesnot expose this capability. In android we can select the video track.

@sharifhh
Copy link

How can I add custom quality selection for iOS, is that even possible?

@flexgrip
Copy link

@sharifhh I did it by just binding an action sheet to the maxBitRate prop. It’s super easy. But I could only use v4.4.4.

One thing to note, when you are testing, you have to wait a few seconds to skip ahead to see the change. So if you are seeing the HD version of the video and set the max bitrate to a lower version, it continues playing what it has in its buffer and then will start loading the lower quality.

Also your bit rate has to be known. If you have a 500000 bit stream and set it to 499999, it will just stay on “Auto”. It won’t just choose the closest one. So I think my lowest was 379000 bits. So I set my control in my maxBitRate prop to 400000 to get it to work.

@flexgrip
Copy link

I should also note that on android I was able to just get the track index and my selection options are read from those. But on v5, the method that returns the hls video tracks didn’t give me anything.

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

Successfully merging this pull request may close these issues.