addEventListener('rpc-new', ({detail}) => { const {uid, kind} = detail.value if(kind === 'screen') { const sender = ScreenShare.isSource && ScreenShare.stream const receiver = !ScreenShare.isSource && ScreenShare.stream signal({kind: 'rpc-setup', value: {uid, sender, receiver}}) } }) const ScreenShareConfig = { view() { if (ScreenShare.isOff) { const onclick = ScreenShare.getStream return m('button', {onclick}, 'share screen') } else { const onclick = () => wire({kind: 'screen-stop'}) return m('button', {onclick}, 'stop screen') } } } const ScreenShare = { isSource: false, stream: new MediaStream(), get isOff() { return ScreenShare.stream.getTracks().length === 0 }, async getStream() { await navigator.mediaDevices .getDisplayMedia({}) .then(stream => stream .getTracks() .forEach(tr => ScreenShare.stream.addTrack(tr, stream)) ) ScreenShare.isSource = true State.others.forEach(target => { signal({kind: 'rpc-needed', value: {kind: 'screen', target}}) }) m.redraw() }, async stopStream() { ScreenShare.stream.getTracks().forEach(tr => tr.stop()) ScreenShare.stream = new MediaStream() ScreenShare.isSource = false m.redraw() }, view() { return ScreenShare.isOff ? [] : m('video.screen[playsinline][autoplay]', { oncreate: ({dom}) => { dom.srcObject = ScreenShare.stream }, onupdate: ({dom}) => { if(dom.srcObject !== ScreenShare.stream) { dom.srcObject = ScreenShare.stream } }, }) }, } addEventListener('screen-stop', () => { ScreenShare.stopStream() }) addEventListener('join', ({detail: {value: user}}) => { if(ScreenShare.isSource) { signal({kind: 'rpc-needed', value: {kind: 'screen', target: user}}) } }) addEventListener('load', () => { doNotLog.add('screen-stop') Headers.push([ScreenShareConfig]) Apps.push([ScreenShare, {key: 'screen-share-container'}]) })