HTML5의 WebRTC로 PC에 연결된 카메라 영상을 웹 브라우저에 표시하여 프레임 이미지를 저장하고 싶습니다.
PC에 연결된 카메라 영상을 웹 브라우저에 표시
【목적】
PC에 연결된 카메라의 영상을 분석하는 시스템을 개발한다.
HTML5와 javascript를 사용하여 심플하게 영상 취득,
스틸 이미지와 저장하고 싶습니다.
【기술】
개발 환경은 Windows10입니다. 영상은 가전 양판점에서 싸게 살 수 있다
USB 카메라를 USB 연결하여 사용합니다. USB 카메라의 영상
웹브라우저에 표시하고 정지영상으로 다운로드
저장할 수 있는지 확인할 때까지 갑니다. 이번에는 웹 서버
시작하지 않지만 서버에 소스를 넣으면,
브라우저의 보안 정책에 따라 URL 지정
그렇지 않으면 작동하지 않습니다. (이번에는 신경 쓸 필요가 없습니다)
시스템 구현
구현은 HTML5에서 WebRCT(Web Real-Time Communication)를 사용합니다.
기본 javascript 언어에 대한 지식도 필요합니다.
※ MediaDevices.getUserMedia() 의 사용법은 아래를 참조.
htps : //에서 ゔぇぺぺr. 어쩌면. 오 rg / 그럼 / 드 cs / u b / 아피 / 나 ぃ가와 r / 굳이 r 메아
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>getUserMedia-Demo</title>
</head>
<body>
<!-- カメラ映像が描画されます。 -->
<video id="video_area" style="background-color: #000" autoplay></video>
<!-- 押下するとカメラ映像描画を開始します。 -->
<button id="start_btn">映像表示開始</button>
</body>
<script>
// getUserMedia が使えないときは、『getUserMedia()が使えないブラウザだよ』と言ってね。
if (typeof navigator.mediaDevices.getUserMedia !== 'function') {
const err = new Error('getUserMedia()が使えないブラウザだよ');
alert(`${err.name} ${err.message}`);
throw err;
}
// 操作する画面エレメント変数定義します。
const $start = document.getElementById('start_btn'); // スタートボタン
const $video = document.getElementById('video_area'); // 映像表示エリア
// 「スタートボタン」を押下で、getUserMedia を使って映像を「映像表示エリア」に表示するよ。
$start.addEventListener('click', () => {
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(stream => $video.srcObject = stream)
.catch(err => alert(`${err.name} ${err.message}`));
}, false);
</script>
</html>
위의 HTML을 'camdemo.html'이라는 이름으로 UTF-8 인코딩으로 저장합니다.
USB 카메라가 연결된 PC에서 Chrome 브라우저에서 직접 열어보세요.
"영상 표시 시작"버튼을 누릅니다.
카메라를 사용하므로 "허용"합니다.
예, 영상이 표시되었습니다.
영상은 정지 영상이 아니라 동영상 영상으로 표시됩니다.
영상에서 정지영상(컷 이미지)을 캔버스 영역에 표시합니다.
영상의 컷 이미지를 화면상의 다른 영역에 정지화면으로 표시하는 코드를 추가해 갑니다.
구현은 간단합니다.
1. 스틸 이미지 캡처 버튼을 추가합니다.
2. 캡처한 스틸 이미지를 표시할 영역을 추가합니다.
3. (1.) 버튼을 눌러 (2.) 영역에 이미지를 표시하는 코드를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>getUserMedia-Demo</title>
</head>
<body>
<!-- カメラ映像が描画されます。 -->
<video id="video_area" style="background-color: #000" autoplay></video>
<!-- 押下するとカメラ映像描画を開始します。 -->
<button id="start_btn">映像表示開始</button>
<!-- 押下するとカメラ映像から静止画をキャプチャします。 -->
<button onclick="copyFrame()">静止画取得</button>
<!-- キャプチャした静止画が描画されます。 -->
<canvas id="capture_image"></canvas>
</body>
<script>
// getUserMedia が使えないときは、『getUserMedia()が利用できないブラウザです！』と言ってね。
if (typeof navigator.mediaDevices.getUserMedia !== 'function') {
const err = new Error('getUserMedia()が利用できないブラウザです！');
alert(`${err.name} ${err.message}`);
throw err;
}
// 操作する画面エレメント変数定義します。
const $start = document.getElementById('start_btn'); // スタートボタン
const $video = document.getElementById('video_area'); // 映像表示エリア
// 「スタートボタン」を押下したら、getUserMedia を使って映像を「映像表示エリア」に表示してね。
$start.addEventListener('click', () => {
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(stream => $video.srcObject = stream)
.catch(err => alert(`${err.name} ${err.message}`));
}, false);
// 「静止画取得」ボタンが押されたら「<canvas id="capture_image">」に映像のコマ画像を表示します。
function copyFrame() {
var canvas_capture_image = document.getElementById('capture_image');
var cci = canvas_capture_image.getContext('2d');
var va = document.getElementById('video_area');
canvas_capture_image.width = va.videoWidth;
canvas_capture_image.height = va.videoHeight;
cci.drawImage(va, 0, 0); // canvasに『「静止画取得」ボタン』押下時点の画像を描画。
}
</script>
</html>
스틸 이미지 획득 버튼을 누릅니다.
「스틸 이미지 취득」버튼을 누른 순간의 영상이 복사되었습니다.
정지영상이므로, 영상이 변화해도 한 번 캡쳐한 영상은 변하지 않습니다.
다시 "스틸 이미지 획득"버튼을 누르면 스틸 이미지도 업데이트됩니다.
스틸 이미지의 이미지 위에서 마우스 오른쪽 버튼으로 "다른 이름으로 이미지 저장"할 수 있습니다.
Windows 표준 페인트로 열어 보았습니다. 이런 느낌입니다.
또, 「toDataURL() 메소드」를 사용해 이미지를 소정의 명칭으로 다운로드 보존시킬 수도 있습니다.
그것은 또한 다음에.
이상입니다.
Reference
이 문제에 관하여(HTML5의 WebRTC로 PC에 연결된 카메라 영상을 웹 브라우저에 표시하여 프레임 이미지를 저장하고 싶습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/qiita_mona/items/e58943cf74c40678050a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>getUserMedia-Demo</title>
</head>
<body>
<!-- カメラ映像が描画されます。 -->
<video id="video_area" style="background-color: #000" autoplay></video>
<!-- 押下するとカメラ映像描画を開始します。 -->
<button id="start_btn">映像表示開始</button>
</body>
<script>
// getUserMedia が使えないときは、『getUserMedia()が使えないブラウザだよ』と言ってね。
if (typeof navigator.mediaDevices.getUserMedia !== 'function') {
const err = new Error('getUserMedia()が使えないブラウザだよ');
alert(`${err.name} ${err.message}`);
throw err;
}
// 操作する画面エレメント変数定義します。
const $start = document.getElementById('start_btn'); // スタートボタン
const $video = document.getElementById('video_area'); // 映像表示エリア
// 「スタートボタン」を押下で、getUserMedia を使って映像を「映像表示エリア」に表示するよ。
$start.addEventListener('click', () => {
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(stream => $video.srcObject = stream)
.catch(err => alert(`${err.name} ${err.message}`));
}, false);
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>getUserMedia-Demo</title>
</head>
<body>
<!-- カメラ映像が描画されます。 -->
<video id="video_area" style="background-color: #000" autoplay></video>
<!-- 押下するとカメラ映像描画を開始します。 -->
<button id="start_btn">映像表示開始</button>
<!-- 押下するとカメラ映像から静止画をキャプチャします。 -->
<button onclick="copyFrame()">静止画取得</button>
<!-- キャプチャした静止画が描画されます。 -->
<canvas id="capture_image"></canvas>
</body>
<script>
// getUserMedia が使えないときは、『getUserMedia()が利用できないブラウザです！』と言ってね。
if (typeof navigator.mediaDevices.getUserMedia !== 'function') {
const err = new Error('getUserMedia()が利用できないブラウザです！');
alert(`${err.name} ${err.message}`);
throw err;
}
// 操作する画面エレメント変数定義します。
const $start = document.getElementById('start_btn'); // スタートボタン
const $video = document.getElementById('video_area'); // 映像表示エリア
// 「スタートボタン」を押下したら、getUserMedia を使って映像を「映像表示エリア」に表示してね。
$start.addEventListener('click', () => {
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(stream => $video.srcObject = stream)
.catch(err => alert(`${err.name} ${err.message}`));
}, false);
// 「静止画取得」ボタンが押されたら「<canvas id="capture_image">」に映像のコマ画像を表示します。
function copyFrame() {
var canvas_capture_image = document.getElementById('capture_image');
var cci = canvas_capture_image.getContext('2d');
var va = document.getElementById('video_area');
canvas_capture_image.width = va.videoWidth;
canvas_capture_image.height = va.videoHeight;
cci.drawImage(va, 0, 0); // canvasに『「静止画取得」ボタン』押下時点の画像を描画。
}
</script>
</html>
Reference
이 문제에 관하여(HTML5의 WebRTC로 PC에 연결된 카메라 영상을 웹 브라우저에 표시하여 프레임 이미지를 저장하고 싶습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/qiita_mona/items/e58943cf74c40678050a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
