WebRTCでWebカメラからHTMLに動画表示 + キャプチャー
Displaying and Capturing Video from Web Camera to HTML with WebRTC
WebRTC（Web Real-Time Communication）を試す。
2017年11月12日のポスト「WebRTCでWebカメラからHTMLに動画表示/ビデオキャプチャー」のアップデート版です。iOS11からWebRTCがモバイルSafariに対応したので、Webカメラ（ウェブカム）を使いカメラに写っている動画をHTMLに表示/ビデオキャプチャーするデモを2017年11月に制作いたしました。その後、デモに使用していたJavaScriptのnavigator.getUserMedia()メソッドが非推奨となり、iOSやMac/PCのSafari等では動画は表示できなかったのですが、今回navigator.getUserMedia()メソッドの代替である新しいMediaDevices.getUserMedia()メソッドを使用してデモを作り直しました。音声はオフにしていますが、PC・タブレット・スマートフォンでフロントカメラ、リアカメラの動画/画像をHTMLに表示させ、PCの場合は「Capture」ボタンを押すと画像のダウンロードも可能にしています（モバイルデバイスは不可）。CSSフィルターと組み合わせた動画/画像をお楽しみください。
Front Camera + CSS Filter
フロントカメラ + CSSフィルター
ブラー
色相回転
明るさ
彩度
階調反転
透明度
コントラスト
グレースケール
セピア
Rear Camera + CSS Filter
リアカメラ + CSSフィルター
ブラー
色相回転
明るさ
彩度
階調反転
透明度
コントラスト
グレースケール
セピア
Code Example
コード例
HTML
<!doctype html>
<html lang="ja">
<style>
#video {
display: block;
width: 100%;
}
</style>
<head>
<title>タイトル</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<video id="video" autoplay playsinline></video>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
JavaScript
// フロントカメラの場合:
var constraints = { audio: false, video: { facingMode: "user" } };
// リアカメラの場合:
var constraints = { audio: false, video: { facingMode: { exact: "environment" } } };
navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
var video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
})
// エラーの確認:
.catch(function(err) { console.log(err.name + ": " + err.message); });
Credits
- Webデザイン Web開発 WebRTC コーディング
- 嘉良戸 照造（AEDI株式会社）
