mediastream

问题 I am using MediaRecorder in ReactJS to record audio from the microphone and storing into the blob with MIME type "audio/mp3". I want to convert this blob to MP3 and upload it in S3 bucket. I am able to convert it into WAV by using audioContext, decodeAudioData and audioBufferToWav functions, but the size of the WAV is very large. Since the MP3 file has relatively very small in size so I want it to convert my blob to MP3. Any help? My code for recording and converting to wav: getUserMedia({

问题 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 try to stop the browser webcam permissions indicator by using track.stop() like this: myLocalStream.getTracks().forEach(track => { track.stop(); }); In most cases this works fine. But if during the session I have switched between different cameras by using replaceTrack() it will not work. The browser still shows a running webcam. The code for switching between tracks looks like this: pc.getSenders().map(sender => { sender.replaceTrack(myLocalStream.getTracks().find(t => t.kind == sender

来源： https://stackoverflow.com/questions/58138514/htmlimageelement-src-as-stream

问题 Basically I want to be able to perform effectively this same code: const video = document.getElementById('video'); const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); const draw = () => { context.drawImage(video, 0, 0); requestAnimationFrame(draw); } video.onplay = () => { requestAnimationFrame(draw); } only using an offscreen canvas. I can send images over messages to the worker the offscreen canvas is on, but not video as it's directly tied to an

问题 Basically I want to be able to perform effectively this same code: const video = document.getElementById('video'); const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); const draw = () => { context.drawImage(video, 0, 0); requestAnimationFrame(draw); } video.onplay = () => { requestAnimationFrame(draw); } only using an offscreen canvas. I can send images over messages to the worker the offscreen canvas is on, but not video as it's directly tied to an

问题 Basically I want to be able to perform effectively this same code: const video = document.getElementById('video'); const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); const draw = () => { context.drawImage(video, 0, 0); requestAnimationFrame(draw); } video.onplay = () => { requestAnimationFrame(draw); } only using an offscreen canvas. I can send images over messages to the worker the offscreen canvas is on, but not video as it's directly tied to an

问题 I've created a webCam Stream with navigator.getUserMedia({ "video": true }, function(stream){ videoTag.src = window.URL.createObjectURL(stream); videoTag.play(); } Can I access the MediaStream object in stream in global scope?* (something like navigator.getAllMediaStreams[0] ) *edit: ...without adding logic to the getUserMedia function. My problem case is a qr-decoder-library, that gets the stream for me and I don't want to change the third party code 回答1: There is no list of active media

问题 I've created a webCam Stream with navigator.getUserMedia({ "video": true }, function(stream){ videoTag.src = window.URL.createObjectURL(stream); videoTag.play(); } Can I access the MediaStream object in stream in global scope?* (something like navigator.getAllMediaStreams[0] ) *edit: ...without adding logic to the getUserMedia function. My problem case is a qr-decoder-library, that gets the stream for me and I don't want to change the third party code 回答1: There is no list of active media

问题 I'd like to be informed about a MediaStreamTrack 's end. According to MDN an ended event is Sent when playback of the track ends (when the value readyState changes to ended ). Also available using the onended event handler property. So I should be able to setup my callback(s) like: const [track] = stream.getVideoTracks(); track.addEventListener('ended', () => console.log('track ended')); track.onended = () => console.log('track onended'); and I expect those to be invoked, once I stop the