Enhancements

- Added recording functionality
- Fix issue with initial connection to web socket

comm.html

@@ -24,6 +24,8 @@
 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
+        <script src='https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js'></script>
 
         <!-- Custom styles -->
         <link rel="stylesheet" href="css/comm.css">
@@ -48,9 +50,10 @@
             <div class="row margin-top-20">                
                 <!-- Call Buttons -->
                 <div class="col-sm-12 text-center" id="callBtns">
-                    <button class="btn btn-success btn-sm initCall" id="initAudio"><i class="fa fa-phone"></i></button>
+                    <button class="btn btn-success btn-sm initCall" id="initAudio" title='Start audio call'><i class="fa fa-phone"></i></button>
-                    <button class="btn btn-info btn-sm initCall" id="initVideo"><i class="fa fa-video-camera"></i></button>
+                    <button class="btn btn-info btn-sm initCall" id="initVideo" title="Start video call"><i class="fa fa-video-camera"></i></button>
-                    <button class="btn btn-danger btn-sm" id="terminateCall" disabled><i class="fa fa-phone-square"></i></button>
+                    <button class="btn btn-danger btn-sm" id="terminateCall" disabled title="End call"><i class="fa fa-phone-square"></i></button>
+                    <button class="btn btn-sm" id='record' disabled title="Record"><i class="fa fa-dot-circle-o"></i></button>
                 </div>
                 <!-- Call Buttons -->
                 

js/comm.js

@@ -17,6 +17,8 @@ var awaitingResponse;
 var streamConstraints;
 var myMediaStream;
 let wsChat;
+var recordedChunks = [];
+var mediaRecorder = null;
 
 const room = getRoom();
 
@@ -475,6 +477,60 @@ window.addEventListener('load', function(){
         //enable call buttons
         enableCallBtns();
     });
+    
+    /*
+    ********************************************************************************************************************************
+    ********************************************************************************************************************************
+    ********************************************************************************************************************************
+    ********************************************************************************************************************************
+    ********************************************************************************************************************************
+    */
+
+    
+    document.getElementById('record').addEventListener('click', (e)=>{
+        if(myMediaStream && myMediaStream.getTracks().length){
+            if(mediaRecorder && mediaRecorder.state == 'recording'){
+                //stop recording
+                mediaRecorder.stop();
+
+                e.setAttribute('title', 'Record');
+                e.target.classList.remove('btn-danger');
+            }
+
+            else{
+                //start recording
+                mediaRecorder = new MediaRecorder(myMediaStream, {
+                    mimeType: 'video/webm;codecs=vp9'
+                });
+    
+                mediaRecorder.start(1000);
+
+                //change the button to reflect that recording has started
+                e.setAttribute('title', 'Stop recording');
+                e.target.classList.add('btn-danger');
+    
+                mediaRecorder.ondataavailable = function(e){
+                    recordedChunks.push(e.data);
+                }
+    
+                mediaRecorder.onstop = function(){
+                    saveRecordedStream(recordedChunks);
+    
+                    setTimeout(()=>{
+                        recordedChunks = [];
+                    }, 3000);
+                }
+    
+                mediaRecorder.onerror = function(e){
+                    console.error(e);
+                }
+            }
+        }
+
+        else{
+            showSnackBar('Nothing to record', 5000);
+        }
+    });
 });
 
 /*
@@ -886,6 +942,11 @@ function endCall(msg, setTimeOut){
     clearTimeout(awaitingResponse);
 
     document.getElementById('callerTone').pause();
+
+    //disable the record button
+    document.getElementById('record').removeAttribute('disabled');
+
+    stopMediaStream();
 }
 
 /*
@@ -918,6 +979,7 @@ function enableCallBtns(){
     }
     
     document.getElementById('terminateCall').setAttribute('disabled', true);
+    document.getElementById('record').setAttribute('disabled', true);
 }
 
 /*
@@ -937,6 +999,7 @@ function disableCallBtns(){
     }
     
     document.getElementById('terminateCall').removeAttribute('disabled');
+    document.getElementById('record').removeAttribute('disabled');
 }
 
 /*
@@ -1062,12 +1125,8 @@ function startCounter(){
 */
 
 function stopMediaStream(){    
-    if(myMediaStream){
+    if(myMediaStream && myMediaStream.getTracks().length){
-        var totalTracks = myMediaStream.getTracks().length;
+        myMediaStream.getTracks().forEach(track => track.stop())
-        
-        for(let i = 0; i < totalTracks; i++){
-            myMediaStream.getTracks()[i].stop();
-        }
     }
 }
 
@@ -1133,3 +1192,13 @@ function getRoom(){
         return "";
     }
 }
+
+
+
+function saveRecordedStream(chunk){
+    let blob = new Blob(chunk, {type:'video/webm'});
+
+    let file = new File([blob], `__${moment().unix()}-record.webm`);
+
+    saveAs(file);
+}