My application receives a RTP Stream (H264 or VP8), put it into Fragmented MP4 or WebM and send it over Websocket to my Javascript App where I display video using Media Source Extension.
Chrome works ok with both Codecs but Firefox shows a huge CPU usage, 50%-60%.
Chrome only 6%.
Javascript calls mediaSource.updateBuffer, wait for updateend and then call again mediaSource.updateBuffer. Nothing different as any example out there.
Anyone having also this problem with Firefox?
Without a lot more specific information (profiling your code, checking your browser flags and capabilities) it isn't possible to definitively say what the issue is.
I suspect that in Chrome, your codecs are hardware accelerated, and in Firefox they are not.
Related
I’m currently working on a web application whose main purpose is streaming/timeshifting TV channels. Application is written in Javascript React framework and for web player we are using CookPete ReactPlayer with integrated hls.js. We have managed to successfully play live TV channels but unfortunately, we are experiencing some issues with timeshifting channels
Live streams are distributed over XtreamUI server as a m3u8 lists, and have this kind of format
example.org/live/username/password/channel_1.m3u8
So when a user is watching Live TV this kind of URL goes to the player source and CookPete player + hls.js are doing their magic with parsing/processing m3u8 list which results in playing video flawlessly.
Here comes the problem, for timeshift XtreamUI are using this kind of URL example.org/streaming/timeshift.php?username=XXX&password=XXX&stream=2&start=2020-04-26:19-23&duration=7
As you can see its PHP script which STREAMS raw bytes into the player. Here are response headers from /streaming/timeshift.php
As you can notice, the Content-type is video/mp2t which for some reason cannot be played in the browser environment.( Google Chrome, Mozilla Firefox, IE 11). This warning pops up.
On the other hand, Safari browser on Mac video is playing completely normal, but the request from Safari is a little bit different. This is a screenshot from Safari's console network tab. As you can see there are several requests with different byte-ranges.
We are seeking a solution which will provide playing timeshift video (video/mp2t content) in Google Chrome, Mozilla Firefox and IE 11. All suggestions/advices are welcome.
the Content-type is video/mp2t which for some reason cannot be played in the browser environment
This is because chrome and Firefox do not support mpeg transport streams, and safari does. hls.js works because it knows how to read a binary ts file, and rewrite it as mp4 fragment before sending to the the media source extensions buffer. You will need to do the same. Take a look at mux.js.
In Firefox install a codec by running this command.
sudo apt-get install libavcodec58
Install a similar codec in chrome too. It should fix the problem.
i need to send a live streaming from pc to pc , both of them using just the web browser (IE, firefox o chrome), exist a library (javascript) that could help me to push the stream from the sender to the media server (ffmpeg-ffserver, wowza, etc).
I guess you want to stream a video signal from the webcam. Then the way to go is to use webRTC, but it is still very new (wowza server just started to support it) and it is only supported in some modern browsers. So you will encounter many issues.
Most of the existing solution still use flash to capture from the webcam and encode in rtmp.
I am building an HTML5 web game, a spin on the classic asteroids game to be precise. The problem I'm running into is that Safari, unlike Chrome or Firefox, will NOT automatically cache and use .wav sound files. This is causing substantial lag if there are an abundance of sounds occurring. On each instance of needing a "shooting" sound, the browser will perform a new GET request to obtain the audio file, as seen below:
you will see that the 151013__bubaproducer__laser-classic-shot-2.wav is the shooting sound that is being requested through the network over and over again and is not being cached. In an attempt to force Safari to cache this file, I've created an Asteroids.manifest file for the appcache to utilize:
Yes, that is the correct directory location relative to both the index.html as well as the Asteroids.manifest. And the manifest file does appear to be consumed, as it is visible in Safari's debugger storage:
Please let me know if you have any suggestions, as I've tried a variety of different setups of the .manifest file, including naming it .appcache, ensuring that it is served up with a MIME type of text/cache-manifest, and removing the NETWORK/CACHE/FALLBACK fields
Edit note: the window.applicationCache.status() is 1 (Idle)
I think that Safari doesn't cache audio files even if listed in the manifest file. Have you tried encoding the audio as BASE64 string and decode/convert back to audio at startup? Have a look at the WepApi, it can probably help you with that process.
If you mean mobile, then there are some posts here: HTML5 offline video caching in mobile safari
In summary, there is an ~5mb limit for the cache in mobile Safari. There may be something similar on the desktop. Another poster said that audio & video are not cached by the iPhone since they are played by external applications. It seems the only workaround is to store them as base64 in the local database (or local storage perhaps also? - Just keep in mind that "in private" browsing disables it).
If not, perhaps something to consider if you do plan to target the mobile version.
I'm working on an adaptive streaming solution for video out of Azure Media Services. On the client side, I'm using Azure Media Player.
Everything seems to be working fine on all the major browsers. However, Firefox pops up a yellow warning when loading the JS file that drives Microsoft's player. This warning appears even without a <video> tag on the page.
Here's a screenshot.
Can this be disable? I know I can in my Firefox, but I need my users to not see this warning. As you can see, the video IS playing anyway.
When AMP sets up it needs to query the platform capabilities to make a correct decision which tech to use. AMP is simply querying an API if it exists or not. Firefox, has decided that if you query any DRM support, even if you aren’t using it, you are forced to see this message. The message itself is a misnomer from Firefox.
This is a known issue and Microsoft is working on it.
I'm trying to implement audio recording in a website. Basically the user should be able to press a button and speak something into the microphone. The recorded audio should then be sent to the server for further processing. I realise that you can do this with Flash, but for now I'm trying to avoid that.
I found several resources on the internet about it (i.e. link) but as it seems, this functionality is not widly supported yet. I experienced differences betweet the used browser and between the used operating system. For instance, the Chrome Browser doesn't seem to access any microphone on Linux correctly. So i was wondering if anyone knows a good resource to dive into this. Or maybe someone tried to set up something like this himself, and can help with some suggestions about where the limitations of HTML5 and the JavaScript Web Audio API are right now.
Thanks!
As of Chrome Version 27.0.1453.56 beta Mac, audio recording works with this demo application https://github.com/mattdiamond/Recorderjs
This app returns back a WAV file for the user which can be uploaded to the server.
If you want a truly robust solution that works on most desktop web browsers, you may need to resort to Flash.
This article covers up pretty well the current state of audio video capture possibilites using HTML5:
http://hdfvr.com/html5-video-recording
Also for just audio capture, here's a gitHub project that records audio to mp3 directly from the browser:
https://github.com/nusofthq/Recordmp3js