Feat: Add image sender to webui + Browser screen capture #611
Conversation
This PR adds a new image sending feature to the webui and extends the api accordingly. In javascript the processing of images is horrible slow (without WASM), so the solution is at the API side with out-of-the-box power of Qt. - The image cmd accepts now a raw image that is encoded with base64. Supported are all image formats that qt supports (enough) - There is no real size limit. It will be automatically scaled down to max 2000px width or height according to aspect ratio - It's possible to scale down through a new "scale" property if developer wants that. - Test were successfull until 3MP pictues, 4k+ closes the websocket on browser side, so 2k is a decent value
|
Cool! BTW: i think the gif upload in effect configurator is broken. Could you verify that? |
|
The GIF upload at the effectsconfigurator never worked. This requires additional code for the jsoneditor. I think it's not prepared for in-place upload. You can use a GIF, but it won't animate. @b1rdhous3 @Paulchen-Panther Ideen
|
Das stimmt so nicht. Wenn du in diesen PR schaust wirst du was finden! 😄 2dca1c9#diff-80c1698a4dfb80d4c23366bc811a08b1R38 2dca1c9#diff-660e50680e65cfe24388aedef7264eaaR195 2dca1c9#diff-145eea9884e6fa40c1c4a0d15d19f63bR28 2dca1c9#diff-6526bf2cd45fc573c0f6ef68f9d68243R153 u.s.w. |
Ja der ist Kaputt bzw. nimmt nur kleine (>50kb) gif dateien an. |
|
Ah, imageData property.
|
|
Acho, das läuft über die args. Was hälst du davon einen FileReader zu benutzen und Python selbst das Bild laden zu lassen. Der Pfad muss entsprechend ergänzt werden (davor) |
|
Zum Tagesabschluss noch ein ultra cooles feature :) Ja, es ist das was es ist. Ein Browser-Screencapture. Das erschlägt einfach alles :) |
|
Welchen Vorteil siehst du im Browser Screencapture gegenüber dem System Capture? |
|
Der größte Punkt ist wohl die Zugänglichkeit. Schnell und einfach. Die performance könnte aber nicht so super gut sein. Mittlerweile kam aber Ernüchterung auf, das geht NUR NOCH wenn es eine HTTPS Verbindung ist. Es ging in dem Beispiel, weil localhost (loopback) als sicher eingestuft ist. Diese Restriktion wurde schon vor längerer Zeit eingeführt. Gab es aber zu Beginn nicht :) Also nächster Schritt wäre HTTPS und wahrscheinlich auch WSS, sonst kann das kaum ein Mensch nutzen. Den Browser als capture device zu nutzen ist aber die wohl einfachste Art Bilder von Fenster/Tabs oder dem ganzen OS zu bekommen. Unabhängig der Plattform |
|
geht das auch mit geschüzten inhalten wie zB Netflix? |
|
Der Browser könnte das durchaus verbieten. Die "Freiheits"-geschichte geht da immer mehr in die Tonne :) |
|
Kannst du die Bildadresse noch mit löschen, wenn der Button "Reset Color/Effect" gedrückt wurde? |
|
Es wäre sehr nett wenn du gleich mal nach dem Color Field schauen könntest. Das setzt auch die farbe wenn man nur das edit field anwählt und wieder verlässt, bzw color picker aufruft und keine farbe auswählt. |
|
Das mit dem colorpicker ist ein changevent das aus dem colorpicker kommt. Das kann man nur im colorpicker code suchen und entfernen. Hat evtl. Nebenwirkungen. Den button hab ich glatt übersehen. Wo kommen die nur her. |
|
Im Colorpicker selbst kann ich mir das gut vorstellen aber nicht in unseren JsonEditor edit Feld. Da wird der Colorpicker erst gar nicht aufgerufen. Muss irgendwo auf unserer Seite liegen. |
|
Oke, ich komm dem gleich nach. Nachdem ich das da in dem Bild beendet habe :) |
|
okay |
|
@brindosch super! Wie wollen wir mit den cert Warnungen umgehen? Können ja schlecht n Zertifikat was gültig ist hinterlegen. |
Genau so mache ich das gerade. Also ein selbst signiertes, als wäre ich eine CA. Keine Ahnung wie gut das funktioniert so quer durch die Bank. Aber bevor man nichts hat. Nimmt man einfach das. Ich muss noch testen ob das mit dem capture so auch wirklich funktioniert, oder ob noch mehr Backsteine kommen vom Browser, nur damit ich das nicht umsetzen kann. |
|
Selbst signiert wirst du im Browser ne Warnung bekommen, aber denke das ist okay. Kann man ja akzeptieren (daher wichtig, dass es nicht default an ist - könnte Leute verwirren) Die Möglichkeit für eigene wie let‘s encrypt oder so ist klasse. |
|
Das mit der Warnung stimmt, die alternative zur Warnung ist ganz abschalten leider. Soweit ich weiß benötigst du eine öffentlich zugängliche Domain die registriert ist. Die hast du im lokalen Netzwerk vermutlich eher weniger :) Absolut safer sex! |
|
Genau, bin ich voll bei dir. |
|
Ich hab HTTP nicht abgeschalten, HTTPS ist nur ein Zusatz und wird nicht sonderlich erwähnt :) Edit from @Paulchen-Panther 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 |
|
Habe ich. Aber vor 5min eine zweite in der steht, dass die Einladung wieder zurück gezogen wurde |
|
Jetzt aber |
|
Jap, hat geklappt. Danke :) |
|
In Chrome von Windows aus, mit Netflix.
|
|
Hast du probiert ob es im Vollbild auch korrekt funktioniert? Und wie ist die Latenz? |
|
Ist der delay zwischen browser und Preview eigentlich sehr groß? @b1rdhous3 jetzt warst du schneller. |
|
Du kannst browser tabs, Anwendungen oder den gesamten Desktop streamen. Was meinst du mit Vollbild? Schätze schon. Wie testet man Vollbild funktioniert, während man im Vollbild ist. Ich hab gerade keinen zweiten Monitor zur Hand GIF aufgenommen mit 15fps, gesendet mit 10fps. |
Ich habe mir das auch schon einmal angeschaut und bin zum gleichen Ergebnis wie du gekommen. In der von uns verwendeten Color Picker Version sehe ich da kein großes anpassungspotential.
Okay kann ich ja mal testen. Andere Anwendungen? Dachte der capture geht dann nur im Browser?! |
|
Wir können auch einen anderen CP nehmen. Mir ist das eigentlich egal. Wie ich gesehen habe, wurde der CP jetzt auch archiviert, weil niemand das Projekt übernommen hat. OT: |
|
Ja, wir sollten nur schauen ob wie da nicht eine etwas freiere Seite machen? Was genau wird denn auf der Remote Seite genau vom JSON Editor durch unser Schema generiert? |
|
Nutzerfreundlich ist immer gut. Leider sehe ich das erst, wenn ich es sehe. Und jetzt das grundsätzliche aber: Was zeichnet ein "gutes" Framework aus:
Das wären so meine Punkte, die ich aus der Erfahrung mit dem webinterface ziehe. Ich fühle den Schmerz, ich hab viel davon geschrieben. |
brindosch
changed the title
|
Sag mal, warum steht eigentlich auf der remote page 2 sekunden da wenn der capture läuft? |
|
Hast du es getestet? Läufts gut? Mit Opera funktionierts auch - wie ich mittlerweile herausfand. Witzigerweise wird der button auch im mobilen browser angezeigt. Das heißt die API ist grundsätzlich vorhanden, geht aber (noch?) nicht. Weil COMP_IMAGE eigentlich nicht als image streamer gedacht ist. Timeouts werden in der UI für alle unterdrückt außer COLOR/IMAGE/EFFECT. Ich wollte sicher gehen, dass die prio wieder freigegeben wird auch wenn Netzwerk oder so abbricht. Am Ende ist es eine Designfrage, man könnte auch timeout auf -1 setzen, dann muss man aber clearen. |
|
Dann blende die 2 sekunden im webUI bitte aus. Danke 👍 |
|
Ich hab es auch getestet: Läuft super. Konnte sämtliche Inhalte meines Computers freigeben. Auch andere Applikationen oder den ganzen Bildschirm. Wusste gar nicht dass die Browser sowas können. Hab auch mit meinen beiden Bildschirmen mal die Latenz im Vollbild überprüft. Sieht in Ordnung aus. |
|
Kann man die Skalierung der Quelle noch beeinflussen? |
|
Du meinst wenn ich bspw. mein aufgenommenes Programmfenster größer und kleiner ziehe? |
|
Nein. Ich meinte mit Skalierung, die Bildgröße (sagen wir FullHD) die von hyperion verarbeitet wird. |
|
Die API ist ziemlich druckfrisch im Browser. Ist im MDN auch noch als "Working Draft" gekennzeichnet. Könnte also wieder kaputt gehen. Das ist mir aber egal, dafür ist es zu genial. @Paulchen-Panther
Dann sieht du aber auch keinen Countdown mehr bei einem "Bild" mit timeout (Unten bei effects/colors selection) |
Und da lässt sich wirklich keine Ausnahme hinzufügen? |
|
Man könnte in der ui den "Streamer" owner abfangen. Ist aber etwas schmutzig :) |
|
wenn's funktioniert, warum nicht? |
|
Ach ja, das beenden via X hinter dem Streamer im Remote funzt auch nicht. |
|
Geht schon, du musst halt 10x pro Sekunde das machen :) |
|
Dann das zweite bitte. 😄 |
5 participants
This PR adds a new image sending feature to the webui and extends the api accordingly. In javascript the processing of images is horrible slow (without WASM), so the solution is at the API side with out-of-the-box power of Qt.
Image:
