+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Fullscreen erzwingen für ein Projekt möglich? (/showthread.php?tid=2527)
Fullscreen erzwingen für ein Projekt möglich? - IchLerneGerne - 09.08.2023
Hallo in die Runde,
ich weiß, dass einige von euchich arbeite derzeit an einer Software für Wertungsrichter. Für die Anmeldung und Abgabe der Wertungen können sie auf Wunsch auch ihr eigenes mobiles Endgerät nutzen.
Sobald sich das Display ausschaltet und sich damit ein Ruhemodus aktiviert (also die Verbindung unterbrochen wird), wird der Nutzer ausgeloggt, um unerlaubten Zugriff zu vermeiden, wenn er beispielsweise in einer Pause mit seinem Smartphone unterwegs ist. Dies ist allerdings hinderlich, wenn sich das Gerät während der Übung ausschaltet.
Gibt es einen JS-Code, mit dem man (ähnlich wie beim Abspielen von Videos) das Ausschalten des Bildschirms verhindern kann? Bei Google habe ich leider nur JavaCodes für den Desktop oder Anleitungen für das Einstellen in den Geräten selbst gefunden.
Danke für eure Hilfe.
RE: Fullscreen erzwingen für ein Projekt möglich? - rzscout - 11.08.2023
Moin IchLerneGerne,
nein das ist nicht möglich. Aus Sicherheitsgründen kann man nur manuell auf Fulllscreen stellen.
Du kannst aber mit JavaScript abfragen ob der Nutzer im Fullscreen-Modus ist und ihm vorher anweisen das er in den Fullscreen-Modus gehen soll bevor es weiter geht.
Code:
document.fullscreenElementMithilfe dieser Eigenschaft wird ein true oder false ausgegeben ob der User im Fullsreen-Modus ist. Eine weitere Ergänzung wäre mit requestFullscreen den User anzufragen ob er in den Modus gehen möchte.
Viele Grüße
scoutrz
RE: Fullscreen erzwingen für ein Projekt möglich? - IchLerneGerne - 11.08.2023
Hallo rzscout,
danke wieder enmal für deine Hilfe. Ich habe es befürchtet, kann es aber verstehen. Dann werde ich bei der Abfrage bleiben, sie aber mit deinen Vorschlägen etwas verbessern und verschlanken. Ich werde beide mal testen und mich dann für die schönere Variante entscheiden.
Vielen lieben Dank und einen guten Start ins Wochenende
RE: Fullscreen erzwingen für ein Projekt möglich? - rzscout - 13.08.2023
Moin moin,
ich würde dir empfehlen mal zu überlegen ob es sich lohnt eine native Smartphone-App zu erstellen. Ich kann dir empfehlen mal Apache Cordova anzuschauen. Dies ermöglicht dir eine native App mithilfe von HTML, CSS und JavaScript zu erstellen und diese in eine native App umzuwandeln. Hier der Link -> https://cordova.apache.org/
Die native App kann besser gesteuert werden...
Viele Grüße
scoutrz
RE: Fullscreen erzwingen für ein Projekt möglich? - IchLerneGerne - 14.08.2023
Einen schönen Montag,
damit kenne ich mich so gar nicht aus, müsste mich erstmal belesen. Allerdings muss es möglich sein, das Programm von jedem möglichen Endgerät (Smartphone, Tablet, PC, zur Not auch Brieftaube), ohne dafür etwas herunterladen zu müssen. Daher ist eine typische App, wie sie mir geläufig ist, leider nicht möglich. Trotzdem werde ich mich mal belesen, weil ich für meinen eigenen Verein gern eine App hätte. Vielleicht ist das das Richtige.
Jetzt habe ich aber ein neues Problem in diesem Zusammenhang:
Der Vollbildmodus an sich klappt wie geplant, allerdings wird er mit dem automatischen Aufruf der nächsten Wertungsseite immer wieder sofort beendet. Das ist aber notwendig, da sonst die Wertungen nicht gespeichert werden können und die nächste nich aufgerufen werden kann.
Gibt es einen Zusatz im Script, mit dem der Modus bestehen bleibt, bis er aktiv vom Nutzer beendet wird bzw. bis die Seite es mit dem Logout vorgibt?
Auf den mobilen Endgeräten ist die Vollbild-Funktion je nach Hersteller, Modell und Browser-App leider nur sehr umständlich oder sogar gar nicht manuell einstellbar. Daher muss ich es für diese KampfrichterInnen über die Seite realisieren.
Grüße aus der Kopfzerbrech-Zentrale
RE: Fullscreen erzwingen für ein Projekt möglich? - AndreasB - 14.08.2023
Mit einer Hybriden App (Cordova, Capacitor, etc) hat man am Schluss einen App die man installieren muss. Jeweils eine für iOS und eine für Andriod, allerdings von der selben Code Base.
Außerdem funktioniert die App nicht auf Desktop Rechnern.
Überlege mal, ob eine PWA (https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/App) etwas für dich ist.
Dadurch ist es zwar nicht ausgeschlossen, dass man die "App" im Browser öffnet, Man kann aber die "App" als separaten link speichern, bei dem man das Browser UI deaktivieren kann.
RE: Fullscreen erzwingen für ein Projekt möglich? - IchLerneGerne - 21.08.2023
Hallo Andreas,
ich habe mal versucht, mich hierzu zu belesen und glaube, dass es in naher Zukunft außerhalb meiner Fähigkeiten ist. Zum Jahreswechsel muss es daher erstmal als reine Webseite gehen, bis ich weiß, was bei einer PWA auf mich zukommt.
Ich würde gern eine Frage nochmal wiederholen, die mir noch auf der Seele liegt:
Der Vollbildmodus an sich klappt wie geplant, allerdings wird er mit dem automatischen Aufruf der nächsten Wertungsseite immer wieder sofort beendet. Das ist aber notwendig, da sonst die Wertungen nicht gespeichert werden können und die nächste nich aufgerufen werden kann.
Gibt es einen Zusatz im Script, mit dem der Modus bestehen bleibt, bis er aktiv vom Nutzer beendet wird bzw. bis die Seite es mit dem Logout vorgibt?
Liebe Grüße in die Runde
RE: Fullscreen erzwingen für ein Projekt möglich? - Sempervivum - 24.08.2023
Hallo @IchLerneGerne
Erst mal eine Verständnisfrage:
In deinem ersten Posting fragst Du, wie Du verhindern kannst, dass das Gerät in den Ruhemodus geht.
Später jedoch fragst Du nach dem Vollbildmodus.
Zitat:Der Vollbildmodus an sich klappt wie geplantWie hast Du den denn aktiviert?
Was den Übergang in den Ruhemodus betrifft habe ich da ein wenig nach geforscht und folgende Möglichkeiten gefunden:
Eine App installieren, die einen Kiosk-Modus bereit stellt. Zufällig bin ich vor einigen Tagen auf Fully Kiosk gestoßen, habe es aber selbst noch nicht benutzt. Fully Kiosk bietet einen Modus "Keep screen on":
"https://www.fully-kiosk.com/en/"
Wäre allerdings ein wenig ein Overkill für die kleine Funktion "Keep screen on" und würde zusätzliches Handling bedeuten, da die Wertungsrichter den Kioskmodus aktivieren müssten.
https://stackoverflow.com/questions/11529247/in-html5-how-can-i-keep-an-android-device-s-screen-on
Lösungen hier:
Ein Mini-Video laufen lassen, das das Gerät wach hält.
Die Screen-Wake-Lock-API verwenden. Dies scheint mir die beste Lösung zu sein. Habe ich mit meinem Samsung A50 getestet und funktioniert einwandfrei. Auch wenn man auf eine andere Seite geht, sofern dort ebenfalls das Screen-Wake-Lock aktiviert ist.
RE: Fullscreen erzwingen für ein Projekt möglich? - IchLerneGerne - 27.08.2023
Hallo Sempervivum,
ich verstehe die Verwirrung und versuche nochmal, mein Ziel zu erklären.
Ich möchte eine Wertungsplattform bauen, die ohne die Installation einer App oder sonstiger Dinge ganz einfach von jedem erdenklichen Endgerät bedienbar ist. Der Hintergrund ist, dass diese Plattform im besten Fall überregional eingesetzt werden kann und so bedienerfreundlich ist, wie es nur geht. Das Kampfgericht muss lediglich eine Webseite öffnen, sich mit den richtigen Daten einloggen und loslegen. Dazu muss es auch kleinen Vereinen, die nicht über die nötige Technik verfügen, möglich sein, auch ihre privaten Geräte einzusetzen.
Daher möchte ich den Einsatz von Apps und das Erbitten, in den Einstellungen Dinge zu verändern, vermeiden. Einige KampfrichterInnen sind bereits im höheren Alter und für sie kann beides eine unangenehme Hürde sein, die sie von der Nutzung der Plattform abhalten kann.
Der Ruhemodus soll verhindert werden, damit die Geräte nicht während einer Übung ausgehen und sich im schlimmsten Fall (je nach Einstellung auf den Geräten) ausloggen. Das erneute Einloggen würde den Ablauf erheblich stören.
Der "erzwungene" Vollbildmodus soll sicherstellen, dass durch Fehlbedienung keine andere Seite aufgerufen oder etwas Anderes passieren kann, was ebenfalls Einfluss auf die Aufmerksamkeit der KampfrichterInnen haben kann.
Beide Funktionen sollen also Hand in Hand dafür sorgen, dass das Kampfgericht sich nicht weiter um das Gerät kümmern muss und nur seine Wertung eingeben braucht.
Die Aktivierung des Vollbildmodus habe ich mittels element.requestFullscreen hinbekommen. Bei der Weiterleitung zur nächsten Wertung schaltet sch dieser jedoch wieder aus. Daher war hier meine Frage, wie ch ihn dauerhaft erhalten kann.
Deine Lösung zum Ruhemodus mit dem Mini-Video finde ich interessant. Ich habe noch keine Ahnung, wie ich das nun wieder einbaue, aber das sollte hoffentlich auch für mich machbar sein.
Zudem wird es vermutlich das Einzige sein, was auf allen Geräten vom PC über Android, Mac und allem Anderen zum gleichen Ergebnis führt, denn meine Experimente mit der API haben immer irgendjemanden ausgeschlossen. Allerdings kann es auch sein, dass ich die Funktion beim Einbauen versaut habe, weshalb das Ergebnis nicht passte.
Wäre es für dich eventuell eine Option, mir deinen getesteten Code zukommen zu lassen, damit ich ihn mit meiner Version ableichen kann und auf allen Geräten, die mir zum Testen vorliegen, ausprobieren kann?
Und hast du eventuell auch den passenden Trick, wie ich den Vollbildmodus, der mit Javascript erzeugt wird, über alle Seiten hinweg beibehalten kann, bis er aktiv beendet wird?
Danke für deine Zeit und die aller Anderen auf diesem Weg
RE: Fullscreen erzwingen für ein Projekt möglich? - Sempervivum - 27.08.2023
Guten Morgen,
danke für diese Infos, das macht alles ein wenig klarer.
Ich war zunächst davon aus gegangen, dass es sich um ein Projekt in einem Verein handelt wo die Beteiligten instruiert und angeleitet werden können. Das ist natürlich nicht machbar, wenn das Ganze überregional eingesetzt werden soll.
Ich habe das ein wenig weiter untersucht. Leider unterstützt Firefox die Screen-Wake-Lock-API nicht. Der Trick mit dem Video funktioniert jedoch auch dort. Allerdings nicht mir dem kurzen Video von 1 Sekunde, das ich auf die Schnelle mit ffmpeg gemacht habe sondern nur mit einem "normalen".
Selbstverständlich gebe ich dir gern meinen Testcode:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Keep Device Alive</title>
<style>
video {
display: none;
}
</style>
</head>
<body>
<h1>Test Wakelock</h1>
<video controls width="320" height="270" src="2022-12-01_Halle_Lichterwelt_Dino_im_Ei_540x640.mp4" loop
muted></video>
<div id="status"></div>
<script>
const stat = document.getElementById('status');
// If visibility state turns "visible":
// Turn on wakelock again
document.addEventListener("visibilitychange", () => {
console.log(document.visibilityState);
if (document.visibilityState == 'visible') {
doWakeLock();
console.log('visibilityState changed to ' + document.visibilityState);
stat.textContent += 'page goes visible';
}
});
// https://stackoverflow.com/questions/11529247/in-html5-how-can-i-keep-an-android-device-s-screen-on
function doWakeLock() {
// Create a reference for the Wake Lock.
let wakeLock = null;
try {
wakeLock = navigator.wakeLock.request('screen').then(() => {
stat.textContent += ' wakelock activated';
});
} catch (err) {
stat.textContent = 'wakelock not available';
document.querySelector('video').style.display = 'inline-block';
}
}
doWakeLock();
</script>
</body>
</html>Zum Testen verfügbar hier:
https://webentwicklung.ulrichbangert.de/_demos/wakelock/wakelock.html
In dieser Form natürlich für einen produktiven Einsatz noch nicht geeignet, vor allem muss das Video noch unsichtbar gemacht werden. Das ist sicherlich machbar. Wofür ich keine Lösung kenne: Die mobilen Browser lassen durch die Bank kein Autoplay zu, das Video muss durch Interaktion mit dem Benutzer gestartet werden. Möglicher Weise mit einer Abfrage: "Soll der Bildschirm während der Wertung eingeschaltet bleiben?" o. ä.
Ein potenzielles Problem ist noch die Frage des Stromverbrauchs: Wenn der Akku während einer Wertung leer wird wegen des eingeschalteten Bildschirms wäre das auch nicht zielführend.
Für den dauerhaften Fullscreen-Modus ist mir keine Lösung bekannt. Man könnte das möglicher Weise umgehen, indem man das Ganze als Onepager anlegt.
Beste Grüße, Ulrich
Edit: Ich vergaß zu erwähnen, ich habe zufällig ein älteres Tablet mit Android 5, sogar dort funktioniert die Wakelock-API. Bedauerlich, dass Firefox so aus der Reihe tanzt.