pico.chat/apps/streams.js

const VideoConfig = Object.seal({
    videoOn: true,
    audioOn: true,
    get video() {
        return VideoConfig.videoOn
        && params.get('v') !== '0'
        && {width: {ideal: 320}, facingMode: 'user', frameRate: 26}
    },
    get audio() {
        return VideoConfig.audioOn
        && params.get('a') !== '0'
    },
    toggle: (property) => () => {
        VideoConfig[property] = !VideoConfig[property]
        updateSelfVideo()
    },
    view() {
        return [
            m('button', {onclick: VideoConfig.toggle('videoOn')}, 'video'),
            m('button', {onclick: VideoConfig.toggle('audioOn')}, 'audio'),
        ]
    }
})
const updateSelfVideo = async () => {
    const video = document.querySelector('video.self')

    video.srcObject.getTracks().forEach(track => {
        track.stop()
        video.srcObject.removeTrack(track)
        delete track
    })

    if(VideoConfig.videoOn || VideoConfig.audioOn) {
        await navigator.mediaDevices
        .getUserMedia(VideoConfig)
        .then(s => s.getTracks().forEach(t => video.srcObject.addTrack(t)))
        .catch(e => console.error(e))
    }
    video.srcObject = video.srcObject  // safari

    wire({kind: 'peerInfo', value: {type: 'request'}})
}
const updateOtherVideo = (target, dom) => {
    dom.srcObject = new MediaStream()
    let rpc = null

    const rpcConfig = {iceServers: [{
        urls: ['stun:stun.pico.chat:5349', 'turn:turn.pico.chat:5349'],
        username: 'roderic',
        credential: 'tomodachi',
    }]}

    const stopRpc = () => {
        rpc && rpc.close()
        dom.srcObject.getTracks().forEach(track => {
            track.stop()
            dom.srcObject.removeTrack(track)
            delete track
        })
    }

    const resetRpc = () => {
        stopRpc()
        rpc = new RTCPeerConnection(rpcConfig)
        document.querySelector('video.self').srcObject.getTracks()
            .forEach(t => rpc.addTrack(t))

        rpc.onicecandidate = ({candidate}) => {
            if(candidate && candidate.candidate) {
                const value = {type: 'candidate', candidate}
                wire({kind: 'peerInfo', value, target})
            }
        }
        rpc.ontrack = ({track}) => {
            dom.srcObject.addTrack(track)
            dom.srcObject = dom.srcObject
        }
    }

    dom.listener = async ({detail: {source, value}}) => {
        if(source !== target) {
            return
        }
        console.log(source, value.type)
        if(value.type === 'request') {
            resetRpc()
            const localOffer = await rpc.createOffer()
            await rpc.setLocalDescription(localOffer)
            wire({kind: 'peerInfo', value: localOffer, target})
        }
        else if(value.type === 'offer') {
            resetRpc()
            const remoteOffer = new RTCSessionDescription(value)
            await rpc.setRemoteDescription(remoteOffer)
            const localAnswer = await rpc.createAnswer()
            await rpc.setLocalDescription(localAnswer)
            wire({kind: 'peerInfo', value: localAnswer, target})
        }
        else if(value.type === 'answer') {
            const remoteAnswer = new RTCSessionDescription(value)
            await rpc.setRemoteDescription(remoteAnswer)
        }
        else if(value.type === 'candidate') {
            const candidate = new RTCIceCandidate(value.candidate)
            await rpc.addIceCandidate(candidate)
        }
        else if(value.type === 'stop') {
            stopRpc()
        }
    }
    addEventListener('peerInfo', dom.listener)
}
const Video = {
    setUp: (username) => ({dom}) => {
        dom.srcObject = new MediaStream()
        if(username === State.username) {
            dom.classList.add('self')
            dom.muted = true
            updateSelfVideo()
        }
        else {
            updateOtherVideo(username, dom)
        }
    },
    tearDown: (username) => ({dom}) => {
        removeEventListener('peerInfo', dom.listener)

        dom.srcObject.getTracks().forEach(track => {
            track.stop()
            dom.srcObject.removeTrack(track)
            delete track
        })
    },
    view({attrs: {username}}) {
        const styleOuter = {
            position: 'relative',
            display: 'block',
            backgroundColor: 'black',
            color: 'white',
            overflow: 'hidden',
        }
        const styleMeta = {
            position: 'absolute',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            height: '100%',
            width: '100%',
            fontFamily: 'monospace',
            fontSize: 'xxx-large',
        }
        const styleVideo = {
            objectFit: 'contain',
            width: '100%',
            height: '100%',
            transform: 'scaleX(-1)',
        }
        return m('.video-container', {style: styleOuter},
            m('.video-info', {style: styleMeta},
                m('.username', username),
            ),
            m('video[playsinline][autoplay]', {
                style: styleVideo,
                onclick: ({target: {style}}) => {
                    const level = style.objectFit === 'contain'
                    style.objectFit = ['contain', 'cover'][+level]
                },
                oncreate: this.setUp(username),
                onremove: this.tearDown(username),
            }),
        )
    },
}
const StreamContainer = {
    getColumns() {
        const n = State.online.length
        if(n > 2 * 2) return '1fr 1fr 1fr'
        if(n > 1 * 1) return '1fr 1fr'
        return '1fr'
    },
    getRows() {
        const n = State.online.length
        if(n > 2 * 3) return '1fr 1fr 1fr'
        if(n > 1 * 2) return '1fr 1fr'
        return '1fr'
    },
    view() {
        const dims = [StreamContainer.getRows(), StreamContainer.getColumns()]
        if(innerHeight > innerWidth) dims.reverse()
        const style = {
            overflow: 'hidden',
            display: 'grid',
            padding: '1px',
            gridGap: '1px',
            gridTemplateRows: dims[0],
            gridTemplateColumns: dims[1],
        }
        return m('.videos', {style},
            State.online.map(username => m(Video, {key: username, username}))
        )
    },
}

const signalPeerStop = (username) => signal({kind: 'peerInfo', value: {type: 'stop'}, source: username})
addEventListener('pagehide', () => State.online.forEach(signalPeerStop))
addEventListener('logout', () => State.online.forEach(signalPeerStop))