Created
August 20, 2016 02:08
-
-
Save mganeko/b3ccfba47c7a525a73eff43fabd16e12 to your computer and use it in GitHub Desktop.
Browser MCU mix recording
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let remoteVideo0 = document.getElementById('webrtc-remote-video-0'); | |
| let remoteVideo1 = document.getElementById('webrtc-remote-video-1'); | |
| let remoteVideo2 = document.getElementById('webrtc-remote-video-2'); | |
| let remoteVideo3 = document.getElementById('webrtc-remote-video-3'); | |
| let canvasMix = document.getElementById('canvas_mix'); | |
| let ctxMix = canvasMix.getContext('2d'); | |
| ctxMix.fillStyle = 'rgb(128, 192, 128)'; | |
| let mixStream = null; | |
| let animationId = null; | |
| let audioContext = new window.AudioContext(); | |
| let micNodes = []; | |
| let outputNodes = []; | |
| let audioMixSterams = []; | |
| // mixed stream | |
| mixStream = canvasMix.captureStream(15); | |
| animationId = window.requestAnimationFrame(drawCanvas) | |
| // ---- recording --- | |
| let recorder = null; | |
| let blobUrl = null; | |
| let chunks = []; | |
| let playbackVideo = document.getElementById('playback_video'); | |
| let anchor = document.getElementById('downloadlink'); | |
| let recordingStream = null | |
| let recOutputNode = null; | |
| let recAudioMixStream = null; | |
| if (! window.MediaStream) { | |
| window.MediaStream = window.webkitMediaStream; | |
| } | |
| function startRecording() { | |
| recordingStream = new MediaStream(); | |
| recordingStream.addTrack(mixStream.getVideoTracks()[0]); | |
| // -- audio mix -- | |
| recOutputNode = audioContext.createMediaStreamDestination(); | |
| recAudioMixStream = recOutputNode.stream; | |
| for (let key in micNodes) { | |
| let mic = micNodes[key]; | |
| mic.connect(recOutputNode); | |
| } | |
| recordingStream.addTrack(recAudioMixStream.getAudioTracks()[0]); | |
| if (recorder) { | |
| console.warn("recorder already exist"); | |
| return; | |
| } | |
| recorder = new MediaRecorder(recordingStream); | |
| chunks = []; | |
| recorder.ondataavailable = function(evt) { | |
| console.log("data available: evt.data.type=" + evt.data.type + " size=" + evt.data.size); | |
| chunks.push(evt.data); | |
| }; | |
| recorder.onstop = function(evt) { | |
| console.log('recorder.onstop() evt:', evt); | |
| }; | |
| recorder.start(2000); // OK | |
| console.log("start recording"); | |
| } | |
| function stopRecording() { | |
| if (recorder) { | |
| recorder.stop(); | |
| console.log("stop recording. playback"); | |
| recorder = null; | |
| playRecorded(); | |
| } | |
| } | |
| function playRecorded() { | |
| if (! blobUrl) { | |
| window.URL.revokeObjectURL(blobUrl); | |
| blobUrl = null; | |
| } | |
| var videoBlob = new Blob(chunks, { type: "video/webm" }); | |
| blobUrl = window.URL.createObjectURL(videoBlob); | |
| anchor.download = 'mix_recorded.webm'; | |
| anchor.href = blobUrl; | |
| if (blobUrl) { | |
| playbackVideo.src = blobUrl; | |
| playbackVideo.onended = function() { | |
| playbackVideo.pause(); | |
| playbackVideo.src = ""; | |
| }; | |
| playbackVideo.play(); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment