mediarecorder-api

问题 I have created an app using peer js to initiate video calls. I am using mediarecorder Api to record the incoming stream from caller. However, I need to add audio of both the caller and receiver in the call to the recording, and video should be of only the caller(incoming stream). I have tried https://github.com/muaz-khan/MultiStreamsMixer this. However, on recording it I get an unreadable file by vlc. I have also tried adding the local audio track to the recording stream, but that doesn't

问题 I'm trying to capture the contents of a canvas element with alpha channel. When I do it I get the RGB values correctly but the Alpha channel seems to get dropped when playing back the resulting video. Is there a way to achieve this? I'm running the following code: var stream = canvas.captureStream(60); var recorder = new MediaRecorder(stream); recorder.addEventListener('dataavailable', finishCapturing); recorder.addEventListener('stop', function(e) { video.oncanplay = video.play; video.src =

问题 I'm trying to capture the contents of a canvas element with alpha channel. When I do it I get the RGB values correctly but the Alpha channel seems to get dropped when playing back the resulting video. Is there a way to achieve this? I'm running the following code: var stream = canvas.captureStream(60); var recorder = new MediaRecorder(stream); recorder.addEventListener('dataavailable', finishCapturing); recorder.addEventListener('stop', function(e) { video.oncanplay = video.play; video.src =

问题 The video in the top is the stream from navigator.mediaDevices.getUserMedia() which is set as the source of a the first video element. The bottom video is the video from MediaRecorder API . The video is played from a Virtual Web Camera ( OBS VirtualCam specifically) The problem I'm having with this When the video starts to stream for the web camera (once allowed) the media seems to be pushed to the MediaSource but the playback took a while to actually play (about 2-3 seconds). What kind of

问题 The video in the top is the stream from navigator.mediaDevices.getUserMedia() which is set as the source of a the first video element. The bottom video is the video from MediaRecorder API . The video is played from a Virtual Web Camera ( OBS VirtualCam specifically) The problem I'm having with this When the video starts to stream for the web camera (once allowed) the media seems to be pushed to the MediaSource but the playback took a while to actually play (about 2-3 seconds). What kind of

问题 This question already has answers here : MediaStream Capture Canvas and Audio Simultaneously (2 answers) Closed 3 years ago . I have a canvas stream using canvas.captureStream(). I have another video stream from webrtc video call. Now i want to mix canvas stream with audio tracks of the video stream.How can i do that? 回答1: Use the MediaStream constructor available in Firefox and Chrome 56, to combine tracks into a new stream: let stream = new MediaStream([videoTrack, audioTrack]); The

问题 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 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

问题 I am trying to learn how to record media in the browser and I may be over-complicating things. There is an abundant supply of straight-forward examples but I got bogged down at the part when the recordings are pushed to a Blob object with an arbitrarily selected media type without checking whether that format is supported. Therefore I assume there is a list or people just keep building on past experiences. For example, from Mido22/MediaRecorder-sample: mediaOptions = { video: { tag: 'video',

问题 I am currently working on a Chromebook application where I have to record an audio file with record/pause/resume features and then save the file in mp3 or ogg format. I am using mediaRecorder API to record the audio successfuly but the default file format Chrome supports is webm. I would like to know or get any help to convert/encode webm audio file to mp3 or ogg format using javascript to I could play it in any browser. I would be happy to share the code. 回答1: For everyone who is still