OpenCV JavaScript를 사용하여 비디오 캡처 및 재생
이 튜토리얼에서는 OpenCV JavaScript를 사용하여 카메라에서 비디오를 캡처하고 웹 페이지에 표시하는 방법에 대해 설명합니다.
OpenCV JavaScript를 사용하여 카메라에서 비디오 캡처 및 재생
WebRTC, HTML canvas 및 video 요소를 사용하여 카메라에서 비디오를 캡처할 수 있습니다. WebRTC는 카메라 및 마이크와의 실시간 통신과 같은 실시간 통신 애플리케이션에 사용됩니다.
JavaScript에서 WebRTC의 navigator.mediaDevices.getUserMedia 메서드를 사용하여 카메라에서 비디오를 캡처할 수 있습니다.
메서드의 첫 번째 인수는 HTML의 <video> 태그를 사용하여 만들 수 있는 HTML video 요소이며 id 및 document.getElementById() 함수를 사용하여 video 요소를 가져올 수 있습니다. 자바스크립트.
document.getElementById() 함수의 첫 번째 인수는 비디오, 오디오 또는 비디오의 두 요소를 가져오는 데 사용됩니다. navigator.mediaDevices.getUserMedia 메서드의 두 번째 인수는 video 요소여야 하는 스트림의 소스를 설정하는 데 사용됩니다.
세 번째 인수는 캡처 프로세스 중에 발생한 오류를 보여줍니다. <video> 태그 안에 비디오의 높이와 너비를 지정할 수 있습니다.
autoplay 속성을 사용하여 비디오를 재생하고 muted 속성을 사용하여 음소거할 수도 있습니다. 예를 들어 카메라에서 비디오를 캡처하여 웹 페이지에서 재생해 봅시다. 아래 코드를 참조하십시오.
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>
자바스크립트 코드:
const Source_video = document.getElementById('video')
function startSource_Video() {
navigator.getUserMedia(
{video: {}}, stream => Source_video.srcObject = stream,
err => console.error(err))
}
startSource_Video()
위의 코드를 실행하려면 test.html과 같은 .html 파일에 HTML 코드를 저장하고 script.js와 같은 JavaScript 파일에 JavaScript 코드를 저장해야 합니다.
defer 속성과 함께 <script> 태그를 사용하여 .html 파일의 헤더 내부에 script.js 파일을 포함해야 하며 스크립트 파일이 다른 콘텐츠보다 먼저 로드되도록 해야 합니다.
이제 비디오에서 OpenCV 기능을 사용하여 요구 사항에 따라 비디오를 처리할 수 있습니다. 예를 들어 컬러 비디오를 그레이스케일 비디오로 변환할 수 있습니다.
비디오를 회색조로 변환하려면 입력 및 출력 비디오를 저장할 cv.Mat 유형의 두 변수를 만들어야 합니다. cv.Mat() 함수 내부에 세 개의 인수를 전달해야 합니다.
첫 번째 및 두 번째 인수는 입력 비디오의 높이와 너비이고 세 번째 인수는 이미지 유형입니다.
비디오는 많은 이미지 또는 프레임으로 구성되어 있으며 비디오를 그레이 스케일로 변환하려면 각 프레임을 하나씩 읽고 cv.cvtColor() 함수를 사용하여 그레이 스케일로 변환해야 합니다.
그런 다음 OpenCV의 cv.imshow() 기능을 사용하여 HTML canvas 요소 내부에 표시합니다. 비디오를 캡처하기 위해 OpenCV의 cv.VideoCapture() 기능을 사용할 수 있습니다.
비디오를 캡처하려면 video 요소 또는 해당 id를 함수 내부에 전달해야 합니다. 그런 다음 비디오에서 프레임을 가져오기 위해 비디오가 저장된 변수와 함께 read() 함수를 사용할 수 있습니다.
그런 다음 cv.cvtColor() 함수 내에서 프레임, 대상 변수 및 색상 변환 매개변수를 전달하여 프레임을 그레이 스케일로 변환할 수 있습니다.
cv.imshow() 함수를 사용하여 프레임을 하나씩 표시할 수 있으며 canvas 요소 또는 해당 id를 함수 내부에 전달하고 표시하려는 이미지 또는 프레임을 포함하는 변수를 전달해야 합니다. 웹페이지에서.
setTimeout() 함수를 사용하여 각 프레임을 개별적으로 처리하려면 밀리초 지연을 추가해야 합니다. 지연 값은 비디오의 프레임 수에 따라 변경될 수 있습니다. 예를 들어 30FPS 비디오의 경우 지연 시간(밀리초)은 (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>
자바스크립트 코드:
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);
};
웹 브라우저에서 .html 파일을 열기 전에 스크립트 파일 script.js 및 opencv.js와 .html 파일이 동일한 디렉토리에 있는지 확인하십시오.
위의 코드는 컴퓨터의 카메라에서 비디오를 캡처하고 카메라를 사용할 수 없는 경우 웹 브라우저의 콘솔에서 볼 수 있는 오류를 제공합니다.
OpenCV JavaScript를 사용하여 파일에서 비디오 캡처 및 재생
위 섹션에서는 카메라에서 비디오를 캡처하여 웹 페이지에 표시했지만 파일에서 비디오를 읽고 OpenCV JavaScript로 처리할 수도 있습니다.
예를 들어 폴더에서 mp4 비디오를 읽고 그레이스케일로 변환한 다음 웹 페이지에 표시할 수 있습니다. 위 섹션에서 사용한 것과 동일한 코드를 사용할 수 있습니다.
카메라에서 비디오를 가져오는 데 사용되는 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>
자바스크립트 코드:
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);
};
출력:
위의 코드를 실행하려면 test.html과 같은 .html 파일에 HTML 코드를 저장하고 script.js와 같은 JavaScript 파일에 JavaScript 코드를 저장해야 합니다.
<script> 태그를 사용하여 HTML 파일의 헤더 안에 script.js 파일과 opencv.js 파일을 포함해야 합니다.
위의 HTML 코드에서 defer 특성을 사용하여 스크립트 파일이 다른 콘텐츠보다 먼저 로드되도록 했습니다. <style> 태그를 사용하여 웹 페이지에 CSS 스타일을 추가했습니다.
위의 JavaScript 코드에서 OpenCV에 onRuntimeInitialized 함수를 사용하여 opencv.js가 사용되기 전에 초기화되었는지 확인했습니다.
