I'm using HTML5 audio. Everything is going swell, our server supports HTTP ranges and the audio streams/buffers correctly, etc.
There's just one slight problem with seeking. When you seek to a new position, Chrome sometimes doesn't seek there when there's an existing request going. It just completely ignores the request to seek, so the user can't actually play back at the new seek position.
How can I make Chrome always stop the existing request and start serving for the new seek result?
Chrome seems to respond to the seeked() event, but I've noticed by logging the events that it's this event which is sometimes not fired promptly. I tried manually firing the seeked() event, but that does not seem to be helping.
I found an answer recommending playing and then pausing for a similar-sounding issue for video elements. Unfortunately I did not find this to have any effect for me.
I've mitigated this issue by reducing the request size. Previously, when the browser requested a range, we pretty much just sent back the range it asked for. Now I cap the size at 100kb. Chrome still rarely interrupts a request to seek; but now even on a slow connection each request is still just a couple of seconds, so it's not tremendously unusable given the connection quality.
Related
I'm running three Icecast servers, all streaming the same content. Since about two weeks, I got some users reporting that they cannot listen to the stream anymore. Their browser is trying to load the stream but it never starts playing. I started to dig into this a bit and I am able to reproduce the issue.
It's interesting that this issue does not occur on all devices. I got two PCs here, both on Windows 10, both running on the latest Firefox. One can stream without any issues, one starts downloading audio data but never plays it. Opening the Icecast mountpoint in VLC works in all cases and the stream starts within a second or so. On a device that is not playing the stream in Firefox, it neither works in Chrome. On the other hand, devices that are able to stream in Firefox also are in Chrome. I guess it has something to do with the OS..?
I started Wireshark on one PC that is affected by the issue and was able to see that the browser starts to download the audio data from the Icecast server but instead of playing it, it's caching it. I believe that the browser somehow "thinks" this is a download, not a stream. When I restart the Icecast process on the server during this caching period, the caching of the browser stops and it starts to play - but only for a few seconds, until the end of the cached stream is reached.
I assume that some browsers are waiting for some kind of EOF instead of just playing the stream. Of course, an EOF is never sent in a live stream.
Here is the link to the mountpoint of one of the Icecast servers: http://185.80.187.35/live
It seems that it doesn't matter which one of the three Icecast servers you use. If one works, the other two also work. If one doesn't, opening the stream from the other servers fail as well.
I have no idea what's happening there. Since the issue occurred, nothing in the setup has been changed. I tried to switch the audio format from MP3 to OGG, but this didn't fix the issue - so I switched back to MP3. I'm currently streaming at 64 kbps. I don't think this might be an issue since this worked for years, but might it be that such a low bitrate is not supported by some browsers any more? Should I raise the bitrate? Maybe add some HTTP headers to the Icecast config? I'm confused and running out of ideas.
PS: I just noticed that I got the same issue in Edge and IE. It really seems to depend on the PC, not the browser.
When the embedded player doesn't work on a device, the stream on its' own tab doesn't play either.
This is not the behavior I'm seeing.
The site is HTTPS, yes, but the stream isn't.
Due to new security restrictions, this is no longer valid. If you open your browser's developer tools, you'll see errors about it.
You need to enable HTTPS on your Icecast server, or downgrade your site to HTTP if you want to play from non-secure origins.
I'm building an app which is made of a webserver (currently using NodeJS but doesn't really matter here) and a Chrome extension.
The point of the Chrome extension is to display some data from the server. For this, I need the extension to be aware of changes on the server-side. To do that, I see 3 possible strategies :
1. Websocket
Having a websocket in the background that triggers updates in real time.
2. Regular fetch
But I also can have a timer that will fetch new data on a defined frequency (something like every minute)
3. Event triggered fetch
Another solution would be to detect browser activity, and to trigger a server call during that activity (eg. on active tab changed)
The tradeof I see is browser memory/network usage vs. realtimeness.
To define realtimeness necessity, I'd compare it to an unread email indicator: it doesn't matter if the user is made aware a minute after, but conceptually, it means always displaying out-dated data, which doesn't sound great to me.
On the other hand, if using websockets, or event listeners come at a too high cost and will eventually slow down the browser too much, I'd rather have a minute delay. :)
But maybe fetching the server every minute with most of the time no update to send may be even more expensive than keeping a websocket alive...
Well, any insights on this tradeof and how to choose would be highly appreciated!
Special thanks to #Rob-w for helping me to reformulate the question.
I have a complex web app, which is working fine in desktop browsers, as well as in the Android native browser (which is part of why I got so long into this project before noticing this problem). The server setup is using the Typesafe Stack (Play/Akka/Scala), but I suspect that's not relevant to the question. Suffice it to say, it uses bog-standard transient session cookies to keep your login.
The problem is, in Chrome and Safari, that transient session appears to be too fragile, and very unpredictably so. In both cases, so long as I am working actively in the browser, everything is fine. But if I switch away from the browser for a while and return to it, it often loses the session cookie, forcing a re-login. Sometimes it takes an hour or two, sometimes just a few minutes -- I haven't yet been able to figure out a pattern.
Note that this doesn't involve closing the tab with my app in it, or manually closing the browser process. I would expect to be able to switch away from Chrome and come back to it using the app switcher and still have my session there; for some reason, though, it seems to be frequently and quickly losing the session cookie. This is a killer problem: users shouldn't be forced to re-login too often.
Any ideas or pointers to why these browsers might be losing their session cookies so easily? I've done lots of web development, but this is my first time seriously targeting mobile browsers, and I'm clearly missing something...
I'm looking for a way to securely deliver video to mobile devices. There are two options:
HLS in tag. This works very nicely for iOS and supports adaptive bitrate, perfect for mobile. However, is seems to only work well on iOS. There seems to be only fragmented support for it on Android. I've read that Android has officially supported it since 3.0, but on all the android devices I've tested (>3.0), HLS hasn't played back on the browser.
Progressive download in tag. This will work on iOS and Android devices fine, but the concern is that since it's just a progressive download of the video, that the user find a way to just grab that video once the browser has finished downloading it. This may be more difficult on iOS, but I'm sure it's not that hard to figure out where the browser stored the video download in a tmp folder somewhere.
Either method I'd say can be protected from deeplinking by using an expiring token approach, where the token is generated serverside with a secret key that only the content server knows about. The video request would only be valid for 5 or 10 minutes, would would kill of deeplinking.
Is anyone aware of any way around these issues? Even if I was able to prevent deeplinking, the user could still get the video itself and re-distribute. Perhaps it's just not possible?
Thanks
Rule #1 of the internet:
If you don't want someone stealing it, don't put it online.
Welcome to the circumvention arms race. Brought to you by DownloadHelper.
There's nothing you can do to stop someone who really wants to pirate your video. There are various measures, like those you mention, that make it more difficult, but someone who really wants to copy it could find a way to capture it from memory, or even just point a camera at the screen and record the playback of the video.
It's the same way you protect your car. You install a steering lock, an alarm and an engine immobiliser, and then someone comes alongs and pulls the car onto a flat-bed truck and drives away with it.
Bottom line - you can't stop a determined thief, but you can make theft more difficult so that you're not the most attractive target.
As I was reading the above I could easily get pass all these techniques pretty quickly.
For a project I can't describe too much because of nda, we created our own protocol based on a well known encryption method can't mention that either , military grade) , encoded packets on the server to the protocol, and decoded on the device.
unfortunately this isn't perfect either because a lot of mobile apps can be re-versed engineered and once you get the key game over, very easy on android, of course you could periodically recycle the key, in which case even if they decompiled the android app and got the key it wouldn't work very long.
This is a lot of work and can't be implemented with html5 or hLS or event rtsp.
It also requires a custom server application that takes the video stream re-transmits it with the custom protocol.
On the other hand the protocol was transport agnostic, which meant we could use a variety of transports, tcp, IAP and bluetooth. Also would work on all mobile / desktop platforms.
The other little requirement, is couldn't use a browser, have to be a custom app.
I have an HTML5/jquery mobile web app at http://app.bluedot.mobi. It is used for long distance races to track competitors via SPOT satellite tracking. The issue I have not yet resolved is that when loading the app when no data connection exists, the browser throws a "no data connection" alert popup as it is attempting to fetch the manifest during the checking event. Even when a data connection is present, loading the app can take a very long time. There are ~ 500 files to check. The fastest way to load the app (from a phone) is to be in airplane mode and dismiss the browser's alert - not so elegant.
Rather than force an update on users who tend to be in the backcountry with a spotty connection, I want to use applicationCache.update() programmatically, giving the user control over the process and speeding up app load whether on or offline.
Is this currently possible with the HTML5 spec and respective browser implementations?
Sounds like you need the abort() method. Unfortunately it is very new, and it will probably be a while before it is implemented by the majority of mobile browsers.
There are ~ 500 files to check.
It sounds like you're implying that the browser checks each file to see if there's any of them which has changed. This is not correct. The browser only checks the manifest file if that has changed, and that is a simple byte check. If the manifest file has not changed, the browser believes nothing has changed.
So if your application is slow to start, it might be your because your application is complex and there's alot of HTML and Javascript to parse. I would advise you to take a look at the application and see if there's anything you can optimize. In that case, you might want to take a look at Yahoo's Best Practices for Speeding Up Your Web Site page.
For example, I noticed you have a lot of Javascript code in the HEAD section. The beforementioned article advices us to move all Javascript (To the extent of what's possible) to the bottom of the page, so that the browser can start rendering the page as soon as possible. And there's a lot of other sound advice in the article. So take a look, I'm sure you'll find it useful. :-)