カメラ – HTML5Experts.jp https://html5experts.jp 日本に、もっとエキスパートを。 Sat, 07 Jul 2018 03:14:05 +0000 ja hourly 1 https://wordpress.org/?v=4.7.19 カメラを使ってみよう ーWebRTC入門2016 /mganeko/19728/ Fri, 24 Jun 2016 00:00:28 +0000 /?p=19728 連載： WebRTC入門2016 (1)

こんにちは！ がねこまさしです。2014年に連載した「WebRTCを使ってみよう！」シリーズですが、内容がすっかり古くなってしまいました。そこで2016年6月の最新情報に基づき、内容をアップデートして改めてお届けしたいと思います。

WebRTCとは？

WebRTCとは”Web Real-Time Communication”の略で、Webブラウザ上でビデオ/オーディオの通信や、データ通信を行うための規格です。HTML5で新しく策定されたもので、複数の技術の連携で成り立っています。 ちなみに策定には複数の団体が絡んでいています。

  • API → W3C
  • ビデオ/オーディオのコーデック → IETF

APIの策定作業はWebRTC 1.0に向けて大詰めに入っています。またより詳細な低レベルのAPIを定義しているORTCも登場し、将来の統合に向けた動きも始まっています。

コーデックの選定では、ブラウザがサポートしなければならないビデオコーデックに、既にデファクトスタンダードともいえるH.264が加わりました。また、Googleが開発しているオープンソースのビデオコーデック「VP9」をサポートするブラウザも増えています。

WebRTCで何ができるの？

WebRTCは厳密に言うとビデオ/オーディオ/データ通信を行うための仕組みですが、他にも関連が深い技術があります。この連載では3つをまとめてWebRTC（とその仲間たち）ということで扱います。

この3兄弟に、HTML5の様々な要素を組み合わせて活用することができます。

  • JavaScript（大前提）
  • videoタグ、audioタグ
  • CSS3
  • Canvas
  • WebGL
  • Web Audio API
  • WebSocket

新しいAPIでカメラを使ってみよう

カメラやマイクと言ったデバイスにアクセスするには、従来はnavigator.getUserMedia()というAPIを使いました。2016年6月現在では、これに代わる新しいAPIが登場しています。

  • navigator.mediaDevices.getUserMedia() になった
  • ベンダープレフィックスが取れた
  • コールバックではなくPromiseベースになった

またデスクトップブラウザの場合は次のブラウザで利用することができます。

  • Firefox 47 … 利用可能
  • Chrome 51 … 利用する場合にはフラグ設定が必要
    • chrome://flagsというURLを開く
    • 「試験運用版のウェブ プラットフォームの機能 #enable-experimental-web-platform-features」を有効に
    • Chromeを再起動
  • Edge 25 … Windows 10 のEdgeでも利用可能

サンプルコード

それではカメラから映像を取得してみましょう。サンプルコードはこちらです。 

<!doctype html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Camera with mediaDevice</title>
</head>
<body>
  <button onclick="startVideo()">Start</button>
  <br />
  <video id="local_video" autoplay style="width: 320px; height: 240px; border: 1px solid black;"></video>
</body>
<script type="text/javascript">
  let localVideo = document.getElementById('local_video');
  let localStream;
  
  // start local video
  function startVideo() {
    navigator.mediaDevices.getUserMedia({video: true, audio: false})
    .then(function (stream) { // success
      localStream = stream;
      localVideo.src = window.URL.createObjectURL(localStream);
    }).catch(function (error) { // error
      console.error('mediaDevice.getUserMedia() error:', error);
      return;
    });
  }
</script>
</html>

このHTMLファイルに、（Webサーバ経由で）ブラウザからアクセスしてみてください。GitHub Pagesでも公開していますので、すぐに試すことができます。

  • GitHub Pages で試す camera_new.html（※Chromeの場合は、上記のフラグ設定が必要です）
  • GitHub でソースを見る camera_new.html

ブラウザで[Start]ボタンをクリックすると、カメラへのアクセスの許可を求めるダイアログが表示されますので、許可してください。
Firefoxの場合 getusermedia_ff

Chromeの場合 getusermedia_chrome

