web-mediarecorder | 易学教程

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

阅读更多关于 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 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

All MIME types supported by MediaRecorder in Firefox and Chrome?

阅读更多关于 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. I've not seen any sort of comprehensive list yet for Firefox but I have managed to find something (via a post on the MediaRecorder API from Google's web updates section) that links to this test set that seems to shed some light on things. Essentially, it looks like the following are (at time of writing) accepted MIME types for video/audio in Chrome: video/webm video/webm;codecs=vp8 video/webm;codecs=vp9 video/webm;codecs=vp8.0 video/webm;codecs=vp9.0 video

Specifying codecs with MediaRecorder

阅读更多关于 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( 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: N/A Stream #0:0(eng): Video: vp8, yuv420p, 640x360, SAR 1:1 DAR 16:9, 30 fps, 30 tbr, 1k tbn, 1k tbc

How to convert array of png image data into video file

阅读更多关于 How to convert array of png image data into video file

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); 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 newest browsers the canvas.captureStream method, has been implemented. It will convert your canvas drawings to

CanvasCaptureMediaStream / MediaRecorder Frame Synchronization

阅读更多关于 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. 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. This example currently only fully works on FireFox , since chrome simply stops the canvas stream when the tab is blurred...