Commit fae475b2 authored by Henrik Tramberend's avatar Henrik Tramberend
Browse files

Display actual capture sizes in the panel

- Let the browser choose size by default
- Bypass Reveal for explain configuration
parent 03fd192a
......@@ -81,6 +81,8 @@ div#record-panel {
flex-flow: column-reverse nowrap;
justify-content: center;
font-family: sans-serif;
transform: translate(-50%, var(--offset));
opacity: 0.5;
transition: transform 0.3s ease-in-out 0.5s, opacity 0.3s linear 0.5s,
......@@ -189,6 +191,11 @@ button.stop-button {
flex-grow: 1;
}
span.capture-size {
font-size: 80%;
padding-right: 2em;
}
#explain-panel {
position: fixed;
top: 0;
......
......@@ -17,6 +17,7 @@ let ExplainPlugin = (function () {
let volumeMeter;
let micSelect, camSelect;
let micIndicator, camIndicator;
let screenCaptureSize, cameraCaptureSize;
// playback stuff
let explainVideoUrl, explainTimesUrl, explainTimes;
......@@ -265,11 +266,10 @@ let ExplainPlugin = (function () {
}
async function captureScreen() {
const config = Reveal.getConfig().explain;
const recWidth =
config && config.recWidth ? config.recWidth : Reveal.getConfig().width;
const recHeight =
config && config.recHeight ? config.recHeight : Reveal.getConfig().height;
// const config = Reveal.getConfig().explain;
const config = Decker.meta.explain;
const recWidth = config && config.recWidth ? config.recWidth : undefined;
const recHeight = config && config.recHeight ? config.recHeight : undefined;
// get display stream
console.log("get display stream (" + recWidth + "x" + recHeight + ")");
......@@ -284,6 +284,10 @@ let ExplainPlugin = (function () {
audio: true,
});
let video = desktopStream.getVideoTracks()[0].getSettings();
console.log("display stream size: ", video.width, video.height);
screenCaptureSize.textContent = `${video.width}x${video.height}`;
if (desktopStream.getAudioTracks().length > 0) {
let label = desktopStream.getAudioTracks()[0].label;
desktopIndicator.title = label;
......@@ -337,9 +341,10 @@ let ExplainPlugin = (function () {
}
async function captureCamera() {
const config = Reveal.getConfig().explain;
const camWidth = config && config.camWidth ? config.camWidth : 1280;
const camHeight = config && config.camHeight ? config.camHeight : 720;
// const config = Reveal.getConfig().explain;
const config = Decker.meta.explain;
const camWidth = config && config.camWidth ? config.camWidth : undefined;
const camHeight = config && config.camHeight ? config.camHeight : undefined;
console.log("get camera stream (" + camWidth + "x" + camHeight + ")");
console.log("cam id: " + camSelect.value);
......@@ -374,6 +379,9 @@ let ExplainPlugin = (function () {
} else {
cameraVideo.srcObject = cameraStream;
}
let camera = cameraStream.getVideoTracks()[0].getSettings();
console.log("camera stream size: ", camera.width, camera.height);
cameraCaptureSize.textContent = `${camera.width}x${camera.height}`;
} else {
camIndicator.removeAttribute("title");
}
......@@ -868,6 +876,38 @@ let ExplainPlugin = (function () {
});
camSelect.onchange = captureCamera;
row = createElement({
type: "div",
classes: "controls-row",
parent: recordPanel,
});
createElement({
type: "i",
classes: "indicator fas fa-camera",
title: "Camera capture size",
parent: row,
});
cameraCaptureSize = createElement({
type: "span",
classes: "capture-size",
parent: row,
});
createElement({
type: "i",
classes: "indicator fas fa-tv",
title: "Screen capture size",
parent: row,
});
screenCaptureSize = createElement({
type: "span",
classes: "capture-size",
parent: row,
});
// collect list of cameras and microphones
try {
const devices = await navigator.mediaDevices.enumerateDevices();
......@@ -1152,7 +1192,8 @@ let ExplainPlugin = (function () {
}
async function setupPlayer() {
let config = Reveal.getConfig().explain;
// const config = Reveal.getConfig().explain;
const config = Decker.meta.explain;
explainVideoUrl = config && config.video ? config.video : deckVideoUrl();
explainTimesUrl = config && config.times ? config.times : deckTimesUrl();
......@@ -1237,8 +1278,8 @@ let ExplainPlugin = (function () {
});
// Try to connect to an existing video.
uiState.transition("setupPlayer");
addReloadInhibitor(() =>
!uiState.in("RECORDER_READY", "RECORDER_PAUSED", "RECORDING")
addReloadInhibitor(
() => !uiState.in("RECORDER_READY", "RECORDER_PAUSED", "RECORDING")
);
},
};
......
......@@ -601,7 +601,6 @@ $else$
$endif$
},
// setup charts
chart: {
defaults: {
......@@ -634,26 +633,11 @@ $if(thebelab.enable)$
thebelab: $thebelab.enable$,
$endif$
$if(quizServer)$
// Mario's multiple-choice quiz
quiz: { server: "$quizServer$" },
$endif$
$if(explain)$
explain: {
$if(explain.video)$ video: "$explain.video$", $endif$
$if(explain.times)$ times: "$explain.times$", $endif$
$if(explain.recWidth)$ recWidth: "$explain.recWidth$", $endif$
$if(explain.recHeight)$ recHeight: "$explain.recHeight$", $endif$
$if(explain.camWidth)$ camWidth: "$explain.camWidth$", $endif$
$if(explain.camHeight)$ camHeight: "$explain.camHeight$", $endif$
dummy: "dummy"
},
$endif$
// plugins
dependencies: [
{ src: String.raw`$decker-support-dir$/plugins/charts/Chart.js`},
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment