EchoCancellation | Projektarbeit in Digitaler Signalverarbeitung zum Thema | Speech library

It's usually not the camera that creates these video compression artifacts. They're in the nature of video compression, and somewhat dependent on the computer's power. Most frames of video are so-called "interframes", holding the compressed difference between one frame and the next. To decode an interframe requires decoding all the frames that came before it.

Those sequences of interframes start with "intraframes", also known as Instantaneous Decoder Refresh (IDR) frames. Intraframes can be decoded standing alone. But there's a tradeoff: they require more compressed video data.

When you ask for 30 frames/second you give an implicit limit on how much data can fit in each frame. And sometimes the intraframe needs to have its quality reduced so its data fits in the time interval.

My point: the blockiness you see are the intraframes.

What can you do about this? Honestly, MediaRecorder doesn't give much control over the way the video encoder works. So, the things you can tweak are fairly minor. They are:

• Frame size: consider making it smaller. 1080p video (1920x1080) is probably too big. Try something smaller. Try 960x540, or even smaller than that.

• Frame rate: a slower frame rate, like 15, allocates more bandwidth to each frame, so the intraframes get higher quality. Reduce your frame rate.

• Bitrate. You're using 8 megabits/sec. That's very large for the browser-based encoder., possibly too large. It's faster than the maximum upload rate of many internet service providers. Try something smaller. Start at 1 megabit. (Your high bitrate request may be overwhelming the compression hardware in some computers.)

Keep in mind that people who compress video for online streaming use big fat servers, and that it can ten minutes or more on those servers to compress one minute of video. They often use ffmpeg, which has hundreds of ways of tweaking the compression. MediaRecorder does it in real time.

Also, webcam hardware is quite variable in quality. Bad webcams have Coke-bottle shards for lenses and crummy sensors. Good ones are very good. None are up to the standard of professional video equipment. But that equipment costs thousands.

And, keep in mind that compressed video is more JPEG-like than PNG-like. It's not perfect for encoding high-contrast static pictures.

High quality digital video recording is a well-developed subspeciality of computing. If you want "the best audio and video possible" you won't be using a web browser / Javascript / getUserMedia / MediaRecorder. You'll be using a native (downloaded and installed) app like OBS Studio. It gives you a lot more control over the capture and compression process.

If you use capture / compression technology embedded in browsers in early 2021 you'll be, practically, limited to a couple of megabits a second and some resolution constraints.

I think you will need to create a "mesh". So with 3 peers, each user(peer) sets up two connections, one to each of the other two users. At each client's end, there are two entirely different connections.

The user @daGrevis asked this question on the PeerJs GitHub. Ultimately this is the implementation they used for a multi-peer chat that might help:

The line you are modifying is for the opus codec which does not have parameters for noise suppression or echo cancellation, see here for a list of parameters.

You can not put random stuff in the SDP.

You could try this library: https://www.dslreports.com/speedtest/api-available

Also check this answer: Client-side Speed Test

If you manage to make it work, you could use NgxCharts library to show speed like in this example: https://swimlane.github.io/ngx-charts/#/ngx-charts/gauge

If you want to run "runMedia()" method on click of "start" then call it directly from html instead calling "ngAfterViewInit()" hook.

I think the easy fix here would be to add a muted element to the playback on your page.

SO user jib, which works on Firefox and adapter.js projects wrote a blog post in 2017 about this exact feature.

Here is how they did apply the constraints to the track:

My website where I use it: https://www.camspark.com/
Fixed myself I figured out I had 2 problems with this code.

First problem was then createOffer() must only be sent by 1 person not both people.. you have to randomly pick which person which does the createOffer().

Second problem is the ICE Candidate's you have to create a queue/array for both sides, which holds all the incoming ice_candidates. Only do the peerConnection.addIceCandidate(new IceCandidate(candidate)); when the response to createOffer() is received and the setRemoteDescription from createOffer() response is set up.

Both getAnswer() and getOffer() use exactly same code, but one is received for 1 client while the other is received for the other client. Both need to flush the IceCandidates array when either of them is triggered.. Maybe if anyone wants you could combine both functions into 1 function as the code is the same.

Final working code looks like this

The function is peer.destroy().

Fyi, if you need to find undocumented API functions in Javascript libraries, you can do this by running your JS file in the browser and pressing F12 to bring up the debugging console. Set a breakpoint after the object that you want to investigate is instantiated:

I set a breakpoint AFTER I instantiated peer1 (line 51). Then I hovered over peer1 (line 50) to pop up a menu of all of the properties (methods and fields) belonging to this object. If you're looking for a particular function as in this case, sometimes you find it immediately in this menu, but often you have to expand the property called __proto__ :

You can see the destroy function located here. It's just a guess whether or not a function found in this manner actually does what you want it to do, but luckily in this case it does what we want.