| noiseSuppresion: true, | noiseSuppresion: true, | ||||
| echoCancellation: 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 | 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 () => { | turnOn: async () => { | ||||
| const constraints = Media.getSelectedConstraints() | |||||
| const media = await navigator.mediaDevices.getUserMedia(constraints) | |||||
| const media = await Media.getSelectedMedia() | |||||
| State.media[State.username] = media | State.media[State.username] = media | ||||
| wire({kind: 'peerInfo', value: {type: 'request'}}) | wire({kind: 'peerInfo', value: {type: 'request'}}) | ||||
| m.redraw() | m.redraw() | ||||
| return m('.media', | return m('.media', | ||||
| m('button', {onclick: Media.turnOn}, 'turn on'), | m('button', {onclick: Media.turnOn}, 'turn on'), | ||||
| m('select#media-source', | 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'), | m('label', m('input#mute-check', {type: 'checkbox'}), 'mute'), | ||||
| ) | ) |