host/frontend/gcastv2/webrtc/assets/js/receive.js

'use strict';

const receiveButton = document.getElementById('receiveButton');
receiveButton.addEventListener('click', onReceive);
const keyboardCaptureButton = document.getElementById('keyboardCaptureBtn');
keyboardCaptureButton.addEventListener('click', onKeyboardCaptureClick);

const deviceScreen = document.getElementById('deviceScreen');

deviceScreen.addEventListener("click", onInitialClick);

function onInitialClick(e) {
    // This stupid thing makes sure that we disable controls after the first click...
    // Why not just disable controls altogether you ask? Because then audio won't play
    // because these days user-interaction is required to enable audio playback...
    console.log("onInitialClick");

    deviceScreen.controls = false;
    deviceScreen.removeEventListener("click", onInitialClick);
}

let pc1;
let pc2;

let dataChannel;

let ws;

let offerResolve;
let iceCandidateResolve;

let videoStream;

let mouseIsDown = false;

const is_chrome = navigator.userAgent.indexOf("Chrome") !== -1;

function handleDataChannelStatusChange(event) {
    console.log('handleDataChannelStatusChange state=' + dataChannel.readyState);

    if (dataChannel.readyState == "open") {
        dataChannel.send("Hello, world!");
    }
}

function handleDataChannelMessage(event) {
    console.log('handleDataChannelMessage data="' + event.data + '"');
}

function onKeyboardCaptureClick(e) {
    const selectedClass = 'selected';
    if (keyboardCaptureButton.classList.contains(selectedClass)) {
        stopKeyboardTracking();
        keyboardCaptureButton.classList.remove(selectedClass);
    } else {
        startKeyboardTracking();
        keyboardCaptureButton.classList.add(selectedClass);
    }
}

async function onReceive() {
    console.log('onReceive');
    receiveButton.disabled = true;

    init_logcat();

    const wsProtocol = (location.protocol == "http:") ? "ws:" : "wss:";

    ws = new WebSocket(wsProtocol + "//" + location.host + "/control");
    // temporarily disable audio to free ports in the server since it's only
    // producing silence anyways.
    var search = location.search + "&disable_audio=1";
    search = '?' + search.substr(1);

    ws.onopen = function() {
        console.log("onopen");
        ws.send('{\r\n'
            +     '"type": "greeting",\r\n'
            +     '"message": "Hello, world!",\r\n'
            +     '"path": "' + location.pathname + search + '"\r\n'
            +   '}');
    };
    ws.onmessage = function(e) {
        console.log("onmessage " + e.data);

        let data = JSON.parse(e.data);
        if (data.type == "hello") {
            kickoff();
        } else if (data.type == "offer" && offerResolve) {
            offerResolve(data.sdp);
            offerResolve = undefined;
        } else if (data.type == "ice-candidate" && iceCandidateResolve) {
            iceCandidateResolve(data);

            iceCandidateResolve = undefined;
        }
    };

    pc2 = new RTCPeerConnection();
    console.log('got pc2=' + pc2);

    pc2.addEventListener(
        'icecandidate', e => onIceCandidate(pc2, e));

    pc2.addEventListener(
        'iceconnectionstatechange', e => onIceStateChange(pc2, e));

    pc2.addEventListener(
        'connectionstatechange', e => {
        console.log("connection state = " + pc2.connectionState);
    });

    pc2.addEventListener('track', onGotRemoteStream);

    dataChannel = pc2.createDataChannel("data-channel");
    dataChannel.onopen = handleDataChannelStatusChange;
    dataChannel.onclose = handleDataChannelStatusChange;
    dataChannel.onmessage = handleDataChannelMessage;
}

async function kickoff() {
    console.log('createOffer start');

    try {
        var offer = await getWsOffer();
        await onCreateOfferSuccess(offer);
    } catch (e) {
        console.log('createOffer FAILED ');
    }
}

async function onCreateOfferSuccess(desc) {
    console.log(`Offer ${desc.sdp}`);

    try {
        pc2.setRemoteDescription(desc);
    } catch (e) {
        console.log('setRemoteDescription pc2 FAILED');
        return;
    }

    console.log('setRemoteDescription pc2 successful.');

    try {
        setWsLocalDescription(desc);
    } catch (e) {
        console.log('setLocalDescription pc1 FAILED');
        return;
    }

    console.log('setLocalDescription pc1 successful.');

    try {
        const answer = await pc2.createAnswer();

        await onCreateAnswerSuccess(answer);
    } catch (e) {
        console.log('createAnswer FAILED');
    }
}

