HTML5: Verwenden Sie Canvas, um Videos in Echtzeit zu verarbeiten-H5-Tutorial-php.cn

HTML5: Verwenden Sie Canvas, um Videos in Echtzeit zu verarbeiten

高洛峰

Freigeben： 2018-05-28 17:58:12

Original

6128 Leute haben es durchsucht

Dokumentinhalt

Das in diesem Artikel verwendete XHTML-Dokument lautet wie folgt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
background: black;
color:#CCCCCC;
}
#c2 {
background-image: url(foo.png);
background-repeat: no-repeat;
}
p {
float: left;
border :1px solid #444444;
padding:10px;
margin: 10px;
background:#3B3B3B;
}
</style>
<script type="text/javascript;version=1.8" src="main.js"></script>
</head>

<body onload="processor.doLoad()">
<p>
<video id="video" src="video.ogv" controls="true"/>
</p>
<p>
<canvas id="c1" width="160" height="96"/>
<canvas id="c2" width="160" height="96"/>
</p>
</body>
</html>

Nach dem Login kopieren

Die wichtigsten Teile des obigen Codes sind wie folgt:

1. Erstellen Sie zwei Canvas-Elemente mit den IDs c1 und c2. c1 wird verwendet, um das Originalvideo des aktuellen Frames anzuzeigen, c2 wird verwendet, um das Video nach der Durchführung von Chroma-Keying-Spezialeffekten anzuzeigen; c2 wird mit einem statischen Bild vorgeladen, das verwendet wird, um den Hintergrundfarbteil des Videos zu ersetzen.

2. Der JavaScript-Code wird aus der Datei main.js importiert; dieses Skript verwendet die Funktionen von JavaScript 1.8, daher wird beim Importieren des Skripts die Version in Zeile 22 angegeben.

3. Wenn die Webseite geladen wird, wird die Methode „processor.doLoad()“ in main.js ausgeführt.

JavaScript-Code

Der JS-Code in main.js enthält drei Methoden.

Chroma-Key initialisieren

Die doLoad()-Methode wird aufgerufen, wenn das XHTML-Dokument zum ersten Mal geladen wird. Der Zweck dieser Methode besteht darin, die erforderlichen Variablen für den Chroma-Key-Verarbeitungscode vorzubereiten und einen Ereignis-Listener einzurichten, damit wir erkennen können, wann der Benutzer mit der Wiedergabe des Videos beginnt.

doLoad: function() {
this.video = document.getElementById("video");
this.c1 = document.getElementById("c1");
this.ctx1 = this.c1.getContext("2d");
this.c2 = document.getElementById("c2");
this.ctx2 = this.c2.getContext("2d");
let self = this;
this.video.addEventListener("play", function() {
self.width = self.video.videoWidth / 2;
self.height = self.video.videoHeight / 2;
self.timerCallback();
}, false);
},

Nach dem Login kopieren

Dieser Code erhält Verweise auf das Videoelement und zwei Canvas-Elemente im XHTML-Dokument sowie Verweise auf den Grafikkontext der beiden Canvases. Diese werden verwendet, wenn wir den Chroma-Keying-Effekt implementieren.

addEventListener() hört das Videoelement ab und wird aufgerufen, wenn der Benutzer die Wiedergabetaste im Video drückt. Um die Benutzerwiedergabe zu handhaben, nimmt dieser Code die Breite und Höhe des Videos, halbiert es (wir halbieren die Größe des Videos, wenn wir den Chroma-Keying-Effekt ausführen) und ruft dann die Methode timerCallback() auf, um die Videoaufnahme zu starten und Berechnungen visueller Effekte.

Timer-Rückruf

Die Timer-Rückruffunktion wird aufgerufen, wenn die Wiedergabe des Videos beginnt (wenn das „Play“-Ereignis eintritt) und ist dann für ihren eigenen regelmäßigen Aufruf verantwortlich, um für jedes Video Keying-Effekte zu implementieren Einzelbild des Videos.

timerCallback: function() {
if (this.video.paused || this.video.ended) {
return;
}
this.computeFrame();
let self = this;
setTimeout(function () {
self.timerCallback();
}, 0);
},

Nach dem Login kopieren

Die Callback-Funktion prüft zunächst, ob das Video abgespielt wird. Wenn nicht, unternimmt die Callback-Funktion nichts und kehrt sofort zurück.

Rufen Sie dann die Methode „computeFrame()“ auf, die Chroma-Keying-Spezialeffekte auf das aktuelle Videobild ausführt.

Das Letzte, was die Callback-Funktion tut, ist, setTimeout() aufzurufen, damit sie so schnell wie möglich erneut aufgerufen werden kann. In einer realen Umgebung könnten Sie die Anruffrequenz basierend auf der Bildrate des Videos festlegen.

Video-Frame-Daten verarbeiten

Die Methode „computeFrame()“, wie unten gezeigt, ist tatsächlich dafür verantwortlich, die Daten jedes Frames zu erfassen und Chroma-Keying-Spezialeffekte auszuführen.

computeFrame: function() {
this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
let l = frame.data.length / 4;

for (let i = 0; i < l; i++) {
let r = frame.data[i * 4 + 0];
let g = frame.data[i * 4 + 1];
let b = frame.data[i * 4 + 2];
if (g > 100 && r > 100 && b < 43)
frame.data[i * 4 + 3] = 0;
}
this.ctx2.putImageData(frame, 0, 0);
return;
}

Nach dem Login kopieren

Beim Aufruf zeigt das Videoelement die neuesten Videobilddaten an, wie unten gezeigt:

HTML5: Verwenden Sie Canvas, um Videos in Echtzeit zu verarbeiten

In Zeile 2 wird das Video Der Rahmen wird in den Grafikkontext der ersten Leinwand ctx1 kopiert, wobei die Höhen- und Breitenwerte auf die Hälfte der Größe des zuvor gespeicherten Rahmens festgelegt werden. Beachten Sie, dass Sie das aktuelle Videobild zeichnen können, indem Sie das Videoelement an die Methode drawImage() des Zeichenkontexts übergeben. Das Ergebnis ist:

HTML5: Verwenden Sie Canvas, um Videos in Echtzeit zu verarbeiten

Die dritte Codezeile ruft eine Kopie der Originalbilddaten des aktuellen Videobilds ab, indem sie die Methode getImageData() des ersten Canvas-Kontexts aufruft. Es stellt rohe 32-Bit-Pixelbilddaten bereit, damit wir sie bearbeiten können. Zeile 4 des Codes berechnet die Gesamtzahl der Pixel im Bild, indem die Gesamtlänge der Frame-Bilddaten durch 4 geteilt wird.

Die 6. Codezeile scannt alle Pixel in einer Schleife, ermittelt die Rot-, Grün- und Blauwerte jedes Pixels und vergleicht sie mit der vordefinierten Hintergrundfarbe In foo.png importiertes Hintergrundbild ersetzen.

Für jedes als Hintergrund erkannte Pixel wird der Alphawert durch Null ersetzt, was anzeigt, dass das Pixel vollständig transparent ist. Dadurch ist der Hintergrundteil des endgültigen Bildes zu 100 % transparent, sodass der Inhalt beim Zeichnen in den Kontext des Ziels in Zeile 13 den statischen Hintergrund überlagert.

Das resultierende Bild sieht so aus:

HTML5: Verwenden Sie Canvas, um Videos in Echtzeit zu verarbeiten