web-mediarecorder

问题 I am working on a project where I want to getUserMedia -> MediaRecorder -> socketIO -> MediaSource appendbuffer I got it to work, however after a few seconds it randomly stops. I know about WebRTC, but in the project I am working on it's based on an environment which is a version of Chrome embedded that doesn't support WebRTC. Server: 'use strict'; const io = require('socket.io')(); io.on('connection', (socket) => { console.log('connection'); socket.on('stream', (data) => { socket.emit(

问题 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( outputMediaStream ), { mimeType: 'video/webm; codecs="opus,vp8"' } ); This results in a WebM stream with Vorbis and VP8: FFMPEG STDERR: Input #0, matroska,webm, from 'pipe:': Metadata: encoder : QTmuxingAppLibWebM-0.0.1 Duration: N/A, start: 0.000000, bitrate

问题 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 between. So I tried to record 5 seconds segments using timeslice parameter of start() method: navigator.mediaDevices.getUserMedia({ audio: { channelCount: 2, volume: 1.0, echoCancellation: false, noiseSuppression: false } }).then(function(stream)

问题 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 between. So I tried to record 5 seconds segments using timeslice parameter of start() method: navigator.mediaDevices.getUserMedia({ audio: { channelCount: 2, volume: 1.0, echoCancellation: false, noiseSuppression: false } }).then(function(stream)

问题 I am getting frames from canvas through canvas.getDataURL() . However, now I have an array of png images, but I want a video file. How do I do this? var canvas = document.getElementById("mycanvaselementforvideocapturing"); var pngimages = []; ... setInterval(function(){pngimages.push(canvas.toDataURL())}, 1000); 回答1: For a full browser support way, you'll have to send your image batch to the server then use some server-side program to do the encoding. FFmpeg might be able to do it. But in

问题 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. The MediaRecorder could be running at a different frame rate than the window (possibly at a not regularly divisible rate, such as 25 FPS vs 60 FPS), so I want to update the canvas at its frame rate rather than the window's. 回答1: This example currently

问题 The following code works when the video observing client is loaded first then the webcam client is loaded second it works flawlessly, however, if the order is switched or in any way the stream is interrupted for example by refreshing either client the stream will fail and the Media Source will change its ready state to closed. My assumption is that the video being received on start needs initialization headers for starting and since the stream is being read midstream it never gets said

问题 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 icon in the tab becomes visible. mediaRecorder.start(); ... // Recording icon is still visible. mediaRecorder.stop(); I also have a mediaRecorder.onstop handler defined. It doesn't return anything or interfere with the event object. What's the

问题 I'm using the MediaRecorder API to record some media on a page. In my MediaRecorder initialization, I'm not specifying content type as I do not require anything in particular. The browser can choose what it wants. var mediaRecorder = new MediaRecorder(stream); However, when it comes time to save that recording, I need to know the mimeType for the blob, and so I can determine a reasonable file name extension. The MediaRecorder.mimeType proprety is what I want, but it is an empty string. It

问题 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 details here. The whammy approach works well, but is only supported in Chrome, since it's the only browser that currently supports webp encoding ( canvas.toDataURL("image/webp") ). And so I'm using the captureStream approach as a backup for Firefox