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
3
votes
2 answers

How can I catch an issue of MediaRecorder.ondataavailble no longer being called?

I am capturing a user's audio and video with the navigator.mediaDevices.getUserMedia() and then using MediaRecorder and its ondataavailable to store that video and audio blob locally to upload later. Now Im dealing with an issue where for some…
John
  • 55
  • 7
3
votes
2 answers

Corrupt video uploads when chunking MediaRecorder to Google Cloud platform

I currently am using react hook powered component to record my screen, and subsequently upload it to Google Cloud Storage. However, when it finishes, the file created inside Google Cloud appears to be corrupt. This is the gist of the code within my…
Squiggs.
  • 3,037
  • 6
  • 40
  • 73
3
votes
1 answer

Stream audio from client to server to client using WebSocket

I am trying to capture microphone audio from a client web browser, live stream the captured audio to a Node.js server using WebSocket and then again stream the audio back to a different web browser client. So far, at the client side, I opened a…
Akshit Mehra
  • 645
  • 4
  • 14
3
votes
3 answers

Is it possible to get raw values of audio data using MediaRecorder()

I'm using MediaRecorder() with getUserMedia() to record audio data from the browser. It works, but recorded data is recorded in the Blob format. I want to get raw audio data (amplitudes), not the Blobs. Is it possible to do it? My code looks like…
cyberspace
  • 151
  • 10
3
votes
0 answers

High precision html5 media player

I have an html5 media player element with WebM format and my goal is to be able to play the segments in it with super high accuracy (up to 10ms). It's easy to set an accurate start time of segment, but I have issues with stopping playback at a given…
Jack Juiceson
  • 792
  • 4
  • 12
  • 23
3
votes
1 answer

Changing quality of MediaRecorder and canvas.captureStream?

I've recently been trying to generating video in the browser, and have thus been playing with two approaches: Using the whammy js library to combine webp frames into webm video. More details here. Using MediaRecorder and canvas.captureStream. More…
user993683
3
votes
1 answer

MediaSource Buffer works on only one client

So I am trying to a build a livestreaming application, and ran into a strange issue. So I am using getUserMedia to capture video from a user, the user is then marked as the broadcaster. I then use MediaRecorder to get the actual video data from the…
CristianHG
  • 407
  • 5
  • 16
3
votes
1 answer

Poor audio quality with getUserMedia. Any ideas why?

I'm trying to set up an audio recorder in a React web application for recording large groups of people (15+) talking, but can't seem to get the recording quality right. I initially tried capturing the audio recordings by passing the following…
Nicole Hemenway
  • 323
  • 2
  • 10
3
votes
0 answers

When capturing Webcam video with Webrtc, how to trim the recorded video?

I am using javascript to record video with webcam and also upload/download the recorded blob as a video file. I would like the ability to chop off starting section and trailing sections of the video. /** extract a segment from the video…
user193116
  • 3,316
  • 6
  • 37
  • 54
3
votes
1 answer

How to compress webcam videos recorded by html5 MediaRecorder api?

I successfully recorded my webcam using MediaRecorder api and the resulting filesizes seemed far too big for their quality. For example, for an 8 second video that was 480x640 I got a 1mB file size. That does not seem right. My code to…
JasonY
  • 714
  • 7
  • 18
3
votes
0 answers

Record THREEJS animation

I want to be able to record 4k videos of my threejs scene at 60 fps. I have tried ccapture and canvas.captureStream(). They have unreliable effect on my frame rate and hence there are a lot of frame drops. The scene is able to play smoothly at 60…
Amritesh Anand
  • 543
  • 4
  • 20
3
votes
2 answers

PCM support in WebM, and Chrome's WebM implementation

Does WebM support PCM for the audio codec? I didn't think it did, but I see on the WebM documentation page that there is support for a BitDepth field with the following comment: BitDepth - Bits per sample, mostly used for PCM. If WebM does support…
Brad
  • 146,404
  • 44
  • 300
  • 476
3
votes
1 answer

Saving Huge Files

I need to save a file of unknown size, potentially multiple gigabytes, in JS. The data source is a mediastream captured using mediarecorder. In Chrome, this can be accomplished using the filesystem and filewriter apis with filesystem: urls by…
Daniel Herr
  • 14,666
  • 4
  • 39
  • 56
3
votes
1 answer

Control volume gain for Video/Audio stream in Firefox

I'm trying to record Video/Audio files using MediaRecorder API for Firefox. When I'm using web Audio API for creating the nodes (source -> Gain -> Destination) The output of the recorded file is only Audio as the return stream from the destination…
Tamer A. El Sayed
  • 155
  • 1
  • 6
3
votes
2 answers

Correct way to use MediaRecorder with a time slice argument specified with start

After reading this page https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder.start , I have write my own code: var mediaConstraint = { video: true, audio: true }; navigator.getUserMedia(mediaConstraint, function(stream) { var…
nvcnvn
  • 4,719
  • 7
  • 44
  • 71
1 2
3
…
13 14