More flexibility on media options

pico.js

@@ -153,19 +153,26 @@ const Video = {
         )
     },
 }
-const audio = {
-    noiseSuppresion: true,
-    echoCancellation: true,
-}
 const Media = {
-    options: {
-        video: {audio, video: {width: {ideal: 320}, facingMode: 'user'}},
-        audio: {audio, video: false},
-        screen: {audio, video: {mediaSource: 'screen'}},
-        none: {audio: false, video: false},
+    audioDefaults: {
+        noiseSuppresion: true,
+        echoCancellation: true,
+    },
+    videoOptions: {
+        camera: {width: {ideal: 320}, facingMode: 'user', frameRate: 26},
+        screen: {mediaSource: 'screen', frameRate: 26},
+        none: false,
+    },
+    getSelectedConstraints: () => {
+        const videoChoice = document.querySelector('#media-source').value
+        const muted = document.querySelector('#mute-check').checked
+        return {
+            video: Media.videoOptions[videoChoice],
+            audio: muted ? false : Media.audioDefaults,
+        }
     },
     turnOn: async () => {
-        const constraints = Media.options[document.querySelector('#media-source').value]
+        const constraints = Media.getSelectedConstraints()
         const media = await navigator.mediaDevices.getUserMedia(constraints)
         State.media[State.username] = media
         wire({kind: 'peerInfo', value: {type: 'request'}})
@@ -180,8 +187,9 @@ const Media = {
             return m('.media',
                 m('button', {onclick: Media.turnOn}, 'turn on'),
                 m('select#media-source',
-                    Object.keys(Media.options).map(description => m('option', description)),
+                    Object.keys(Media.videoOptions).map(description => m('option', description)),
                 ),
+                m('label', m('input#mute-check', {type: 'checkbox'}), 'mute'),
             )
         }
         else {