Improve audio quality (#26)

* add @types for MediaRecorder

* increase audio quality on user media

* increase audio quality on ffmpeg

* add support for safari codec

* fallback to non-specified mime type

client/package.json

@@ -24,6 +24,7 @@
     "is-ip": "^3.1.0"
   },
   "devDependencies": {
+    "@types/dom-mediacapture-record": "^1.0.7",
     "esbuild": "0.12.3",
     "npm-run-all": "^4.1.5",
     "ts-node": "^10.0.0",

client/src/transmitter/index.ts

@@ -56,7 +56,6 @@ let _streamKey: string | undefined
 let _mimeType: string | undefined
 
 function initMimeType() {
-  // @ts-ignore
   if (!window.MediaRecorder) {
     return
   }
@@ -68,10 +67,10 @@ function initMimeType() {
     'video/webm;codecs=vp8',
     'video/webm;codecs=daala',
     'video/mpeg',
+    'video/mp4',
   ]
 
   for (const type of types) {
-    // @ts-ignore
     const supported = MediaRecorder.isTypeSupported(type)
     if (supported) {
       _mimeType = type
@@ -114,7 +113,8 @@ function connect(
 
   const protocol = !localhost && secure ? 'wss' : 'ws'
   const portStr = localhost ? `:${port}` : ''
-  const url = `${protocol}://${hostname}${portStr}/ingest/ws/${_streamKey}?mimeType=${_mimeType}`
+  const query = _mimeType ? `?mimeType=${_mimeType}` : ''
+  const url = `${protocol}://${hostname}${portStr}/ingest/ws/${_streamKey}${query}`
 
   console.log('socket', 'url', url)
 
@@ -162,8 +162,7 @@ const minRetryThreshold = 60 * 1000 // 1 min
 
 function start_recording(stream: MediaStream) {
   // console.log('start_recording', stream)
-  // @ts-ignore
-  if (recording || !window.MediaRecorder || !_mimeType || !_streamKey) return
+  if (recording || !window.MediaRecorder || !_streamKey) return
 
   recording = true
 
@@ -266,7 +265,10 @@ async function set_media_to_user(): Promise<MediaStream> {
 
   return new Promise((resolve, reject) => {
     navigator.mediaDevices
-      .getUserMedia({ video: true, audio: true })
+      .getUserMedia({
+        video: true,
+        audio: { echoCancellation: true, noiseSuppression: true },
+      })
       .then((stream) => {
         set_video_stream(stream)
         resolve(stream)
@@ -283,9 +285,9 @@ function setup_media_recorder(stream: MediaStream): void {
     plunk_media_recorder_listener()
   }
 
-  // @ts-ignore
   media_recorder = new MediaRecorder(stream, {
     mimeType: _mimeType,
+    audioBitsPerSecond: 128 * 1024,
     videoBitsPerSecond: 3 * 1024 * 1024,
   })
 

client/tsconfig.json

@@ -14,12 +14,12 @@
     "noUnusedParameters": false,
     "noImplicitAny": false,
     "declaration": true,
-    "typeRoots": ["node_modules/@types"],
+    "typeRoots": ["node_modules/@types", "../node_modules/@types"],
     "resolveJsonModule": true
   },
   "typeAcquisition": {
     "enable": false
   },
-  "include": ["./src/**/*.ts"],
+  "include": ["../node_modules/@types", "./src/**/*.ts"],
   "exclude": ["node_modules", "dist"]
 }

server/src/clients/ffmpeg.ts

@@ -10,7 +10,8 @@ const logger = {
     console.error(`[${logTs()}][stream-${streamId}] ${msg}`),
 }
 
-const baseArgs = ['-i', '-', '-acodec', 'aac', '-f', 'flv']
+const audioArgs = ['-acodec', 'aac', '-b:a', '128k', '-ar', '44100']
+const baseArgs = ['-i', '-', '-f', 'flv', ...audioArgs]
 
 const videoCopyArgs = [...baseArgs, '-vcodec', 'copy']
 const videoTranscodeArgs = [

yarn.lock

@@ -146,6 +146,11 @@
   dependencies:
     "@types/express" "*"
 
+"@types/dom-mediacapture-record@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@types/dom-mediacapture-record/-/dom-mediacapture-record-1.0.7.tgz#08bacca4296ef521d59049f43e65cf971bbf6be1"
+  integrity sha512-ddDIRTO1ajtbxaNo2o7fPJggpN54PZf1ZUJKOjto2ENMJE/9GKUvaw3ZRuQzlS/p0E+PnIcssxfoqYJ4yiXSBw==
+
 "@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.18":
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.20.tgz#44caee029f2c26c46711da5e845cdc12167ad72d"