| const ScreenShare = { | |||||
| isOn: false, | |||||
| start() { | |||||
| const screen = document.querySelector('video.screen') | |||||
| navigator.mediaDevices.getDisplayMedia() | |||||
| .then(s => {screen.srcObject = s}) | |||||
| .catch(e => console.error(e)) | |||||
| }, | |||||
| toggle() { | |||||
| ScreenShare.isOn = !ScreenShare.isOn | |||||
| ScreenShare.start() | |||||
| }, | |||||
| view() { | |||||
| const style = { | |||||
| width: '80%', | |||||
| height: '80%', | |||||
| } | |||||
| return m('video.screen[playsinline][autoplay]', {style}) | |||||
| }, | |||||
| } |
| <script src="/apps/streams.js"></script> | <script src="/apps/streams.js"></script> | ||||
| <script src="/apps/chat.js"></script> | <script src="/apps/chat.js"></script> | ||||
| <script src="/apps/volume.js"></script> | <script src="/apps/volume.js"></script> | ||||
| <!-- <script src="/apps/screen.js"></script> --> | |||||
| <script src="/pico.js" defer></script> | <script src="/pico.js" defer></script> | ||||
| </head> | </head> | ||||
| <body style="margin: 0; padding: 0;"> | <body style="margin: 0; padding: 0;"> |
| m(VideoConfig), | m(VideoConfig), | ||||
| m(ChatConfig), | m(ChatConfig), | ||||
| m('button', {onclick: VolumeMap.toggle}, 'volume'), | m('button', {onclick: VolumeMap.toggle}, 'volume'), | ||||
| // m('button', {onclick: ScreenShare.toggle}, 'screen'), | |||||
| ] : [ | ] : [ | ||||
| m('form.login', | m('form.login', | ||||
| {onsubmit: Base.sendLogin}, | {onsubmit: Base.sendLogin}, | ||||
| m(StreamContainer, {key: 'lolo'}), | m(StreamContainer, {key: 'lolo'}), | ||||
| m(Shadow, {key: 'chat-shadow', app: Chat}), | m(Shadow, {key: 'chat-shadow', app: Chat}), | ||||
| m(Shadow, {key: 'map-shadow', app: VolumeMap}), | m(Shadow, {key: 'map-shadow', app: VolumeMap}), | ||||
| // m(Shadow, {key: 'screen-shadow', app: ScreenShare}), | |||||
| ] : m(Settings), | ] : m(Settings), | ||||
| ) | ) | ||||
| }, | }, |