Stack Overflow
Stack Overflow

Questions tagged [web-mediarecorder]

The web API for recording audio and video streams.

The MediaRecorder web API is a working draft specification, currently implemented in the Chrome (47+) and Firefox (25+) browsers, on desktop and mobile (Android), and in Safari Technology Preview 105+.

The API lets JavaScript record video and audio from any source that produces a MediaStream. Such sources include cameras and microphones, canvas, video and audio elements, web audio and WebRTC peer-connections.

202 questions
40
votes
6 answers

All MIME types supported by MediaRecorder in Firefox and Chrome?

Where can I find a list of all MIME types that are supported by Firefox or Chrome? All examples I've seen so far using video/webm only.
Hp93
  • 996
  • 2
  • 12
  • 21
17
votes
1 answer

MediaRecorder.stop() doesn't clear the recording icon in the tab

I start and stop a MediaRecorder stream. The red "recording" icon appears in the Chrome tab on start, but doesn't go away on stop. The icon looks like this: My code looks like this: const mediaRecorder = new MediaRecorder(stream); ... // Recording…
Rick Viscomi
  • 6,242
  • 2
  • 31
  • 46
16
votes
3 answers

Why does Chrome retain an anonymous MediaRecorder object in memory?

After trying to understand why some of my Web application's objects were retained in memory by Chrome I think I may have narrowed it down to a case of a MediaRecorder object being retained by the browser even though the application has let go of all…
amn
  • 6,917
  • 6
  • 48
  • 75
16
votes
4 answers

How to create an AudioBuffer from a Blob?

I have an audio file/blob that has been created using the MediaRecorder api: let recorder = new MediaRecorder(this.stream) let data = []; recorder.ondataavailable = event => data.push(event.data); and then later when the recording is finished: let…
maximedupre
  • 3,597
  • 4
  • 24
  • 56
11
votes
1 answer

Change playout delay in WebRTC stream

I'm trying to cast a live MediaStream (Eventually from the camera) from peerA to peerB and I want peerB to receive the live stream in real time and then replay it with an added delay. Unfortunately in isn't possible to simply pause the stream and…
Endless
  • 24,091
  • 10
  • 82
  • 106
11
votes
1 answer

Record 5 seconds segments of audio using MediaRecorder and then upload to the server

I want to record user's microphone 5 seconds long segments and upload each to the server. I tried using MediaRecorder and I called start() and stop() methods at 5 seconds time interval, but when I concatenate these recordings there is a "drop" sound…
MM PP
  • 3,712
  • 8
  • 29
  • 55
8
votes
3 answers

transmitted getUserMedia / MediaRecorder video format larger than requested format. How to tell?

Background: On Windows 10 I'm using getUserMedia (gUM) and MediaRecorder in Google Chrome (v71) to capture and encode a video stream. I'm using the constraints parameter to gUM to tell it I want a video format of 352x288. I'm requesting…
O. Jones
  • 81,279
  • 15
  • 96
  • 133
8
votes
1 answer

MediaRecorder ondataavailable work successfully once

MediaRecorder ondataavailable work successful once. I need to get blob, get it base64, send to my server, decode this base64 to audio blob. This is very strange. For example, output: blob1 blob2 blob3 blob4 blob5 blob6 blob7 blob8 blob9 .... I can…
DuckerMan
  • 85
  • 1
  • 4
7
votes
1 answer

Combine audio and video streams into one file with MediaRecorder

I am making a small interactive animation/game (on canvas with PixiJS) and wish to give users an option to save the rendered animation. After doing my research, MediaRecorder appears to be the API that I should use to record and render the video.…
John
  • 1,165
  • 2
  • 6
  • 20
6
votes
2 answers

How to play WEBM files individually which are created by MediaRecorder

For recording audio and video, I am creating webm files under the ondataavailable of MediaRecorder API. I have to play each created webm file individually. Mediarecorder api inserts header information into first chunk (webm file) only, so rest of…
Suman Bogati
  • 5,931
  • 1
  • 18
  • 33
6
votes
2 answers

WebRTC video/audio streams out of sync (MediaStream -> MediaRecorder -> MediaSource -> Video Element)

I am taking a MediaStream and merging two separate tracks (video and audio) using a canvas and the WebAudio API. The MediaStream itself does not seem to fall out of sync, but after reading it into a MediaRecorder and buffering it into a video…
Jacob Greenway
  • 371
  • 2
  • 5
  • 14
6
votes
1 answer

CanvasCaptureMediaStream / MediaRecorder Frame Synchronization

When using CanvasCaptureMediaStream and MediaRecorder, is there a way to get an event on each frame? What I need is not unlike requestAnimationFrame(), but I need it for the CanvasCaptureMediaStream (and/or the MediaRecorder) and not the window. …
Brad
  • 146,404
  • 44
  • 300
  • 476
6
votes
2 answers

Specifying codecs with MediaRecorder

How can I specify the codecs used with the MediaRecorder API? The only option I see is for mimeType which isn't really sufficient. Cramming in the codecs in the mimeType option doesn't seem to work. var mediaRecorder = new MediaRecorder( …
Brad
  • 146,404
  • 44
  • 300
  • 476
5
votes
1 answer

MediaRecorder captured on Chrome not playable on Mobile or Safari

Goal: use MediaRecorder (or else) api to produce video files that are viewable cross platforms. Fail: current api falls back to container/codec on google chrome which is only viewable on chrome and advanced desktop media players but not on Safari or…
David Ben Ari
  • 1,979
  • 3
  • 18
  • 38
5
votes
1 answer

Combining and position two media streams

I am trying to produce something similar to https://recordscreen.io/ It positions the users camera over the screen recording I've got both streams separately right now. I've tried position one over another but I want it in a single video element…
Reece Ward
  • 113
  • 1
  • 7
1
2 3
…
13 14