Audio- und Videobearbeitung

Videobearbeitung

Die Möglichkeit, die Pixelwerte jedes Frames eines Videos zu lesen, kann sehr nützlich sein.

Video und Canvas

Das <canvas>-Element bietet eine Oberfläche zum Zeichnen von Grafiken auf Webseiten; es ist sehr leistungsfähig und kann eng mit Video gekoppelt werden.

Die allgemeine Technik ist:

1. Schreiben Sie einen Frame aus dem <video>-Element in das <canvas>-Element.
2. Lesen Sie die Daten aus dem <canvas>-Element und manipulieren Sie sie.
3. Schreiben Sie die manipulierten Daten in Ihr "Display"-<canvas> (das effektiv dasselbe Element sein kann).
4. Anhalten und wiederholen.

Zum Beispiel verarbeiten wir ein Video, um es in Graustufen anzuzeigen. In diesem Fall zeigen wir sowohl das Quellvideo als auch die ausgegebenen Graustufen-Frames. Normalerweise würden Sie, wenn Sie ein "Video in Graustufen abspielen"-Feature implementieren, wahrscheinlich display: none zum Stil für das <video>-Element hinzufügen, um zu verhindern, dass das Quellvideo auf dem Bildschirm angezeigt wird, während nur das Canvas die veränderten Frames zeigt.

HTML

Wir können unseren Videoplayer und das <canvas>-Element so einrichten:

<video id="my-video" controls width="480" height="270" crossorigin="anonymous">
  <source
    src="https://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm"
    type="video/webm" />
  <source
    src="https://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
    type="video/mp4" />
</video>

<canvas id="my-canvas" width="480" height="270"></canvas>

JavaScript

Dieser Code bearbeitet die Frames.

const processor = {
  timerCallback() {
    if (this.video.paused || this.video.ended) {
      return;
    }
    this.computeFrame();
    setTimeout(() => {
      this.timerCallback();
    }, 16); // roughly 60 frames per second
  },

  doLoad() {
    this.video = document.getElementById("my-video");
    this.c1 = document.getElementById("my-canvas");
    this.ctx1 = this.c1.getContext("2d");

    this.video.addEventListener("play", () => {
      this.width = this.video.width;
      this.height = this.video.height;
      this.timerCallback();
    });
  },

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

    for (let i = 0; i < l; i++) {
      const grey =
        (frame.data[i * 4 + 0] +
          frame.data[i * 4 + 1] +
          frame.data[i * 4 + 2]) /
        3;

      frame.data[i * 4 + 0] = grey;
      frame.data[i * 4 + 1] = grey;
      frame.data[i * 4 + 2] = grey;
    }
    this.ctx1.putImageData(frame, 0, 0);
  },
};

Sobald die Seite geladen ist, können Sie

processor.doLoad();

Ergebnis

Dies ist ein Beispiel, das zeigt, wie man Videoframes mit einem Canvas manipuliert. Für Effizienz sollten Sie in Betracht ziehen, requestAnimationFrame() anstelle von setTimeout() zu verwenden, wenn Sie in Browsern arbeiten, die es unterstützen.

Das gleiche Ergebnis kann erreicht werden, indem die grayscale() CSS-Funktion auf das Quell-<video>-Element angewendet wird.

Video und WebGL

WebGL ist ein leistungsstarkes API, das Canvas verwendet, um hardwarebeschleunigte 3D- oder 2D-Szenen zu zeichnen. Sie können WebGL und das <video>-Element kombinieren, um Videotexturen zu erstellen, was bedeutet, dass Sie Video innerhalb von 3D-Szenen platzieren können.

Wiedergaberate

Wir können auch die Rate, mit der Audio und Video wiedergegeben werden, mit einem Attribut des <audio>- und <video>-Elements namens playbackRate anpassen. playbackRate ist eine Zahl, die ein Vielfaches darstellt, das auf die Wiedergabegeschwindigkeit angewendet werden soll, beispielsweise repräsentiert 0,5 halbe Geschwindigkeit, während 2 doppelte Geschwindigkeit darstellt.

Beachten Sie, dass die playbackRate-Eigenschaft sowohl mit <audio> als auch <video> funktioniert, in beiden Fällen jedoch die Wiedergabegeschwindigkeit geändert wird, aber nicht die Tonhöhe. Um die Tonhöhe des Audios zu manipulieren, müssen Sie die Web Audio API verwenden. Siehe die AudioBufferSourceNode.playbackRate Eigenschaft.

<video id="my-video" controls loop>
  <source src="/shared-assets/videos/flower.mp4" type="video/mp4" />
  <source src="/shared-assets/videos/flower.webm" type="video/webm" />
</video>
<label for="rate">Playback rate <output id="rate-value">1.0</output></label>
<input type="range" id="rate" name="rate" min="0" max="4" value="1" step=".2" />

const rateSlider = document.getElementById("rate");
const rateValue = document.getElementById("rate-value");
const myVideo = document.getElementById("my-video");

rateSlider.addEventListener("input", () => {
  myVideo.playbackRate = rateSlider.value;
  rateValue.textContent = parseFloat(rateSlider.value);
});

body {
  font-family: sans-serif;
}
video,
label,
input {
  display: block;
  padding: 0.5em;
  width: 80%;
  margin: auto;
}

