empty signals for canvas, and audio, same re-record, more stability

Author: NumberCooler

public/app.html

@@ -110,13 +110,15 @@
             <div id="chkCanvas" style="display:none;padding:5px;background-color:gainsboro;border-radius:20px;padding-left:15px;padding-right:15px;margin-right:10px;">🔴 Canvas</div>
         </div>
         <div id="mockHolder"></div>
-        <div>
+        <div id="recordHolder">
             <Component id="mic_holder"></Component>
             <Component id="mic_holder2"></Component>
             <Component id="camera_holder"></Component>
             <canvas id="canvas_screen"></canvas>
         </div>
+        
         <div id="playholder" style="display:none;">
+            <div>🔵 Last Record</div>
             <video id="playscreen"></video>
             <Component id="playaudio"></Component>
         </div>
@@ -155,6 +157,7 @@
     },
     stream : null,
     tracks : [],
+    recordType : "none",
     video : {
         mode : "none"
     },
@@ -190,7 +193,7 @@
 }
 //canvas
 
-canvas_screen.el.style.display = "none";
+
 
 canvas_screen.el.style.width = "640px";
 canvas_screen.el.style.height = "480px";
@@ -215,8 +218,6 @@
 ctx.fill();
 
 var cstate = 0;
-
-
 btnNext.el.addEventListener("click",()=>{
     switch(cstate%3) {
         case 0:
@@ -270,10 +271,40 @@
     }
     cstate++;
 })
+canvas_screen.el.style.display = "none";
 
 
+var cstate1 = 0;
+setInterval(()=>{ // like ping, to record something even if is a picture
+    if(self.app.video.mode == "canvas" || self.app.video.mode == "play") {
+        //console.log("OK");
+        if(cstate1==0) {
+            ctx.fillStyle = "#000";
+            ctx.strokeStyle = "#00f";
+            ctx.beginPath();
+            ctx.moveTo(0, 479);
+            ctx.lineTo(639, 479);
+            ctx.closePath();
+            ctx.stroke();   
+            cstate1 = 1;
+        } else if(cstate1==1) {
+            ctx.fillStyle = "#001";
+            ctx.strokeStyle = "#f00";
+            ctx.beginPath();
+            ctx.moveTo(0, 479);
+            ctx.lineTo(479, 639);
+            ctx.closePath();
+            ctx.stroke();   
+            cstate1 = 0;
+        }
+    }
+},10);
+
 // devices
-self.app.stream = stream = canvas_screen.el.captureStream(32); // frames per second
+//self.app.stream = stream = canvas_screen.el.captureStream(32); // frames per second
+var stream = null;
+self.app.stream = null;
+
 
 let audioStream0 = null;
 
@@ -388,6 +419,10 @@
     chkCanvas.el.style.display = "none";
     chkCamera.el.style.display = "";
 
+    if(self.app.video.mode == "play") {
+        recordHolder.el.style.display = "";
+        playscreen.el.style.display = "none";
+    }
     self.app.video.mode = "camera";
 
     canvas_screen.el.style.display = "none";
@@ -413,21 +448,33 @@
 
 btnSetCanvas.el.addEventListener("click",()=>{
 
+    // CANVAS WILL NOT RECORD FIRST FRAME IF YOU DOWN CHANGE THE CONTENT OF CANVAS AT LEAST ONE TIME
+
     chkScreen.el.style.display = "none";
     chkCanvas.el.style.display = "";
     chkCamera.el.style.display = "none";
 
-    self.app.video.mode = "canvas";
-    if(cameraDevice) {
+
+    if(cameraDevice) { // stop camera and screen
+        console.log("CLEAR camera");
         cameraDevice.pause();
         stream.getTracks().forEach(function(track) {
           track.stop();
         });
         cameraDevice.style.display = "none";
         camera_holder.$.elementsClear();
     }
+
+    if(self.app.video.mode == "play") {
+        recordHolder.el.style.display = "";
+        playscreen.el.style.display = "none";
+    }
+    self.app.video.mode = "canvas";
     canvas_screen.el.style.display = "";
-    stream = canvas_screen.el.captureStream(32);
+    self.app.stream = stream = canvas_screen.el.captureStream(32);
+
+
+    console.log(stream);
 
 });
 
@@ -437,7 +484,7 @@
     chkCamera.el.style.display = "none";
 
     canvas_screen.el.style.display = "none";
-    self.app.video.mode = "desktop";
+    
 
     if(cameraDevice) {
         cameraDevice.pause();
@@ -448,6 +495,12 @@
         camera_holder.$.elementsClear();
     }
 
+    if(self.app.video.mode == "play") {
+        recordHolder.el.style.display = "";
+        playscreen.el.style.display = "none";
+    }
+    self.app.video.mode = "desktop";
+
 
     const constraints = {
         video: {
@@ -478,6 +531,15 @@
     } catch (error) {
       stream = schema.el.control.src = window.URL.createObjectURL(stream2);
     }
+
+    stream.getTracks().forEach((track)=>{
+        track.onended = function(event) {
+            log("end of screen capture");
+            chkScreen.el.style.display = "none";
+            stopRecording();
+        }
+    });
+
     schema.el.control.play();
     cameraDevice = schema.el.control;
 });
@@ -487,6 +549,7 @@
     chkCanvas.el.style.display = "none";
     chkCamera.el.style.display = "none";
 
