Adds client audio recording feature

Author: amirfefer

camera.py

@@ -101,7 +101,8 @@ def record(self,upload, cloud):
             cloud.upload_file(f, 'video' + timestr + ".avi")
 
 
-
+    def playAudio(self):
+        winsound.PlaySound("audio.wav", winsound.SND_FILENAME)
     def endVideo(self):
         self.recording = False
 

cloud.py

@@ -1,5 +1,4 @@
 import dropbox
-import config
 class DropObj(object):
     def __init__(self, conf):
         self.app_key = 'ck2ifx3agl50908'

server.py

@@ -63,6 +63,13 @@ def gen(camera, save=False, vstart=False):
         yield (b'--frame\r\n'
                b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')
 
+@app.route('/audio', methods=['POST'])
+@auth.login_required
+def audio():
+    file = request.files['edition[audio]']
+    file.save("audio.wav")
+    cmra.playAudio()
+    return ('', 204)
 @app.route('/video_feed')
 @auth.login_required
 def video_feed():

static/application.js

@@ -53,4 +53,41 @@ $(document).ready(function(){
         $("#btn-cloud").toggleClass('btn-info');
         $("#cloud-note").toggle("slow");
       });
-});
+      var recordRTC = null;
+       $("#btn-sound").click(function(e){
+        e.preventDefault();
+
+        if ($("#btn-sound").hasClass('btn-danger')){
+            recordRTC.stopRecording(function(audioURL) {
+            var formData = new FormData();
+            formData.append('edition[audio]', recordRTC.getBlob())
+            var uri = location.href + 'audio';
+
+            $.ajax({
+                type: 'POST',
+                url: uri,
+                 data: formData,
+                 contentType: false,
+                 cache: false,
+                 processData: false,
+             })
+            });
+        }
+        else
+        {
+            var session = {
+                audio: true,
+                video: false
+            };
+
+            navigator.getUserMedia(session, function (MediaStream) {
+                recordRTC = RecordRTC(MediaStream);
+                recordRTC.startRecording();
+                }, onError);
+        }
+       $("#btn-sound").toggleClass('btn-danger');
+        })
+});
+function onError() {
+console.log("ERROR");
+}

templates/index.html

@@ -8,6 +8,7 @@
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+<script src="//cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='application.js') }}"></script>
 <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='addtohomescreen.css') }}">
 <script src="{{ url_for('static', filename='addtohomescreen.js') }}"></script>
@@ -122,7 +123,7 @@ <h3 align="left">Stream</h3>
 
 
                  <button type="button" id="btn-image" class="btn btn-success" title="Capture a Photo" onclick="document.location.href='get_frame?options=save';"><span class="glyphicon glyphicon-camera"/></button>
-                  <button type="button" id="btn-sound" class="btn btn-success" title="Include sound" onclick="alert('feture in develop...')";><span class="glyphicon glyphicon-volume-up"/></button>
+                  <button type="button" id="btn-sound" class="btn btn-success" title="Record yourself and play it at home" ><span class="glyphicon glyphicon-volume-up"/></button>
                    <button type="button" id="btn-lg2" class="btn btn-success" title="Download a Photo" onclick="document.location.href='get_frame';"><span class="glyphicon glyphicon-download-alt"/></button>
 
               </div>