-
-
-
-
+
@@ -125,16 +127,16 @@
-
+
-
+
-
+
-
+
diff --git a/web/js/api/api.js b/web/js/api/api.js
index bbb21318..20de8312 100644
--- a/web/js/api/api.js
+++ b/web/js/api/api.js
@@ -21,6 +21,8 @@ const api = (() => {
GAME_RECORDING: 110,
GET_WORKER_LIST: 111,
GAME_ERROR_NO_FREE_SLOTS: 112,
+
+ APP_VIDEO_CHANGE: 150,
});
const packet = (type, payload, id) => {
@@ -31,18 +33,21 @@ const api = (() => {
socket.send(packet);
};
+ const decodeBytes = (b) => String.fromCharCode.apply(null, new Uint8Array(b))
+
return Object.freeze({
endpoint: endpoints,
+ decode: (b) => JSON.parse(decodeBytes(b)),
server:
- Object.freeze({
+ {
initWebrtc: () => packet(endpoints.INIT_WEBRTC),
sendIceCandidate: (candidate) => packet(endpoints.ICE_CANDIDATE, btoa(JSON.stringify(candidate))),
sendSdp: (sdp) => packet(endpoints.ANSWER, btoa(JSON.stringify(sdp))),
latencyCheck: (id, list) => packet(endpoints.LATENCY_CHECK, list, id),
getWorkerList: () => packet(endpoints.GET_WORKER_LIST),
- }),
+ },
game:
- Object.freeze({
+ {
load: () => packet(endpoints.GAME_LOAD),
save: () => packet(endpoints.GAME_SAVE),
setPlayerIndex: (i) => packet(endpoints.GAME_SET_PLAYER_INDEX, i),
@@ -60,6 +65,6 @@ const api = (() => {
user: userName,
}),
quit: (roomId) => packet(endpoints.GAME_QUIT, {room_id: roomId}),
- })
+ }
})
})(socket);
diff --git a/web/js/controller.js b/web/js/controller.js
index 5ae5443c..edd0e61e 100644
--- a/web/js/controller.js
+++ b/web/js/controller.js
@@ -153,8 +153,8 @@
const saveGame = utils.debounce(() => api.game.save(), 1000);
const loadGame = utils.debounce(() => api.game.load(), 1000);
- const onMessage = (message) => {
- const {id, t, p: payload} = message;
+ const onMessage = (m) => {
+ const {id, t, p: payload} = m;
switch (t) {
case api.endpoint.INIT:
event.pub(WEBRTC_NEW_CONNECTION, payload);
@@ -166,7 +166,10 @@
event.pub(WEBRTC_ICE_CANDIDATE_RECEIVED, {candidate: payload});
break;
case api.endpoint.GAME_START:
- event.pub(GAME_ROOM_AVAILABLE, {roomId: payload});
+ if (payload.av) {
+ event.pub(APP_VIDEO_CHANGED, payload.av)
+ }
+ event.pub(GAME_ROOM_AVAILABLE, {roomId: payload.roomId});
break;
case api.endpoint.GAME_SAVE:
event.pub(GAME_SAVED);
@@ -189,6 +192,9 @@
case api.endpoint.GAME_ERROR_NO_FREE_SLOTS:
event.pub(GAME_ERROR_NO_FREE_SLOTS);
break;
+ case api.endpoint.APP_VIDEO_CHANGE:
+ event.pub(APP_VIDEO_CHANGED, {...payload})
+ break;
}
}
@@ -429,6 +435,7 @@
event.sub(GAME_ERROR_NO_FREE_SLOTS, () => message.show("No free slots :(", 2500));
event.sub(WEBRTC_NEW_CONNECTION, (data) => {
workerManager.whoami(data.wid);
+ webrtc.onData = (x) => onMessage(api.decode(x.data))
webrtc.start(data.ice);
api.server.initWebrtc()
gameList.set(data.games);
@@ -438,7 +445,6 @@
event.sub(WEBRTC_SDP_OFFER, (data) => webrtc.setRemoteDescription(data.sdp, stream.video.el()));
event.sub(WEBRTC_ICE_CANDIDATE_RECEIVED, (data) => webrtc.addCandidate(data.candidate));
event.sub(WEBRTC_ICE_CANDIDATES_FLUSH, () => webrtc.flushCandidates());
- // event.sub(MEDIA_STREAM_READY, () => rtcp.start());
event.sub(WEBRTC_CONNECTION_READY, onConnectionReady);
event.sub(WEBRTC_CONNECTION_CLOSED, () => {
input.poll.disable();
diff --git a/web/js/event/event.js b/web/js/event/event.js
index 9ad45a4b..3c412d20 100644
--- a/web/js/event/event.js
+++ b/web/js/event/event.js
@@ -101,3 +101,5 @@ const SETTINGS_CLOSED = 'settingsClosed';
const RECORDING_TOGGLED = 'recordingToggle'
const RECORDING_STATUS_CHANGED = 'recordingStatusChanged'
+
+const APP_VIDEO_CHANGED = 'appVideoChanged'
diff --git a/web/js/network/webrtc.js b/web/js/network/webrtc.js
index 99c5432a..8d72c8fd 100644
--- a/web/js/network/webrtc.js
+++ b/web/js/network/webrtc.js
@@ -12,16 +12,16 @@
*/
const webrtc = (() => {
let connection;
- let inputChannel;
+ let dataChannel;
let mediaStream;
- let candidates = Array();
+ let candidates = [];
let isAnswered = false;
let isFlushing = false;
let connected = false;
let inputReady = false;
- let onMessage;
+ let onData;
const start = (iceservers) => {
log.info('[rtc] <- ICE servers', iceservers);
@@ -31,16 +31,16 @@ const webrtc = (() => {
connection.ondatachannel = e => {
log.debug('[rtc] ondatachannel', e.channel.label)
- inputChannel = e.channel;
- inputChannel.onopen = () => {
+ dataChannel = e.channel;
+ dataChannel.onopen = () => {
log.info('[rtc] the input channel has been opened');
inputReady = true;
event.pub(WEBRTC_CONNECTION_READY)
};
- if (onMessage) {
- inputChannel.onmessage = onMessage;
+ if (onData) {
+ dataChannel.onmessage = onData;
}
- inputChannel.onclose = () => log.info('[rtc] the input channel has been closed');
+ dataChannel.onclose = () => log.info('[rtc] the input channel has been closed');
}
connection.oniceconnectionstatechange = ice.onIceConnectionStateChange;
connection.onicegatheringstatechange = ice.onIceStateChange;
@@ -62,9 +62,9 @@ const webrtc = (() => {
connection.close();
connection = null;
}
- if (inputChannel) {
- inputChannel.close();
- inputChannel = null;
+ if (dataChannel) {
+ dataChannel.close();
+ dataChannel = null;
}
candidates = Array();
log.info('[rtc] WebRTC has been closed');
@@ -173,10 +173,13 @@ const webrtc = (() => {
// return false
// }
// },
- input: (data) => inputChannel.send(data),
+ input: (data) => dataChannel.send(data),
isConnected: () => connected,
isInputReady: () => inputReady,
getConnection: () => connection,
stop,
+ set onData(fn) {
+ onData = fn
+ }
}
})(event, log);
diff --git a/web/js/stream/stream.js b/web/js/stream/stream.js
index 64e65a16..9ab3dd49 100644
--- a/web/js/stream/stream.js
+++ b/web/js/stream/stream.js
@@ -16,6 +16,9 @@ const stream = (() => {
state = {
screen: screen,
timerId: null,
+ w: 0,
+ h: 0,
+ aspect: 4/3
};
const mute = (mute) => screen.muted = mute
@@ -82,6 +85,25 @@ const stream = (() => {
useCustomScreen(options.mirrorMode === 'mirror');
}, false);
+ screen.addEventListener('fullscreenchange', () => {
+ const fullscreen = document.fullscreenElement
+
+
+ screen.style.padding = '0'
+ if (fullscreen) {
+ const dw = (window.innerWidth - fullscreen.clientHeight * state.aspect) / 2
+ screen.style.padding = `0 ${dw}px`
+ // chrome bug
+ setTimeout(() => {
+ const dw = (window.innerHeight - fullscreen.clientHeight * state.aspect) / 2
+ screen.style.padding = `0 ${dw}px`
+ }, 1)
+ }
+
+ // !to flipped
+
+ })
+
const useCustomScreen = (use) => {
if (use) {
if (screen.paused || screen.ended) return;
@@ -95,13 +117,15 @@ const stream = (() => {
canvas.setAttribute('width', screen.videoWidth);
canvas.setAttribute('height', screen.videoHeight);
canvas.style['image-rendering'] = 'pixelated';
+ canvas.style.width = '100%'
+ canvas.style.height = '100%'
canvas.classList.add('game-screen');
// stretch depending on the video orientation
// portrait -- vertically, landscape -- horizontally
const isPortrait = screen.videoWidth < screen.videoHeight;
canvas.style.width = isPortrait ? 'auto' : canvas.style.width;
- canvas.style.height = isPortrait ? canvas.style.height : 'auto';
+ // canvas.style.height = isPortrait ? canvas.style.height : 'auto';
let surface = canvas.getContext('2d');
screen.parentNode.insertBefore(canvas, screen.nextSibling);
@@ -135,6 +159,27 @@ const stream = (() => {
}
});
+
+ const fit = 'contain'
+
+ event.sub(APP_VIDEO_CHANGED, (payload) => {
+ const {w, h, a} = payload
+
+ state.aspect = a
+
+ const a2 = w / h
+
+ const attr = a.toFixed(6) !== a2.toFixed(6) ? 'fill' : fit
+ state.screen.style['object-fit'] = attr
+
+ state.h = payload.h
+ state.w = Math.floor(payload.h * payload.a)
+ // payload.a > 0 && (state.aspect = payload.a)
+ state.screen.setAttribute('width', payload.w)
+ state.screen.setAttribute('height', payload.h)
+ state.screen.style.aspectRatio = state.aspect
+ })
+
return {
audio: {mute},
video: {toggleFullscreen, el: getVideoEl},
@@ -144,4 +189,4 @@ const stream = (() => {
init
}
}
-)(env, gui, log, opts, settings);
+)(env, event, gui, log, opts, settings);