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を鋭意制作中です!もう少々お待ちください!!😉