function setWsRemoteDescription(desc) {
    ws.send('{\r\n'
        +     '"type": "set-remote-desc",\r\n'
        +     '"sdp": "' + desc.sdp + '"\r\n'
        +   '}');
}

function setWsLocalDescription(desc) {
    ws.send('{\r\n'
        +     '"type": "set-local-desc",\r\n'
        +     '"sdp": "' + desc.sdp + '"\r\n'
        +   '}');
}

async function getWsOffer() {
    const offerPromise = new Promise(function(resolve, reject) {
        offerResolve = resolve;
    });

    ws.send('{\r\n'
        +     '"type": "request-offer",\r\n'
        +     (is_chrome ? '"is_chrome": 1\r\n'
                         : '"is_chrome": 0\r\n')
        +   '}');

    const sdp = await offerPromise;

    return { type: "offer", sdp: sdp };
}

async function getWsIceCandidate(mid) {
    console.log("getWsIceCandidate (mid=" + mid + ")");

    const answerPromise = new Promise(function(resolve, reject) {
        iceCandidateResolve = resolve;
    });

    ws.send('{\r\n'
        +     '"type": "get-ice-candidate",\r\n'
        +     '"mid": ' + mid + ',\r\n'
        +   '}');

    const replyInfo = await answerPromise;

    console.log("got replyInfo '" + replyInfo + "'");

    if (replyInfo == undefined || replyInfo.candidate == undefined) {
        return null;
    }

    const replyCandidate = replyInfo.candidate;
    const mlineIndex = replyInfo.mlineIndex;

    let result;
    try {
        result = new RTCIceCandidate(
            {
                sdpMid: mid,
                sdpMLineIndex: mlineIndex,
                candidate: replyCandidate
            });
    }
    catch (e) {
        console.log("new RTCIceCandidate FAILED. " + e);
        return undefined;
    }

    console.log("got result " + result);

    return result;
}

async function addRemoteIceCandidate(mid) {
    const candidate = await getWsIceCandidate(mid);

    if (!candidate) {
        return false;
    }

    try {
        await pc2.addIceCandidate(candidate);
    } catch (e) {
        console.log("addIceCandidate pc2 FAILED w/ " + e);
        return false;
    }

    console.log("addIceCandidate pc2 successful. (mid="
        + mid + ", mlineIndex=" + candidate.sdpMLineIndex + ")");

    return true;
}

async function onCreateAnswerSuccess(desc) {
    console.log(`Answer ${desc.sdp}`);

    try {
        await pc2.setLocalDescription(desc);
    } catch (e) {
        console.log('setLocalDescription pc2 FAILED ' + e);
        return;
    }

    console.log('setLocalDescription pc2 successful.');

    try {
        setWsRemoteDescription(desc);
    } catch (e) {
        console.log('setRemoteDescription pc1 FAILED');
        return;
    }

    console.log('setRemoteDescription pc1 successful.');

    if (!await addRemoteIceCandidate(0)) {
        return;
    }
    await addRemoteIceCandidate(1);
    await addRemoteIceCandidate(2);
}

function getPcName(pc) {
    return ((pc == pc2) ? "pc2" : "pc1");
}

async function onIceCandidate(pc, e) {
    console.log(
        getPcName(pc)
        + ' onIceCandidate '
        + (e.candidate ? ('"' + e.candidate.candidate + '"') : '(null)')
        + " "
        + (e.candidate ? ('sdmMid: ' + e.candidate.sdpMid) : '(null)')
        + " "
        + (e.candidate ? ('sdpMLineIndex: ' + e.candidate.sdpMLineIndex) : '(null)'));

    if (!e.candidate) {
        return;
    }

    let other_pc = (pc == pc2) ? pc1 : pc2;

    if (other_pc) {
        try {
            await other_pc.addIceCandidate(e.candidate);
        } catch (e) {
            console.log('addIceCandidate FAILED ' + e);
            return;
        }

        console.log('addIceCandidate successful.');
    }
}

async function onIceStateChange(pc, e) {
    console.log(
        'onIceStateChange ' + getPcName(pc) + " '" + pc.iceConnectionState + "'");

    if (pc.iceConnectionState == "connected") {
        deviceScreen.srcObject = videoStream;

        startMouseTracking()
    } else if (pc.iceConnectionState == "disconnected") {
        stopMouseTracking()
    }
}