Edgeの場合
getusermedia_edge
ウィンドウの下の部分にこのように表示されます。他のブラウザと違うので、ちょっと気が付きにくいかもしれません。

すると、このようにカメラの映像が表示されるはずです。 camera_ff

HTMLファイルの置き場所

カメラやマイクにアクセスするには、サンプルのHTMLファイルをWebサーバーに配置する必要がありますが、実はブラウザによって条件が異なります。

  • Chromeの場合 … 原則 https://～/ のみ。例外として http://localhost/～ でも利用可能
  • Firefoxの場合 … https://～/ および http://～/ の両方で利用可能。さらに file://～ でも利用可能
  • Edgeの場合 … https://～/ および http://～/ の両方で利用可能。さらに file://～ でも利用可能

FirefoxやEdgeの場合は、ローカルのHTMLファイルを直接読み込んでも、利用可能です。

トラブルシューティング

カメラのアクセスの許可を求められた際に「常に拒否」すると、そのサイトからはカメラの映像を取得することができなくなります。その場合は明示的に再許可してあげる必要があります。

Firefoxの場合getusermedia_ff_ngで「許可」または「毎回確認する」を選択

Chromeの場合getusermedia_chrome_ng「常に許可する」を選択

Edgeの場合
※いまのところ「常に拒否」することはできないようなので、このケースは発生しません。

新旧 getUserMedia() をラップしてみると

新しいAPIである navigator.mediaDevices.getUserMedia()は、まだChromeではデフォルトの状態では使えません。これは、引数で渡すオプションの指定方法が、まだ新しい書き方に沿っていないことが原因です。 

let deviceID = getSelectedIDsomehow(); // デバイスIDを指定する

// Firefoxの場合
let constraints = {
  audio: false,
  video: { 
   deviceId: {exact: deviceID}
  }
};

// Chromeの場合
let constraintsForChrome = {
  audio: false,
  video: {
    optional: [{sourceId: deviceID}]
  }
};

そのため、Chromeではしばらく新しいAPIはデフォルトでは使えない状態が続くと思われます。そこで古いAPIをPromise型にラップする例を用意してみました。（オプション指定の違いは吸収できていません） 

// --- prefix -----
  navigator.getUserMedia  = navigator.getUserMedia    || navigator.webkitGetUserMedia ||
                            navigator.mozGetUserMedia || navigator.msGetUserMedia;

  // ---- 新旧APIをPromiseでラップする ----
  function getDeviceStream(option) {
    if ('getUserMedia' in navigator.mediaDevices) {
      console.log('navigator.mediaDevices.getUserMadia');
      return navigator.mediaDevices.getUserMedia(option);
    }
    else {
      console.log('wrap navigator.getUserMadia with Promise');
      return new Promise(function(resolve, reject){    
        navigator.getUserMedia(option,
          resolve,
          reject
        );
      });      
    }
  }

  // 利用例
  function startVideo() {
    getDeviceStream({video: true, audio: false})
    .then(function (stream) { // success
      localStream = stream;
      localVideo.src = window.URL.createObjectURL(localStream);
    }).catch(function (error) { // error
      console.error('getUserMedia error:', error);
      return;
    });
  }

これを使ってカメラ映像を取得する例もご用意しました。Chrome 51でもデフォルトのままで利用できます。

様々なWebRTC関連のブラウザの違いを吸収する adapter.js が 本家のGitHubで公開されています。より便利に使いたい場合は、そちらをご利用ください。

CSS3と組み合わせてみよう

WebRTCは他の要素と組み合わせて使うことができると書きました。実際にCSS3と組み合わせてみましょう。

<!-- 通常 -->
  <video id="local_video" autoplay style="width: 320px; height: 240px; border: 1px solid black;"></video>

  <!-- 左右反転 -->
  <video id="flip_video" autoplay style="transform: scaleX(-1); width: 320px; height: 240px; border: 1px solid black;"></video>

  <!-- 角丸 -->
  <video id="round_video" autoplay style="border-radius: 80px 80px 80px 80px; width: 320px; height: 240px; border: 1px solid black;"></video>

  <!-- セピア -->
  <video id="filter_video" autoplay style="filter: sepia(100%); -webkit-filter: sepia(100%); width: 320px; height: 240px; border: 1px solid black;"></video>

