mirror of
https://github.com/giongto35/cloud-game.git
synced 2026-07-18 00:55:40 +00:00
199 lines
4 KiB
HTML
199 lines
4 KiB
HTML
<html>
|
|
|
|
<style>
|
|
textarea {
|
|
width: 60%;
|
|
height: 50px;
|
|
}
|
|
</style>
|
|
|
|
<div id="remoteVideos" ></div> <br />
|
|
<div>
|
|
Use Up, Down, Left, Right to Move <br />
|
|
Space to jump <br />
|
|
Ctrl to sprint <br />
|
|
Enter to select in menu <br />
|
|
|
|
Fullscreen media for better gaming experience<br />
|
|
</div>
|
|
|
|
<button id="playGame" onclick="window.startSession()" disabled> Play Mario </button>
|
|
<div id="div"></div>
|
|
|
|
<div>
|
|
Refresh to retry
|
|
</div>
|
|
<script>
|
|
|
|
var localSessionDescription = ""
|
|
var remoteSessionDescription = ""
|
|
|
|
function postSession(session) {
|
|
if (session == "") {
|
|
return;
|
|
}
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
remoteSessionDescription = this.responseText;
|
|
document.getElementById('playGame').disabled = false;
|
|
}
|
|
};
|
|
xhttp.open("POST", "/session", true);
|
|
xhttp.setRequestHeader("Content-type", "text/plain");
|
|
xhttp.send(session);
|
|
|
|
}
|
|
|
|
let pc = new RTCPeerConnection({
|
|
iceServers: [
|
|
{
|
|
urls: 'stun:stun.l.google.com:19302'
|
|
}
|
|
]
|
|
})
|
|
let log = msg => {
|
|
document.getElementById('div').innerHTML += msg + '<br>'
|
|
}
|
|
|
|
|
|
const dataChannelOptions = {
|
|
ordered: false, // do not guarantee order
|
|
maxPacketLifeTime: 3000, // in milliseconds
|
|
};
|
|
|
|
let inputChannel = pc.createDataChannel('foo')
|
|
inputChannel.onclose = () => console.log('inputChannel has closed')
|
|
inputChannel.onopen = () => console.log('inputChannel has opened')
|
|
inputChannel.onmessage = e => log(`Message from DataChannel '${inputChannel.label}' payload '${e.data}'`)
|
|
|
|
pc.ontrack = function (event) {
|
|
var el = document.createElement(event.track.kind)
|
|
el.srcObject = event.streams[0]
|
|
el.autoplay = true
|
|
el.controls = true
|
|
|
|
document.getElementById('remoteVideos').appendChild(el)
|
|
}
|
|
|
|
pc.oniceconnectionstatechange = e => log(pc.iceConnectionState)
|
|
pc.onicecandidate = event => {
|
|
if (event.candidate === null) {
|
|
var session = btoa(JSON.stringify(pc.localDescription));
|
|
localSessionDescription = session;
|
|
postSession(session)
|
|
}
|
|
}
|
|
|
|
pc.createOffer({offerToReceiveVideo: true, offerToReceiveAudio: true}).then(d => pc.setLocalDescription(d)).catch(log)
|
|
|
|
|
|
keyState = {
|
|
// controllers
|
|
a: false,
|
|
b: false,
|
|
start: false,
|
|
select: false,
|
|
|
|
// navigators
|
|
up: false,
|
|
down: false,
|
|
left: false,
|
|
right: false,
|
|
}
|
|
|
|
keyMap = {
|
|
37: "left",
|
|
38: "up",
|
|
39: "right",
|
|
40: "down",
|
|
|
|
90: "a",
|
|
88: "b",
|
|
67: "start",
|
|
86: "select",
|
|
}
|
|
|
|
INPUT_FPS = 100;
|
|
INPUT_STATE_PACKET = 10;
|
|
|
|
stateUnchange = true;
|
|
unchangePacket = INPUT_STATE_PACKET;
|
|
|
|
function setState(e, bo) {
|
|
if (e.keyCode in keyMap) {
|
|
keyState[keyMap[e.keyCode]] = bo;
|
|
stateUnchange = false;
|
|
unchangePacket = INPUT_STATE_PACKET;
|
|
}
|
|
}
|
|
|
|
document.body.onkeydown = function(e){
|
|
setState(e, true);
|
|
};
|
|
|
|
document.body.onkeyup = function(e){
|
|
setState(e, false);
|
|
};
|
|
|
|
|
|
|
|
window.startSession = () => {
|
|
let sd = remoteSessionDescription
|
|
if (sd === '') {
|
|
return alert('Session Description must not be empty')
|
|
}
|
|
|
|
try {
|
|
pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(atob(sd))),
|
|
|
|
// success
|
|
() => {
|
|
|
|
setInterval(() => {
|
|
// prepare key
|
|
/*
|
|
const (
|
|
ButtonA = iota
|
|
ButtonB
|
|
ButtonSelect
|
|
ButtonStart
|
|
ButtonUp
|
|
ButtonDown
|
|
ButtonLeft
|
|
ButtonRight
|
|
)
|
|
*/
|
|
|
|
if (stateUnchange || unchangePacket > 0) {
|
|
st = "";
|
|
["a", "b", "select", "start", "up", "down", "left", "right"].forEach(elem => {
|
|
st += keyState[elem]?1:0;
|
|
});
|
|
ss = parseInt(st, 2);
|
|
console.log(`Key state string: ${st} ==> ${ss}`);
|
|
|
|
// send
|
|
inputChannel.send(ss);
|
|
|
|
stateUnchange = false;
|
|
unchangePacket--;
|
|
}
|
|
|
|
}, 1000 / INPUT_FPS)
|
|
|
|
|
|
},
|
|
|
|
// error callback
|
|
(exp) => {
|
|
console.log("setRemoteDescription failed, we are doomed");
|
|
console.log(exp);
|
|
});
|
|
} catch (e) {
|
|
alert(e);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</html>
|