changeset 135:262995cfd3e6

Bootstrap the app with the recorder service and component

--- a/src/app/app.component.html	Mon Mar 20 13:26:23 2017 +0000
+++ b/src/app/app.component.html	Mon Mar 20 13:26:33 2017 +0000
@@ -4,9 +4,9 @@
   <span class="app-toolbar-filler"></span>
 
   <app-playback-control></app-playback-control>
-  <button md-icon-button>
-    <md-icon>mic_off</md-icon>
-  </button>
+  <ugly-recording-control
+    (finishedRecording)="onFileOpened($event)"
+  ></ugly-recording-control>
 
   <!-- This fills the remaining space of the current row -->
   <span class="app-toolbar-filler"></span>

--- a/src/app/app.module.ts	Mon Mar 20 13:26:23 2017 +0000
+++ b/src/app/app.module.ts	Mon Mar 20 13:26:33 2017 +0000
@@ -12,6 +12,15 @@
 import { FeatureExtractionService } from "./services/feature-extraction/feature-extraction.service";
 import { FeatureExtractionMenuComponent } from "./feature-extraction-menu/feature-extraction-menu.component";
 import { ProgressSpinnerComponent } from "./progress-spinner/progress-spinner.component";
+import {
+  AudioRecorderService,
+  AudioInputProvider,
+  MediaRecorderConstructor,
+  MediaRecorder as IMediaRecorder,
+  MediaRecorderOptions,
+  ThrowingMediaRecorder,
+} from "./services/audio-recorder/audio-recorder.service";
+import {RecordingControlComponent} from "./recording-control/recording-control.component";
 
 export function createAudioContext(): AudioContext {
   return new (
@@ -24,12 +33,39 @@
   return new Audio();
 }
 
+export function createAudioInputProvider(): AudioInputProvider {
+  if (navigator.mediaDevices &&
+    typeof navigator.mediaDevices.getUserMedia === 'function') {
+    return () => navigator.mediaDevices.getUserMedia(
+      {audio: true, video: false}
+    );
+  } else {
+    return () => Promise.reject('Recording is not supported in this browser.');
+  }
+}
+
+declare const MediaRecorder: {
+  prototype: IMediaRecorder;
+  new(stream: MediaStream,
+      options?: MediaRecorderOptions): IMediaRecorder;
+  isTypeSupported(mimeType: string): boolean;
+};
+
+export function createMediaRecorderFactory(): MediaRecorderConstructor {
+  if (typeof MediaRecorder !== 'undefined') {
+    return MediaRecorder;
+  } else {
+    return ThrowingMediaRecorder;
+  }
+}
+
 @NgModule({
   declarations: [
     AppComponent,
     WaveformComponent,
     AudioFileOpenComponent,
     PlaybackControlComponent,
+    RecordingControlComponent,
     FeatureExtractionMenuComponent,
     ProgressSpinnerComponent
   ],
@@ -43,7 +79,10 @@
     {provide: HTMLAudioElement, useFactory: createAudioElement}, // TODO use something more generic than HTMLAudioElement
     {provide: 'AudioContext', useFactory: createAudioContext}, // use a string token, Safari doesn't seem to like AudioContext
     AudioPlayerService,
+    {provide: 'AudioInputProvider', useFactory: createAudioInputProvider},
+    AudioRecorderService,
     FeatureExtractionService,
+    {provide: 'MediaRecorderFactory', useFactory: createMediaRecorderFactory},
     {provide: 'PiperRepoUri', useValue: 'assets/remote-plugins.json'}
   ],
   bootstrap: [AppComponent]