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

Facebookでシェア Twitterでシェア

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


CONTACT

お問い合わせ

AEDI株式会社

〒710-0801 岡山県倉敷市酒津2549-2

貴社のサービス・商品のブランディング、デザイン、ホームページでお困りのこと、お仕事のご依頼、お見積もり、デザイン、ホームページ制作、その他AEDIのご提供するサービスに関することでご質問等ございましたらお気軽にお問い合わせください。

お問い合わせフォームとお電話より承っております。

岡山のホームページ制作会社・デザイン会社 AEDI株式会社のデザイン事務所 岡山県倉敷市酒津2549-2

お電話でのお問い合わせ: 月-金 9:00〜18:00(祝日を除く)

070-2355-7367