how "streamus" chrome extension is streaming only audio of youtube video? - javascript

I am creating all in one music app using multiple APIs. I want to stream only audio of youtube song. As i searched a lot but could not find actual solution. many of them says it will be against Youtube TOS. If it is so than how "StreamUs" chrome extension is working. I am not creating something this but i want to stream a song audio only as it is in above extension.
Thanks in advance.

author of Streamus here. Just dropping in to give a definitive answer.
Chrome extensions can utilize both an invisible, permanent background page as well as a visible, temporary foreground page. When the foreground page loses focus - it is destroyed and all content is unloaded from memory.
Streamus hosts the YouTube video player on the background page which gives the illusion that the video is not loaded. It pipes all commands from the foreground UI to the background page.
However, it's worth noting that this is a violation of YouTube's Terms of Service. I've been working with YouTube to figure out a good solution to the problem and am almost there with a clever way to present video in the foreground without losing the audio. :)

Unfortunately it does pull the video as well for bandwidth, but good question.
as quoted by the author in
https://www.reddit.com/r/streamus/comments/1w64wj/question/ .

Related

Audio element play promise rejection even while audio context is in running state

I am attaching a screenshot for reference to get more elaborated idea about the problem am facing.. Kind of hell.
I am well aware about autoplay policy and have gone through possible approches which involves user interaction. Also, am not a fond of displaying any screen or button to user to make him click, never, i do not want that.
I am developing a wordpress plugin and having microphone feature which can attach to textbpx on any wordpress website, user clicks on it (user interaction) comes in.
I have also read that i need to resume suspended audio context, which am doing and as you can see in screenshot the state of audio context "running" before and after audio elements play mathod.
I am using audio element created using Audio() constructor.
Note: screenshot is a photo of mac system, I am debugging iphone xr using usb cable.
Can somebody help me out or enlighten me on what am doing wrong or there is any technical limitation.
Sigh! after a week lasted hell finally I managed to make things works.
To give an overview of solution let me first describe high level rough idea of work flow which has problem on iOS Sfari.
Problematic workflow
clickHandler --> AudioContext creation --> Playing audio using audio element.
All the audios followed by this workflow miserably failed in 'play' promise.
Solution which worked for me
clickHandler --> Play audio using audio element -> AudioContext creation --> Playing audio using audio element.
The point of interest in a solution which worked for me is you have to play audio using audio element as first line of code in 'clickHandler'. No doubt the promise still fails but subsequent audios does play.
Also, I was creating new audio element for each new audio source to be played, Which was wrong as auto-play policy imposed on 'per-element' basis. So instead of creating new audio element for each source I just create it once on page load (or whatever suits for you as one time creation) and whenever I want to play different audio file I just change the '.src' property/attribute.
So this is how It worked for me. I must mention throughout the week lasted hell, previously answered questions here and their problem specific solutions have been guiding light which gave me new perspective in a hunt for solution. Also the articles on internet, webkit , chrome, apple's documentation on Auto play policy helped a lot.

HTML5 <audio> interrupts mobile music (Spotify,...)

I am developing a website where the landing page shows a video of waves at the beach. The customer then wanted me to implement audio in connection with that screen (some sea sounds).
On my way home listening to music, I checked the site from my mobile device. Everything worked great, but the music I was listening to (from Spotify, but I guess it's the same behaviour with other music apps), stopped.
I consulted Google, but didn't find a solution. Is there a way to prevent that?
Your music was playing by an app in your mobile . But when you open mobile browser , and then go to the website which has a video and sound on the front page . The browser tried to run the video with music . That's why your background app , which was playing music got interrupted as browser was also trying to handle the same audio api .
The same thing happen to me on my android mobile . But the recent chrome update has fixed the issue . But mozila and other browsers are not enabling the background music till.
I have no idea about iphone .
It makes complete sense. I don't know why you would want two sounds to be playing at the same time. That would be noise I guess. I think you don't have a problem, in fact it is best the website audio pauses other audio instances on your device.
I have checked in my iPhone with this website which has audio in it.
https://guccidive.gucci.com/
And also played song in Spotify and Gaana App. But both sounds are playing concurrently. I have iPhone 6s and used Safari browser to check.
And as Limitless Claver said it's correct only that at a time only 1 sound is playing. Since if you hear 2 sounds at the same time it will become noise for the user. And I can bet that user won't like it at all. So it's perfect to pause all other background sounds when a user is surfing your website.
There is nothing you can do for this. Since that's handled by the browser apps itself. There is nothing as of now we can do in our Website to work the way you want.
While Windows 10 for instance allows this to happen (had two youtube tabs running with sound and another application delivering separate audio), I really question whether this is a good idea on a phone where you basically can only have one app open at any time.
It appears that Apple allows for this to happen, but its depending on the app itself, so nothing you can change for anything but your own app, AFAICT.

Detect if the UIWebView can play video inline on iPhone ( allowsInlineMediaPlayback )

I am trying to tell if my video is going to play inline once the user starts the video (as apposed to fullscreen/in the native video player) on an iPhone in a UIWebView before the video has started. I have no way of knowing if the UIWebView has the setting allowsInlineMediaPlayback = YES as i do not know in what app or on what page my video is being displayed.
My goal is to only show the video if it can be played inline.
Is there any way to read the allowsInlineMediaPlayback setting from javascript, or detect if my video will play inline or not?
Everything I have read on the apple developers website seems to suggest that it will automatically play in full screen mode in safari. Now if they are using another app, as far as I know you do not have access to that apps UIWebViews properties. However, in an attempt to not be totally useless, here is a link to all of the methods you can query and you might find some useful information in there.
https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/HTMLMediaElementClassReference/HTMLMediaElement/HTMLMediaElement.html#//apple_ref/doc/uid/TP40009355-CH18-SW27
Some more information that may be useful to you.
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW1

YouTube force full screen on load

I've taken a look at the YouTube API and it seems quite clear (for security reasons) that the player (embedded or not) does not allow YouTube video to automatically initiate full screen once loaded.
I wondered if there was a way to do this using Javascript to act as if the user had pressed the full screen button?
Any ideas shared would be greatly appreciated.
I'm afraid you can't use the YouTube player API to initiate fullscreen programatically.
This is because the underlying issues with fullscreen in flash and html5 video would make such an api method seriously error-prone.
Official response to back me up:
https://groups.google.com/forum/#!msg/youtube-api-gdata/Tyv3vTw0RQk/449KahYVNFYJ

Is there a way to detect when a Flash video has finished playing?

I work on a website that embeds videos from many different websites, the number of sources run into the thousands. For YouTube, their JavaScript API allows a way to detect when the video ends and one can execute any function he wants at that time. But this will only work for the youtube videos. What about all the others?
So is there a global all applicable way to detect when the Flash video on a page has stopped playing using either javascript or action script? And by "stopped playing" I mean stopped playing when it reached the end and not just been paused half way.
P.S. There will always be one embedded video inside a <div> with the id video on the page.
Just like YouTube provides an API, those players from those external websites have to provide their own APIs as well. There isn't an easy one-size-fits-all solution that you can implement in JavaScript.

Categories