Ecamm Live: Kamera perspektivisch verzerren / verformen und einbinden

Wie ihr wisst verwende ich für all meine Videoproduktionen egal ob Youtube Videos, Kunden Videos, Webinare oder Livestreams immer Ecamm Live. Das ist eine geniale Produktionssoftware für alles mit Video die auf dem Mac läuft.

Leider sind viele Funktionen die man von OBS Studio kennt leider hier nicht verfügbar, egal ob es formen Masken für Kameras sind oder perspektivische Kameraverzerrungen. Man muss immer sehr kreativ sein, wenn man solche Effekte in Ecamm Live auch anwenden möchte.

Heute möchte ich euch einen kleinen Trick zeigen, wie ihr eure Kamera perspektivisch verformen könnt, damit ihr es in Ecamm Live verwenden könnt.

Video

HTML

<div class="container">
        <video id="videoElement"></video>
      </div>

Javascript

navigator.mediaDevices
        .getUserMedia({ video: true })
        .then(function (stream) {
          var video = document.getElementById("videoElement");
          video.srcObject = stream;
          video.play();
        })
        .catch(function (error) {
          console.log(error);
        });

CSS

Ihr könnt jetzt natürlich eine Hintergrundfarbe im Body definieren und zum Beispiel in der Container Classe alles zentrieren.

In der Video ID videoElement könnt ihr jetzt die Verzerrung durchführen.

#videoElement {
height: 600px; /* höhe des videofenster*/
transform: perspective(1500px) rotateY(-48deg);
}