ほかにも様々なバリエーションが考えられます。ぜひ自分でもいろいろ試してみてください。

また、CSS3アニメーションを使うこともできます。例えばこんな感じです。 

<!doctype html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Camera with mediaDevice</title>
 <style type="text/css">
   #rotate_video
   {
    animation-duration:4s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
    animation-name:rotate360;     
   }

   #shake_video
   {
    animation-duration:0.5s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
    animation-name:shake;     
   }
   
   @keyframes rotate360
   {
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
   }

   @keyframes shake
   {
    0%{transform:rotate(-20deg);}
    50%{transform:rotate(20deg);}
    100%{transform:rotate(-20deg);}
   }
  </style> 
</head>
<body>
  Camera with mediaDevice.getUserMedia()<br />
  <button onclick="startVideo()">Start</button>
  <br />
  <!-- 通常 -->
  <video id="local_video" autoplay style="width: 320px; height: 240px; border: 1px solid black;"></video>
  <br />

  <!-- 回転アニメーション -->
  <video id="rotate_video" autoplay style="width: 320px; height: 240px; border: 1px solid black;"></video>

  <!-- 振動アニメーション -->
  <video id="shake_video" autoplay style="width: 320px; height: 240px; border: 1px solid black;"></video>
  
</body>
<script type="text/javascript">
  // --- prefix -----
  navigator.getUserMedia  = navigator.getUserMedia    || navigator.webkitGetUserMedia ||
                            navigator.mozGetUserMedia || navigator.msGetUserMedia;

  let localVideo = document.getElementById('local_video');
  let localStream;
  
  // start local video
  function startVideo() {
    getDeviceStream({video: true, audio: false})
    .then(function (stream) { // success
      localStream = stream;
      localVideo.src = window.URL.createObjectURL(localStream);
	  
      document.getElementById('rotate_video').src = localVideo.src;
      document.getElementById('shake_video').src = localVideo.src;
    }).catch(function (error) { // error
      console.error('mediaDevice.getUserMedia() error:', error);
      return;
    });
  }

  // ---- 新旧APIをPromiseでラップする ----
  function getDeviceStream(option) {
    if ('getUserMedia' in navigator.mediaDevices) {
      console.log('navigator.mediaDevices.getUserMadia');
      return navigator.mediaDevices.getUserMedia(option);
    }
    else {
      console.log('wrap navigator.getUserMadia with Promise');
      return new Promise(function(resolve, reject){    
        navigator.getUserMedia(option,
          resolve,
          reject
        );
      });      
    }
  }
</script>
</html>

camera_css_animation

CSS3と組み合わせたサンプルも、GitHub Pagesでも公開していますので、試してみてください。（ラップ関数を使っているので、デフォルトのChrome 51でも利用できます）

次回は

今回は新しいAPIを使って、カメラの映像を取得してみました。次回はWebRTCによる通信を手動で接続してみます。

]]> HTML5でWebRTCを使ってみよう！「カメラを使ってみよう」編 /mganeko/5098/ Wed, 05 Feb 2014 01:00:04 +0000 /?p=5098 連載： WebRTCを使ってみよう！ (1)

こんにちは！ がねこまさしです。これから数回に渡って、WebRTCについて書かせていただきます。 内容は2013年10月にNode学園祭2013で発表したプレゼンを、再構成したものになる予定です。

※こちらの記事は2014年に書かれました。2016年6月現在のアップデート記事がありますので、そちらもご参照ください。

WebRTCとは？

WebRTCとは”Web Real-Time Communication”の略で、Webブラウザ上でビデオ/オーディオの通信や、データ通信を行うための規格です。HTML5で新しく策定されたもので、複数の技術の連携で成り立っています。 ちなみに策定には複数の団体が絡んでいています。

  • API → WWW
  • ビデオ/オーディオのコーデック → IETF

WebRTCで何ができるの？

WebRTCには大きく分けて2つの要素があります。

  • カメラ、マイクといったメディアへのアクセス(UserMedia)
  • Peer-to-Peer通信を行うための仕組み(RTCPeerConnection)

