OpenCV JavaScript を使用してビデオをキャプチャして再生する
このチュートリアルでは、カメラからビデオをキャプチャし、OpenCV JavaScript を使用して Web ページに表示する方法について説明します。
OpenCV JavaScript を使用してカメラからビデオをキャプチャして再生する
WebRTC、HTML の canvas および video 要素を使用して、カメラからビデオをキャプチャできます。 WebRTC は、カメラやマイクとのリアルタイム通信などのリアルタイム通信アプリケーションで使用されます。
JavaScript で WebRTC の navigator.mediaDevices.getUserMedia メソッドを使用して、カメラからビデオをキャプチャできます。
メソッドの最初の引数は、HTML の <video> タグを使用して作成できる HTML video 要素であり、その id と document.getElementById() 関数を使用して video 要素を取得できます。 JavaScript。
document.getElementById() 関数の最初の引数は、ビデオ、オーディオ、またはビデオの両方の要素を取得するために使用されます。 navigator.mediaDevices.getUserMedia メソッドの 2 番目の引数は、video 要素であるストリームのソースを設定するために使用されます。
3 番目の引数は、キャプチャ プロセス中に発生したエラーを示します。 <video> タグ内でビデオの高さと幅を指定できます。
autoplay プロパティを使用してビデオを再生し、muted プロパティを使用してミュートすることもできます。 たとえば、カメラからビデオをキャプチャして、Web ページで再生してみましょう。 以下のコードを参照してください。
HTML コード:
<!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 コード:
const Source_video = document.getElementById('video')
function startSource_Video() {
navigator.getUserMedia(
{video: {}}, stream => Source_video.srcObject = stream,
err => console.error(err))
}
startSource_Video()
上記のコードを実行するには、HTML コードを test.html のような .html ファイルに保存し、JavaScript コードを script.js のような JavaScript ファイルに保存する必要があります。
defer 属性とともに <script> タグを使用して .html ファイルのヘッダー内に script.js ファイルを含める必要があります。これにより、スクリプト ファイルが他のコンテンツよりも先にロードされるようになります。
ビデオで OpenCV 関数を使用して、要件に従ってビデオを処理できるようになりました。 たとえば、カラー ビデオをグレースケール ビデオに変換できます。
ビデオをグレースケールに変換するには、入力ビデオと出力ビデオを格納するタイプ cv.Mat の 2つの変数を作成する必要があります。 cv.Mat() 関数内で 3つの引数を渡す必要があります。
1 番目と 2 番目の引数は入力ビデオの高さと幅で、3 番目は画像の種類です。
ビデオは多くの画像またはフレームで構成されていることがわかっています。ビデオをグレースケールに変換するには、各フレームを 1つずつ読み取り、cv.cvtColor() 関数を使用してグレースケールに変換する必要があります。
次に、OpenCV の cv.imshow() 関数を使用して、HTML の canvas 要素内に表示します。 ビデオをキャプチャするには、OpenCV の cv.VideoCapture() 関数を使用できます。
ビデオをキャプチャするには、関数内で video 要素またはその id を渡す必要があります。 次に、ビデオからフレームを取得するために、ビデオが保存されている変数で read() 関数を使用できます。
その後、cv.cvtColor() 関数内でフレーム、宛先変数、および色変換パラメータを渡して、フレームをグレースケールに変換できます。
cv.imshow() 関数を使用してフレームを 1つずつ表示できます。関数内で canvas 要素またはその id と、表示したい画像またはフレームを含む変数を渡す必要があります。 ウェブページで。
setTimeout() 関数を使用して各フレームを個別に処理するには、ミリ秒の遅延を追加する必要があります。 遅延値は、ビデオのフレーム数によって異なります。 たとえば、30 FPS ビデオの場合、ミリ秒単位の遅延は (1000/30 - process_time) と等しくなります。
処理時間は、各フレームをグレースケールに変換するのにかかる時間と同じです。この時間は、現在の時間を返す Date.now() 関数を使用して取得できます。この関数は、画像が変換される前後に使用できます。 処理されます。
したがって、それらの差は必要な遅延に等しくなります。 たとえば、カメラからのビデオをキャプチャして、OpenCV JavaScript を使用してグレースケールに変換してみましょう。
この例では、この リンク からダウンロードできる script タグを使用して、opencv.js ファイルを HTML ファイルにリンクする必要もあります。 以下のコードを参照してください。
HTML コード:
<!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 コード:
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);
};
スクリプト ファイル script.js および opencv.js と .html ファイルが同じディレクトリにあることを確認してから、.html ファイルを Web ブラウザで開きます。
上記のコードは、コンピューターのカメラからビデオをキャプチャします。カメラが使用できない場合は、Web ブラウザーのコンソールにエラーが表示されます。
OpenCV JavaScript を使用して、ファイルからビデオをキャプチャして再生する
上記のセクションでは、カメラからビデオをキャプチャして Web ページに表示しましたが、ファイルからビデオを読み取り、OpenCV JavaScript で処理することもできます。
たとえば、フォルダーから mp4 ビデオを読み取り、グレースケールに変換してから、Web ページに表示できます。 上記のセクションで使用したのと同じコードを使用できます。
カメラからビデオを取得するために使用される script.js ファイルから関数を削除するだけです。 次に、video.mp4 のような名前と拡張子とともにビデオ ファイルのパスを指定する <video> タグ内にソースを追加します。
残りのコードは同じである必要があります。 以下のコードを参照してください。
HTML コード:
<!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 コード:
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);
};
出力：
上記のコードを実行するには、HTML コードを test.html のような .html ファイルに保存し、JavaScript コードを script.js のような JavaScript ファイルに保存する必要があります。
<script> タグを使用して、HTML ファイルのヘッダー内に script.js ファイルと opencv.js ファイルを含める必要があります。
上記の HTML コードで defer 属性を使用して、スクリプト ファイルが他のコンテンツよりも先に読み込まれるようにしました。 <style> タグを使用して、CSS スタイルを Web ページに追加しました。
上記の JavaScript コードでは、onRuntimeInitialized 関数を OpenCV に使用して、opencv.js が使用前に初期化されるようにしています。
