Ich möchte die Rohdaten (TypedArray oder etwas) vom Videoelement holen und sie mit JavaScript manipulieren.
Momentan erstelle ich eine neue Leinwand, zeichne das Video in die Leinwand und erhalte dann die Bilddaten.
%Vor%Es funktioniert gut, aber es verbraucht eine CPU (das Video wird auf Canvas übertragen und vom Canvas zurückkopiert) und es entsteht viel Müll (ungefähr 50 MB pro Sekunde). Gibt es eine andere einfachere Lösung? Es wäre toll, wenn ich einen eigenen Puffer an getImageData (...) übergeben könnte.
Übrigens. Video mit WebGL zu zeichnen und es von der GPU zurück zu laden ist nicht schneller :( Ссылка
Bitte lesen Sie
Da Sie tatsächlich keinen Code zeigen, den Browser erwähnen oder Informationen über das Video ausgeben (Auflösung, FPS, Kodierung), ist es unmöglich zu sagen, warum Ihr Code langsam ist oder warum er viel Müll erzeugt. Echtzeit-Videoeffekte mit Javasript sind mit einigen Auflösungsbeschränkungen möglich.
Hier ist ein Mozilla-Beispiel für die Echtzeit-Videofilterung mit.
Sie erhalten keinen rohen Zugriff auf Videodaten, ohne einen Videoframe auf <canvas> zuerst zu blitzen. Ich glaube jedoch, dass diese Operation HW beschleunigt werden sollte, wie es alles im GPU-Speicher passiert. Das Herunterladen von Pixeln von der GPU, die sie in Javascript manipulieren und dann zurück in den Bildschirmspeicher hochladen, ist möglicherweise der langsamste Schritt für eine hohe Auflösung.
Optimierungstipps
Betrachten Sie das Überspringen von Frames (Prozesseffekte in niedrigerem FPS)
Server-seitiges HTML5-Video-Rendering Rendern der HTML5-Animation serverseitig? >