+
     if(cameraDevice) {
         cameraDevice.pause();
         stream.getTracks().forEach(function(track) {
@@ -495,6 +558,12 @@
         cameraDevice.style.display = "none";
         camera_holder.$.elementsClear();
     }
+
+    if(self.app.video.mode == "play") {
+        recordHolder.el.style.display = "";
+        playscreen.el.style.display = "none";
+    }
+
     self.app.video.mode = "none";
     camera_holder.$.elementsClear();
     playscreen.el.style.display = "none";  
@@ -540,32 +609,32 @@
 function handleDataAvailable(event) {
 
     if (event.data && event.data.size > 0) {
+        console.log(event.data);
         recordedBlobs.push(event.data);
     } else {
         //console.log( mediaRecorder.requestData() );
         //console.log(event);
     }
 }
 
+async function handlePause(event) {
+    log('Recorder paused: ', event);
+}
 async function handleStop(event) {
     log('Recorder stopped: ', event);
+    
     if(self.app.video.mode == "none") {
         const superBuffer = new Blob(recordedBlobs, {type: 'audio/webm'});
-        
         var url = (window.URL || window.webkitURL).createObjectURL(superBuffer);
-        
         var schema = await playaudio.$.elementSetPacketAsync(`
             <audio id="audio" controls>
                 <source src="`+url+`" type="audio/webm">
                 Your browser does not support the audio tag.
             </audio>
         `);
-        
         self.app.audio.control = schema.el.audio;
-
         self.app.events.off("hitTrack",self.app.events.hitTrack);
         delete self.app.events.hitTrack;
-        
     } else {
         const superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
         playscreen.el.src = window.URL.createObjectURL(superBuffer);
@@ -583,9 +652,12 @@
         throw new Error("(you must select some input device)");
         return;
     }
-
+    console.log("video mode",self.app.video.mode)
+    console.log("audio mode",self.app.audio.mode)
+    recordHolder.el.style.display = "";
     recordedBlobs = [];
 
+
     var audioCtx = new AudioContext();
     var audioMixer = audioCtx.createMediaStreamDestination();
 
@@ -612,9 +684,15 @@
             }
             console.log("hit",self.app.tracks[n]);
         };
-        //playback.start();
         self.app.events.on("hitTrack",self.app.events.hitTrack);
 
+        // null signal to record empty audio space if mic is not activated
+        var nullSignal = audioCtx.createOscillator();
+        nullSignal.type = 'sine';
+        nullSignal.frequency.value = 440;
+        var nullSignalGain = audioCtx.createGain();
+        nullSignalGain.gain.value = -100;
+        nullSignalGain.connect(audioMixer);
     }
 
     // mixing audio and video
@@ -623,9 +701,17 @@
             .getAudioTracks()
             .forEach((audioTrack) => stream.addTrack(audioTrack));
     }
+    
+    if(self.app.video.mode != "none") {
+        self.app.recordType = "video";
+    } else {
+        self.app.recordType = "audio";
+    }
 
     var options = {};
-    if(self.app.video.mode != "none") {
+    if(self.app.recordType == "video") {
+
+        console.log("VIDEO RECORD TYPE");
         options.mimeType =  'video/webm';
         try {
             mediaRecorder = new MediaRecorder(stream, options);
@@ -670,23 +756,31 @@
     btnPlay.el.disabled = true;
     btnDownloadMovie.el.disabled = true;
     mediaRecorder.onstop = handleStop;
+    mediaRecorder.onpause = handlePause;
     mediaRecorder.ondataavailable = handleDataAvailable;
     mediaRecorder.onerror = function(error) {
         console.log(error.name);
         console.log(error);
     }
-    
-    
     mediaRecorder.start();
-    
-
+    try {
+        
+    } catch(e) {
+        log("error on media recorder start");
+        log(e.message);
+    }
 
 
     log('MediaRecorder started' + mediaRecorder);
 }
 
 function stopRecording() {
-    mediaRecorder.stop();
+    if(mediaRecorder.state != "inactive") { 
+        mediaRecorder.stop();    
+    } else { // user stopped sharing screen.
+        self.app.video.mode = "none";
+        chkScreen.el.style.display = "none";
+    }
     log('Recorded Blobs: '+ recordedBlobs.length);
     playscreen.el.controls = true;
 }
@@ -707,29 +801,19 @@
 
 btnRecord.el.addEventListener("click",()=>{ toggleRecording(); });
 btnPlay.el.addEventListener("click",()=>{ 
-    playholder.el.style.display = "";
-    
-
-    if(cameraDevice) {
-        cameraDevice.pause();
-        stream.getTracks().forEach(function(track) {
-          track.stop();
-        });
-        cameraDevice.style.display = "none";
-        camera_holder.$.elementsClear();
-    }
-    camera_holder.$.elementsClear();
 
-    canvas_screen.el.style.display = "none";
-
-    if(self.app.video.mode == "none") {
+    playholder.el.style.display = "";
+    recordHolder.el.style.display = "none";
+    if(self.app.recordType == "audio") {
         playscreen.el.style.display = "none";
         self.app.audio.control.play();
-    } else {
+        self.app.audio.mode = "play";
+    } else if(self.app.recordType == "video") {
         playscreen.el.style.display = "";
         playaudio.$.elementsClear();
         playscreen.el.style.width = "100%";
         playscreen.el.play();  
+        self.app.video.mode = "play";
     }
 });
 btnDownloadMovie.el.addEventListener("click",()=>{ download(); });