WebRTCでWebカメラからHTMLに動画表示/ビデオキャプチャ

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に表示/ビデオキャプチャをご確認いただけます（音声はオフ）。

Front Camera

フロント（イン）カメラ

フロントカメラ（ノーマル表示）

Front Camera + CSS Filter

フロントカメラ – CSS フィルター（ブラー・色相回転・明る・彩度・階調反転・透明度・コントラスト・グレースケール・セピア）

Rear Camera

リア（バック/アウト）カメラ

リアカメラのあるPC、タブレット、スマホ等でご確認ください。

リアカメラ（ノーマル表示）

Rear Camera + CSS Filter

リアカメラ – CSS フィルター（ブラー・色相回転・明る・彩度・階調反転・透明度・コントラスト・グレースケール・セピア）

Code

フロントカメラ/リアカメラから動画（ノーマル）表示用のHTML、CSS、JavaScriptのコードを下記に記載いたします。

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); }); 


// 参照: 
MediaDevices.getUserMedia() - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia

Note: 現在、新しい弊社サイトAEDI V5を鋭意制作中です！もう少々お待ちください!!😉