More granular media stream creation

pico.js

@@ -201,22 +201,31 @@ const Media = {
         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
+    getSelectedMedia: async () => {
+        const stream = new MediaStream()
+
         const muted = document.querySelector('#mute-check').checked
-        return {
-            video: Media.videoOptions[videoChoice],
-            audio: muted ? false : Media.audioDefaults,
+        if(!muted) {
+            const audio = Media.audioDefaults
+            const audioStream = await navigator.mediaDevices.getUserMedia({audio})
+            audioStream.getAudioTracks().forEach(track => stream.addTrack(track))
+        }
+
+        const source = document.querySelector('#media-source').value
+        if(source === 'camera') {
+            const video = {width: {ideal: 320}, facingMode: 'user', frameRate: 26}
+            const videoStream = await navigator.mediaDevices.getUserMedia({video})
+            videoStream.getVideoTracks().forEach(track => stream.addTrack(track))
+        }
+        if(source === 'screen' && navigator.mediaDevices.getDisplayMedia) {
+            const videoStream = await navigator.mediaDevices.getDisplayMedia()
+            videoStream.getVideoTracks().forEach(track => stream.addTrack(track))
         }
+
+        return stream
     },
     turnOn: async () => {
-        const constraints = Media.getSelectedConstraints()
-        const media = await navigator.mediaDevices.getUserMedia(constraints)
+        const media = await Media.getSelectedMedia()
         State.media[State.username] = media
         wire({kind: 'peerInfo', value: {type: 'request'}})
         m.redraw()
@@ -230,7 +239,9 @@ const Media = {
             return m('.media',
                 m('button', {onclick: Media.turnOn}, 'turn on'),
                 m('select#media-source',
-                    Object.keys(Media.videoOptions).map(description => m('option', description)),
+                    m('option', 'camera'),
+                    m('option', 'screen'),
+                    m('option', 'none'),
                 ),
                 m('label', m('input#mute-check', {type: 'checkbox'}), 'mute'),
             )