addEventListener('rpc-new', ({detail}) => { const {uid, kind} = detail.value if(kind === 'screen') { const sender = ScreenShare.isSelf && ScreenShare.stream const receiver = !ScreenShare.isSelf && ScreenShare.stream signal({kind: 'rpc-setup', value: {uid, sender, receiver}}) } }) const ScreenShareConfig = { view() { const start = async () => { await ScreenShare.getStream() wire({kind: 'screen-share-start'}) } const stop = () => wire({kind: 'screen-share-stop'}) if (ScreenShare.source === null) { return m('button', {onclick: start}, 'start screen sharing') } else if (ScreenShare.isSelf) { return m('button', {onclick: stop}, 'stop screen sharing') } else { return m('button[disabled]', `${ScreenShare.source} is screen sharing`) } } } const ScreenShare = { source: null, stream: new MediaStream(), get isSelf() { return ScreenShare.source === State.username }, async getStream() { const stream = await navigator.mediaDevices.getDisplayMedia({}) stream.getTracks() .forEach(tr => ScreenShare.stream.addTrack(tr, stream)) }, async stopStream() { ScreenShare.stream.getTracks() .forEach(tr => tr.stop()) ScreenShare.stream = new MediaStream() }, view() { const style = { overflow: 'scroll', backgroundColor: 'gray', color: 'white', fontFamily: 'monospace', position: 'relative', } return m('.screen-share', {style}, ScreenShare.isSelf ? m('span', 'You are sharing your screen') : ScreenShare.source ? m('video[playsinline][autoplay]', {srcObject: ScreenShare.stream}) : [], ) }, } function sendScreen(target, stream) { signal({kind: 'screen-start', value: {target, stream}}) } addEventListener('screen-share-start', async ({detail: {source}}) => { const isNew = ScreenShare.source === null ScreenShare.source = source if(isNew && ScreenShare.isSelf) { State.others.forEach(user => sendScreen(user, ScreenShare.stream)) } }) addEventListener('screen-share-stop', () => { ScreenShare.stopStream() ScreenShare.source = null }) addEventListener('join', ({detail: {value: user}}) => { if(ScreenShare.isSelf) { wire({kind: 'screen-share-start', target: user}) sendScreen(user, ScreenShare.stream) } }) addEventListener('load', () => { doNotLog.add('screen-share-start') doNotLog.add('screen-share-stop') Headers.push([ScreenShareConfig]) Apps.push([ScreenShare, {key: 'screen-share-container'}]) })