Develop Reference

Capture system/window audio in Javascript

I am currently experimenting with the getDisplayMedia browser api: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia
I am successfully able to create a MediaStream video that captures an application, but it fails at capturing the audio (say for example I'm capturing a VLC video Running, there will be no audio track ever in the MediaStream).
I have tested that with both Chrome (83+) anf Firefox on Linux Mint and Windows, and it seems to fail everytime.
Also, when I'm trying to record audio only in Chrome (firefox not tested), it throws
TypeError: Failed to execute 'getDisplayMedia' on 'MediaDevices': Audio only requests are not supported
I have read multiple dev threads, and it seems that it is not mandatory that the created MediaStream will contain audio, even though it is asked in the options.
So my questions are:
is the audio option just complete decoration ? Because it seems
pretty useless
is there another way to capture audio ? for example with the Web Audio API ? I couldn't find any resource on that. Keep in mind that I want
to capture system or window audio, not microphone.
Thanks for your answers
EDIT: Alright, I found that there's one possibility to capture audio: it has to be with Chrome, on Windows, and capture a screen (not an app). According to the doc, it should work with Edge too. I wonder if there are other means to capture the audio without some loopback device.

Recording audio from user on android chrome dosent play and gives empty blob in react.js

I am attempting to record audio samples from user on a PWA app. This application runs great on my Mac with the blobs being full in data. There is no problem in running the audio on the Mac. When running the PWA on my phone, blobs have 0 size, and nothing happens when running the audio.
React.js is used for the PWA. Before updating my chrome to the latest version(78.0.1304.108) the recording consisted of no problems. After the upgrade, attempts to find a solution failed. Phones with older versions work.
The following packs and JavaScript libraries were used (React-Mic,#cleandersonlobo/react-mic,React-Audio-Recorder),(getUserMedia,MediaRecorder)

Ok so I solved this issue, it turns out I used all audio inputs stream that chrome allows and because chrome dosent display an error regarding this it was hard to find it, so all I did was just redirecting the input streams better.

Uncompressed, unencrypted, unaltered, raw transfer of real-time PCM audio data through WebRTC stream

I'm transferring a live audio stream between 2 Electron window processes using WebRTC. There are no ICE or STUN servers, or anything like that, the connection is established manually through Electron IPC communication (based on this code).
Note: from the technical point of view regarding the audio streams themselves, this is very similar (if not identical) to streaming between 2 browser tabs on the same domain, so this is primarily not a question regarding Electron itself, although Electron IPC would be obviously substituted with a browser equivalent.
The audio stream works, I can transmit audio from one window to another in real-time, as it is generated. That is, I can generate audio (Web Audio API) in window "A" and listen to it through an <audio> element in window "B", or do processing on it using a separate AudioContext in window "B" (although there is some latency).
However, the audio data is vastly altered during streaming: it became mono, its quality dropped, and there is significant latency. After fiddling around I've learned WebRTC does pretty much everything I don't need, including encoding the audio stream with an audio codec, encrypting the transfer, running echo cancellation, and so on.
I don't need these. I need to simply transfer raw audio data through local WebRTC without altering the audio in any way. It needs to be float32 accurate to the sample.
How can I do this with WebRTC?
Why use WebRTC then?
I need to do custom audio processing inside the Web Audio API.
The only way to do this is using a ScriptProcessorNode, which is unusuable in production code when there's essentially anything on the page, because it is broken by design (it processes audio on the UI thread, and causes audio glitching by even slight UI interactions).
So basically, because of this (and to the best of my knowledge), my only option is to transfer audio with WebRTC streams to another window process, perform ScriptProcessorNode processing there (nothing more is happening in that window, empty DOM, so the processing is always nice and smooth), then send the results back.
This works, but the audio is altered during streaming, which I want to avoid (see above).
Why not use AudioWorklet?
Because Electron is 5 versions behind Chrome unfortunately (version 59 at the moment), and simply does not ship AudioWorklet yet.

Chrome on Android WebRTC volume slider doesnt work when using microphone

When I establish a WebRTC connection with output and input (video and microphone) on chrome for Android, when controlling the volume slider using hardware keys, I will get shown the volume for the STREAM_VOICE_CALL stream, which is not the right stream for the WebRTC. This make it impossible for the user to effectively control the volume.
I'm guessing this is happening because when I turn on the microphone (with getUserMedia), the system thinks i'm in a call.
Any ideas on how to fix this? Is it expected behavior or a chrome bug?
Thanks

Is that how it is built now? At least chromium issue 243506 tells the following:
Enable audio volume control on Android.
This is done by setting stream to VOICE which is the only stream type hooking up volume control automatically.
It's required to use matching audio mode and stream type. Otherwise, the volume control doesn't work. That means we have to use same mode
for both WebAudio and WebRTC. This leads to the change in audio_manager_android.cc which sets audio to communication mode so that OpenSL
stream can use VOICE stream type to adjust volume.
Bold is added by me.
(https://code.google.com/p/chromium/issues/detail?id=243506)

Looks like its already fixed in latest Chrome version.

Audio recording with HTML5

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