このほかにもHTML5の様々な要素と組み合わせて活用することができます。

  • JavaScript（大前提）
  • videoタグ、audioタグ
  • CSS3
  • Canvas
  • WebGL
  • Web Audio API
  • WebSocket

ユーザーメディアを使ってみよう

それでは、さっそく使ってみましょう。ユーザーメディアで一番わかりやすいカメラを使います。Webカメラと最新のChromeかFirefoxをご用意ください。
※今回はChrome 32, Firefox 26で動作確認しています。

<!doctype html>
<html>
 <head>
  <title>Self Camera</title>
 </head>
 <body>
   <video id="myVideo" width="400" height="300" autoplay="1" ></video>

   <script type="text/javascript">
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia;
    window.URL = window.URL || window.webkitURL;

    var video = document.getElementById('myVideo');
    var localStream = null;
    navigator.getUserMedia({video: true, audio: false}, 
     function(stream) { // for success case
      console.log(stream);
      video.src = window.URL.createObjectURL(stream);
     },
     function(err) { // for error case
      console.log(err);
     }
    );
   </script>
 </body>
</html>

こちらをお好きなWebサーバーに保存し、ChromeないしFirefoxでアクセスしてみてください。カメラにアクセスしても良いかどうか確認のダイアログが表示されますので、OKすればカメラの映像が表示されるはずです。
FireFoxの場合：firefox_getusermedia

Chromeの場合：chrome_getusermedia

上手く動けば、このように自分の顔が映ると思います。
chrome_selfcamera
※上手くいかない場合は、JavaScriptコンソールを表示してエラーを確認してくださいね。
ちなみに、HTMLをWebサーバーに置かずに直接開いた場合(file:// ～ )、Chromeではセキュリティ制限に引っかかりカメラにアクセスするこができません。FireFoxは現状の実装ではアクセスできるようです。

CSS3 と組み合わせてみる

WebRTCは他の要素と組み合わせて使うことができると、最初に書きました。実際にやってみましょう。
※コードを単純にするために、ここからはChrome用のコードを掲載します。Firefoxの場合は適宜プレフィックスを変更してください。 

<video id="myVideo" style="-webkit-transform: scaleX(-1);" width="400" height="300" autoplay="1" ></video>

このようにvideoタグを変更すると、左右反転した鏡の状態になります。この方が自分では見慣れた姿に映ります。skypeなど多くのビデオチャットアプリは、左右反転状態がデフォルトになっているものが多いようです。

ほかにも様々なバリエーションが考えられます。ぜひ自分でもいろいろ試してみてください。

<video id="myVideo" style="-webkit-transform: scaleY(-1);" width="400" height="300" autoplay="1" ></video>

<video id="myVideo" style="-webkit-transform: scaleX(0.5);" width="400" height="300" autoplay="1" ></video>

<video id="myVideo" style="-webkit-filter: sepia(80%);" width="400" height="300" autoplay="1" ></video>

CSS3のアニメーション機能も利用できます。たとえばこんな風に。

<!doctype html>
<html>
 <head>
  <title>Rotate Camera</title>
  <style type="text/css">
   #rotateVideo
   {
    position: absolute;
    -webkit-animation-duration:2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:rectRotate;     
   }
 
   @-webkit-keyframes rectRotate
   {
    0%{-webkit-transform:rotate(0deg);}
    99%,100%{-webkit-transform:rotate(360deg);}
   }
  </style>
 </head>
 <body>
   <video id="rotateVideo" width="400" height="300" autoplay="1" ></video>

   <script type="text/javascript">
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia;
    window.URL = window.URL || window.webkitURL;

    var video = document.getElementById('rotateVideo');
    navigator.getUserMedia({video: true, audio: false}, 
     function(stream) { // for success case
      console.log(stream);
      video.src = window.URL.createObjectURL(stream);
     },
     function(err) { // for error case
      console.log(err);
     }
    );
   </script>
 </body>
</html>

chrome_rotate

以上、ユーザメディア（カメラ）を使ってみました。次回は通信関連の要素についてご説明する予定です。

続編を読む

]]>