Verwenden Sie OpenCV JavaScript, um Videos aufzunehmen und abzuspielen
- Verwenden Sie OpenCV JavaScript, um Videos von einer Kamera aufzunehmen und abzuspielen
- Verwenden Sie OpenCV JavaScript, um Videos aus einer Datei aufzunehmen und abzuspielen
In diesem Tutorial wird das Erfassen von Videos von einer Kamera und das Anzeigen auf einer Webseite mit OpenCV JavaScript erläutert.
Verwenden Sie OpenCV JavaScript, um Videos von einer Kamera aufzunehmen und abzuspielen
Wir können Videos von einer Kamera mit den Elementen WebRTC, HTML canvas und video aufnehmen. Das WebRTC wird in Echtzeitkommunikationsanwendungen wie Echtzeitkommunikation mit einer Kamera und einem Mikrofon verwendet.
Wir können die navigator.mediaDevices.getUserMedia-Methode von WebRTC in JavaScript verwenden, um Videos von einer Kamera aufzunehmen.
Das erste Argument der Methode ist das HTML-Element video, das mit dem Tag <video> in HTML erstellt werden kann, und wir können das Element video mit seiner id und der Funktion document.getElementById() von abrufen JavaScript.
Das erste Argument der Funktion document.getElementById() wird verwendet, um das Video, Audio oder beide Elemente des Videos zu erhalten. Das zweite Argument der Methode navigator.mediaDevices.getUserMedia wird verwendet, um die Quelle des Streams festzulegen, die ein video-Element sein sollte.
Das dritte Argument zeigt den Fehler, der während des Erfassungsprozesses aufgetreten ist. Wir können die Höhe und Breite des Videos innerhalb des <video>-Tags angeben.
Wir können das Video auch mit der Eigenschaft autoplay abspielen und mit der Eigenschaft muted stumm schalten. Nehmen wir zum Beispiel ein Video von einer Kamera auf und spielen es auf einer Webseite ab. Siehe Code unten.
HTML Quelltext:
<!DOCTYPE html>
<html lang="en">
<head>
<title>OpenCV JavaScript</title>
<script defer src="script.js"></script>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
justify-content: center;
padding-left: 5vw;
}
</style>
</head>
<body>
<h1>Input Video</h1>
<video id="video" width="300" height="200" autoplay muted></video>
</body>
</html>
JavaScript-Code:
const Source_video = document.getElementById('video')
function startSource_Video() {
navigator.getUserMedia(
{video: {}}, stream => Source_video.srcObject = stream,
err => console.error(err))
}
startSource_Video()
Um den obigen Code auszuführen, müssen wir den HTML-Code in einer .html-Datei wie test.html und den JavaScript-Code in einer JavaScript-Datei wie script.js speichern.
Wir müssen die Datei script.js in den Header der Datei .html einfügen, indem wir das Tag <script> zusammen mit dem Attribut defer verwenden, um sicherzustellen, dass die Skriptdatei vor allen anderen Inhalten geladen wird.
Wir können jetzt OpenCV-Funktionen auf das Video anwenden, um das Video gemäß unseren Anforderungen zu verarbeiten. Beispielsweise können wir das Farbvideo in ein Graustufenvideo konvertieren.
Um das Video in Graustufen umzuwandeln, müssen wir zwei Variablen vom Typ cv.Mat erstellen, die das Eingabe- und das Ausgabevideo speichern. Wir müssen drei Argumente innerhalb der Funktion cv.Mat() übergeben.
Das erste und das zweite Argument sind die Höhe und Breite des Eingabevideos, und das dritte ist der Bildtyp.
Wir wissen, dass ein Video aus vielen Bildern oder Einzelbildern besteht, und um das Video in Graustufen umzuwandeln, müssen wir jedes Einzelbild einzeln lesen und mit der Funktion cv.cvtColor() in Graustufen umwandeln.
Zeigen Sie es dann in einem HTML-Element canvas mit der Funktion cv.imshow() von OpenCV an. Um das Video aufzunehmen, können wir die Funktion cv.VideoCapture() von OpenCV verwenden.
Um das Video aufzunehmen, müssen wir das video-Element oder seine id innerhalb der Funktion übergeben. Um die Frames aus dem Video zu erhalten, können wir dann die Funktion read() mit der Variablen verwenden, in der das Video gespeichert ist.
Danach können wir Rahmen, Zielvariable und Farbkonvertierungsparameter innerhalb der Funktion cv.cvtColor() übergeben, um den Rahmen in Graustufen umzuwandeln.
Wir können die Frames einzeln mit der Funktion cv.imshow() anzeigen, und wir müssen das canvas-Element oder seine id innerhalb der Funktion und die Variable mit dem Bild oder Frame, das wir zeigen möchten, übergeben auf der Webseite.
Wir müssen eine Verzögerung von einer Millisekunde hinzufügen, um jeden Frame einzeln mit der Funktion setTimeout() zu verarbeiten. Die Verzögerungswerte können sich je nach Anzahl der Frames des Videos ändern. Bei einem Video mit 30 FPS ist die Verzögerung in Millisekunden beispielsweise gleich (1000/30 - Prozesszeit).
Die Verarbeitungszeit ist gleich der Zeit, die benötigt wird, um jedes Bild in Graustufen umzuwandeln, und wir können diese Zeit mit der Funktion Date.now() erhalten, die die aktuelle Zeit zurückgibt, und wir können diese Funktion vor und nach dem Bild verwenden verarbeitet.
Ihre Differenz entspricht also der erforderlichen Verzögerung. Nehmen wir zum Beispiel ein Video von einer Kamera auf und konvertieren es mit OpenCV JavaScript in Graustufen.
In diesem Beispiel müssen wir auch die Datei opencv.js mit dem Tag script mit der HTML-Datei verknüpfen, die wir von diesem link herunterladen können. Siehe Code unten.
HTML Quelltext:
<!DOCTYPE html>
<html lang="en">
<head>
<title>OpenCV JavaScript</title>
<script defer src="opencv.js"></script>
<script defer src="script.js"></script>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
justify-content: center;
padding-left: 5vw;
}
</style>
</head>
<body>
<h1>Input Video</h1>
<video id="video" width="300" height="200" autoplay muted></video>
<div>
<h1>Output Video</h1>
<canvas id="canvasOutput" width="300" height="100"></canvas>
</div>
</body>
</html>
JavaScript-Code:
const Source_video = document.getElementById('video')
let canvas = document.getElementById('canvasOutput')
function startSource_Video() {
navigator.getUserMedia(
{video: {}}, stream => Source_video.srcObject = stream,
err => console.error(err))
}
startSource_Video()
cv['onRuntimeInitialized'] = () => {
let srcImage =
new cv.Mat(Source_video.height, Source_video.width, cv.CV_8UC4);
let dstImage =
new cv.Mat(Source_video.height, Source_video.width, cv.CV_8UC1);
let cap = new cv.VideoCapture(Source_video);
const FPS = 30;
function processSource_Video() {
let begin_delay = Date.now();
cap.read(srcImage);
cv.cvtColor(srcImage, dstImage, cv.COLOR_RGBA2GRAY);
cv.imshow(canvas, dstImage);
let delay = 1000 / FPS - (Date.now() - begin_delay);
setTimeout(processSource_Video, delay);
};
setTimeout(processSource_Video, 0);
};
Stellen Sie sicher, dass die Skriptdateien script.js und opencv.js und die .html-Datei dasselbe Verzeichnis haben, bevor Sie die .html-Datei mit einem Webbrowser öffnen.
Der obige Code erfasst das Video von der Kamera des Computers, und wenn die Kamera nicht verfügbar ist, gibt es einen Fehler, der auf der Konsole des Webbrowsers angezeigt wird.
Verwenden Sie OpenCV JavaScript, um Videos aus einer Datei aufzunehmen und abzuspielen
Im obigen Abschnitt haben wir das Video von einer Kamera aufgenommen und auf einer Webseite angezeigt, aber wir können auch ein Video aus einer Datei lesen und mit OpenCV-JavaScript verarbeiten.
Wir können zum Beispiel ein mp4-Video aus einem Ordner lesen, in Graustufen umwandeln und dann auf der Webseite anzeigen. Wir können denselben Code verwenden, den wir im obigen Abschnitt verwendet haben.
Wir müssen nur eine Funktion aus der Datei script.js löschen, die verwendet wird, um ein Video von der Kamera zu erhalten. Fügen Sie dann eine Quelle innerhalb des Tags <video> hinzu, die den Pfad der Videodatei zusammen mit ihrem Namen und ihrer Erweiterung wie video.mp4 angibt.
Der restliche Code sollte derselbe sein. Siehe Code unten.
HTML Quelltext:
<!DOCTYPE html>
<html lang="en">
<head>
<title>OpenCV JavaScript</title>
<script defer src="opencv.js"></script>
<script defer src="script.js"></script>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
justify-content: center;
padding-left: 5vw;
}
</style>
</head>
<body>
<h1>Input Video</h1>
<video src="bon_fire_dog_2.mp4" id="video" width="300" height="200" autoplay muted></video>
<div>
<h1>Output Video</h1>
<canvas id="canvasOutput" width="300" height="100"></canvas>
</div>
</body>
</html>
JavaScript-Code:
const Source_video = document.getElementById('video')
let canvas = document.getElementById('canvasOutput')
cv['onRuntimeInitialized'] = () => {
let srcImage =
new cv.Mat(Source_video.height, Source_video.width, cv.CV_8UC4);
let dstImage =
new cv.Mat(Source_video.height, Source_video.width, cv.CV_8UC1);
let cap = new cv.VideoCapture(Source_video);
const FPS = 30;
function processSource_Video() {
let begin_delay = Date.now();
cap.read(srcImage);
cv.cvtColor(srcImage, dstImage, cv.COLOR_RGBA2GRAY);
cv.imshow(canvas, dstImage);
let delay = 1000 / FPS - (Date.now() - begin_delay);
setTimeout(processSource_Video, delay);
};
setTimeout(processSource_Video, 0);
};
Ausgang:
Um den obigen Code auszuführen, müssen wir den HTML-Code in einer .html-Datei wie test.html und den JavaScript-Code in einer JavaScript-Datei wie script.js speichern.
Wir müssen die Datei script.js und die Datei opencv.js mit dem Tag <script> in den Header der HTML-Datei einfügen.
Wir haben das Attribut defer im obigen HTML-Code verwendet, um sicherzustellen, dass die Skriptdatei vor allen anderen Inhalten geladen wird. Wir haben das Tag <style> verwendet, um der Webseite einen CSS-Stil hinzuzufügen.
Im obigen JavaScript-Code haben wir die Funktion onRuntimeInitialized für OpenCV verwendet, um sicherzustellen, dass opencv.js initialisiert wird, bevor es verwendet wird.
