[microphone] Detect mediaDevices availability and disable button as n…

…eeded
marco-porru · Apr 1, 2020 · 478e692 · 478e692
1 parent 967f40a
commit 478e692
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/node-red-node-ui-microphone/README.md b/node-red-node-ui-microphone/README.md
@@ -21,6 +21,17 @@ The audio is captured in WAV format and published by the node as a Buffer object
 This can be written straight to a file or passed to any other node that expects
 audio data.
 
+## Browser Support
+
+This node will work in most modern browsers as it uses the standard MediaRecorder API.
+
+ - IE : not supported
+ - Safari : MediaRecorder needs to be enabled (Develop -> Experimental Features -> MediaRecorder)
+
+If you are accessing the dashboard remotely (not via `localhost`), then you must
+use HTTPS otherwise the browser will block access to the microphone.
+
+
 ## Privacy
 
 When the button is first pressed, the browser will ask the user's permission for

diff --git a/node-red-node-ui-microphone/package.json b/node-red-node-ui-microphone/package.json
@@ -1,6 +1,6 @@
 {
     "name": "node-red-node-ui-microphone",
-    "version": "0.1.1",
+    "version": "0.1.2",
     "description": "A Node-RED ui node to record audio on a dashboard.",
     "author": "Nick O'Leary",
     "license": "Apache-2.0",

diff --git a/node-red-node-ui-microphone/ui_microphone.js b/node-red-node-ui-microphone/ui_microphone.js
@@ -24,7 +24,7 @@ module.exports = function(RED) {
         var html = String.raw`
             <style>
             </style>
-            <md-button id="microphone_control_{{$id}}" class="nr-ui-microphone-button" ng-click="toggleMicrophone()"><i class="fa fa-2x fa-microphone" /></md-button>
+            <md-button id="microphone_control_{{$id}}" class="nr-ui-microphone-button" ng-disabled="!enabled" ng-click="toggleMicrophone()"><i ng-if="enabled" class="fa fa-2x fa-microphone" /><i ng-if="!enabled" class="fa fa-2x fa-microphone-slash" /></md-button>
             <input type='hidden' ng-init='init(` + configAsJson + `)'>
         `;
         return html;
@@ -87,6 +87,8 @@ module.exports = function(RED) {
                             $scope.config = config;
                         }
 
+                        $scope.enabled =  !!navigator.mediaDevices;
+
                         var worker;
                         var mediaRecorder;
                         var audioContext;
@@ -95,6 +97,7 @@ module.exports = function(RED) {
 
                         var button = $("#microphone_control_"+$scope.$id);
                         $scope.toggleMicrophone = function() {
+                            if (!$scope.enabled) return;
                             if (!active) {
                                 active = true;
                                 $("#microphone_control_"+$scope.$id+" i").removeClass("fa-microphone fa-2x").addClass("fa-circle-o-notch fa-spin");