async function onGotRemoteStream(e) {
    console.log('onGotRemoteStream ' + e);

    const track = e.track;

    console.log('track = ' + track);
    console.log('track.kind = ' + track.kind);
    console.log('track.readyState = ' + track.readyState);
    console.log('track.enabled = ' + track.enabled);

    if (track.kind == "video") {
        videoStream = e.streams[0];
    }
}

function startMouseTracking() {
    if (window.PointerEvent) {
        deviceScreen.addEventListener("pointerdown", onStartDrag);
        deviceScreen.addEventListener("pointermove", onContinueDrag);
        deviceScreen.addEventListener("pointerup", onEndDrag);
    } else if (window.TouchEvent) {
        deviceScreen.addEventListener("touchstart", onStartDrag);
        deviceScreen.addEventListener("touchmove", onContinueDrag);
        deviceScreen.addEventListener("touchend", onEndDrag);
    } else if (window.MouseEvent) {
        deviceScreen.addEventListener("mousedown", onStartDrag);
        deviceScreen.addEventListener("mousemove", onContinueDrag);
        deviceScreen.addEventListener("mouseup", onEndDrag);
    }
}

function stopMouseTracking() {
    if (window.PointerEvent) {
        deviceScreen.removeEventListener("pointerdown", onStartDrag);
        deviceScreen.removeEventListener("pointermove", onContinueDrag);
        deviceScreen.removeEventListener("pointerup", onEndDrag);
    } else if (window.TouchEvent) {
        deviceScreen.removeEventListener("touchstart", onStartDrag);
        deviceScreen.removeEventListener("touchmove", onContinueDrag);
        deviceScreen.removeEventListener("touchend", onEndDrag);
    } else if (window.MouseEvent) {
        deviceScreen.removeEventListener("mousedown", onStartDrag);
        deviceScreen.removeEventListener("mousemove", onContinueDrag);
        deviceScreen.removeEventListener("mouseup", onEndDrag);
    }
}

function startKeyboardTracking() {
    document.addEventListener('keydown', onKeyEvent);
    document.addEventListener('keyup', onKeyEvent);
}

function stopKeyboardTracking() {
    document.removeEventListener('keydown', onKeyEvent);
    document.removeEventListener('keyup', onKeyEvent);
}

function onStartDrag(e) {
    e.preventDefault();

    // console.log("mousedown at " + e.pageX + " / " + e.pageY);
    mouseIsDown = true;

    sendMouseUpdate(true, e);
}

function onEndDrag(e) {
    e.preventDefault();

    // console.log("mouseup at " + e.pageX + " / " + e.pageY);
    mouseIsDown = false;

    sendMouseUpdate(false, e);
}

function onContinueDrag(e) {
    e.preventDefault();

    // console.log("mousemove at " + e.pageX + " / " + e.pageY + ", down=" + mouseIsDown);
    if (mouseIsDown) {
        sendMouseUpdate(true, e);
    }
}

function sendMouseUpdate(down, e) {
    var x = e.offsetX;
    var y = e.offsetY;

    const videoWidth = deviceScreen.videoWidth;
    const videoHeight = deviceScreen.videoHeight;
    const elementWidth = deviceScreen.width;
    const elementHeight = deviceScreen.height;

    // vh*ew > eh*vw? then scale h instead of w
    const scaleHeight = videoHeight * elementWidth > videoWidth * elementHeight;
    var elementScaling = 0, videoScaling = 0;
    if (scaleHeight) {
        elementScaling = elementHeight;
        videoScaling = videoHeight;
    } else {
        elementScaling = elementWidth;
        videoScaling = videoWidth;
    }

    // Substract the offset produced by the difference in aspect ratio if any.
    if (scaleHeight) {
        x -= (elementWidth - elementScaling * videoWidth / videoScaling) / 2;
    } else {
        y -= (elementHeight - elementScaling * videoHeight / videoScaling) / 2;
    }

    // Convert to coordinates relative to the video
    x = videoScaling * x / elementScaling;
    y = videoScaling * y / elementScaling;

    ws.send('{\r\n'
        +     '"type": "set-mouse-position",\r\n'
        +     '"down": ' + (down ? "1" : "0") + ',\r\n'
        +     '"x": ' + Math.trunc(x) + ',\r\n'
        +     '"y": ' + Math.trunc(y) + '\r\n'
        +   '}');
}

function onKeyEvent(e) {
    e.preventDefault();
    ws.send('{"type": "key-event","keycode": "'+e.code+'", "event_type": "'+e.type+'"}');
}