Starten Sie das Video und passen Sie dann den Schieberegler an, um die Wiedergaberate des Mediums zu ändern:

Audio-Bearbeitung

Abgesehen von playbackRate, um Audio zu manipulieren, werden Sie typischerweise die Web Audio API verwenden.

Auswahl einer Audioquelle

Die Web Audio API kann Audio von verschiedenen Quellen empfangen, dann verarbeiten und es zurück an einen AudioDestinationNode senden, der das Ausgabegerät repräsentiert, an das der Ton nach der Verarbeitung gesendet wird.

Audiofilter

Die Web Audio API beinhaltet viele verschiedene Filter/Effekte, die auf Audio angewendet werden können, zum Beispiel mit dem BiquadFilterNode.

<video id="my-video" controls loop>
  <source src="/shared-assets/videos/friday.mp4" type="video/mp4" />
</video>
<label for="freq">Filter freq. <output id="freq-value">1.0</output>hz</label>
<input type="range" id="freq" name="freq" max="20000" value="1000" step="100" />

const freqSlider = document.getElementById("freq");
const freqValue = document.getElementById("freq-value");

const context = new AudioContext();
const audioSource = context.createMediaElementSource(
  document.getElementById("my-video"),
);
const filter = context.createBiquadFilter();
audioSource.connect(filter);
filter.connect(context.destination);

// Configure filter
filter.type = "lowshelf";
filter.frequency.value = 1000;
filter.gain.value = 20;

freqSlider.addEventListener("input", () => {
  filter.frequency.value = freqSlider.value;
  freqValue.textContent = parseFloat(freqSlider.value);
});

Häufige Audiofilter

Dies sind einige häufige Arten von Audiofiltern, die Sie anwenden können:

• Low Pass: Lässt Frequenzen unterhalb der Grenzfrequenz durch und dämpft Frequenzen über der Grenze.
• High Pass: Lässt Frequenzen oberhalb der Grenzfrequenz durch und dämpft Frequenzen unterhalb der Grenze.
• Band Pass: Lässt einen Bereich von Frequenzen durch und dämpft die Frequenzen unter- und oberhalb dieses Bereichs.
• Low Shelf: Lässt alle Frequenzen durch, fügt aber eine Verstärkung (oder Dämpfung) zu den unteren Frequenzen hinzu.
• High Shelf: Lässt alle Frequenzen durch, fügt aber eine Verstärkung (oder Dämpfung) zu den höheren Frequenzen hinzu.
• Peaking: Lässt alle Frequenzen durch, fügt aber eine Verstärkung (oder Dämpfung) zu einem Frequenzbereich hinzu.
• Notch: Lässt alle Frequenzen durch, außer einem festgelegten Frequenzsatz.
• All Pass: Lässt alle Frequenzen durch, verändert jedoch die Phasenbeziehung zwischen den verschiedenen Frequenzen.

Faltungen und Impulse

Es ist auch möglich, Impulsantworten auf Audio mit dem ConvolverNode anzuwenden. Eine Impulsantwort ist der Klang, der nach einem kurzen Impuls von Klang (wie ein Händeklatschen) entsteht. Eine Impulsantwort wird die Umgebung darstellen, in der der Impuls erzeugt wurde (z.B. ein Echo, das durch Händeklatschen in einem Tunnel entsteht).

Beispiel

const convolver = context.createConvolver();
convolver.buffer = this.impulseResponseBuffer;
// Connect the graph.
source.connect(convolver);
convolver.connect(context.destination);

Sehen Sie sich unser HolySpaceCow Beispiel für ein angewandtes (aber sehr, sehr albernes) Beispiel an.

Raumklang

Wir können Audio auch mit einem Panner-Knoten positionieren. Ein Panner-Knoten—PannerNode—ermöglicht es uns, einen Quellkegel sowie positionale und Richtungselemente zu definieren, alles in einem 3D-Raum, der unter Verwendung von 3D-kartesischen Koordinaten definiert ist.

Beispiel

const panner = context.createPanner();
panner.coneOuterGain = 0.2;
panner.coneOuterAngle = 120;
panner.coneInnerAngle = 0;

panner.connect(context.destination);
source.connect(panner);
source.start(0);

// Position the listener at the origin.
context.listener.setPosition(0, 0, 0);

Beispiele

• Verschiedene Web Audio API (und andere) Beispiele
• THREE.js Video Cube Beispiel
• Faltungen in Echtzeit

Siehe auch

Leitfäden

• Manipulation von Video mittels Canvas
• HTML playbackRate erklärt
• Verwendung der Web Audio API
• Grundlagen der Web-Audio-Räumlichkeit
• Verwendung von Videoframes als WebGL-Textur (Sie können auch die THREE.js WebGL-Bibliothek (und andere) verwenden, um diesen Effekt zu erreichen)
• Animation von Texturen in WebGL
• Entwicklung von Spiele-Audio mit der Web Audio API (Raumeffekte und Filter) (2012)

Referenz

• Die <audio>- und <video>-Elemente
• Die HTMLMediaElement API
• Das <canvas>-Element
• Web Audio API
• AudioContext
• Weitere Informationen zu Spatial Audio
• Webmediotechnologien