Successfully reported this slideshow.
Your SlideShare is downloading. ×

getUserMedia

Ad

WebRTC Meetup Tokyo #7 LT

Ad

自己紹介
2015/3/12 WebRTC Meetup Tokyo #7 2
仲 裕介/なか ゆうすけ/@Tukimikage
 所属
 NTTコミュニケーションズ
 オフィシャルワーク
 HTML5 Experts.jp 副編集長
...

Ad

getUserMedia使ってますか?
2015/3/12 WebRTC Meetup Tokyo #7 3

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 18 Ad
1 of 18 Ad

More Related Content

getUserMedia

  1. 1. WebRTC Meetup Tokyo #7 LT
  2. 2. 自己紹介 2015/3/12 WebRTC Meetup Tokyo #7 2 仲 裕介/なか ゆうすけ/@Tukimikage  所属  NTTコミュニケーションズ  オフィシャルワーク  HTML5 Experts.jp 副編集長  WebRTC開発者向けフレームワーク「SkyWay」の開発  コミュニティワーク  WebRTC Meetup Tokyo主催  html5j 自動車部部長、エンタープライズ部スタッフ
  3. 3. getUserMedia使ってますか? 2015/3/12 WebRTC Meetup Tokyo #7 3
  4. 4. 2015/3/12 WebRTC Meetup Tokyo #7 4 navigator.getUserMedia({ audio: true, video: true },function(stream){ // Success Callback $('#video').prop('src', URL.createObjectURL(stream)); },function(error){ // Error Callback console.log(error); } ); Webブラウザでマイクやカメラが利用できる便利なアイツです。
  5. 5. ところで、あわせてこんなコー ド書きますよね? 2015/3/12 WebRTC Meetup Tokyo #7 5
  6. 6. 2015/3/12 WebRTC Meetup Tokyo #7 6 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; まだベンダープレフィックス付いている。
  7. 7. つまり、ブラウザごとに使える 機能が違うんです。 2015/3/12 WebRTC Meetup Tokyo #7 7
  8. 8. W3Cの仕様書での定義 2015/3/12 WebRTC Meetup Tokyo #7 8 partial interface NavigatorUserMedia { void getUserMedia( MediaStreamConstraints constraints, NavigatorUserMediaSuccessCallback successCallback, NavigatorUserMediaErrorCallback errorCallback ); };  Media Capture and Streams ー W3C Working Draft 12 February 2015
  9. 9. W3Cの仕様書での定義 2015/3/12 WebRTC Meetup Tokyo #7 9 dictionary MediaStreamConstraints { (boolean or MediaTrackConstraints) video = false; (boolean or MediaTrackConstraints) audio = false; }; callback NavigatorUserMediaSuccessCallback = void (MediaStream stream); callback NavigatorUserMediaErrorCallback = void (MediaStreamError error);
  10. 10. W3Cの仕様書での定義 2015/3/12 WebRTC Meetup Tokyo #7 10 dictionary MediaTrackConstraintSet { ConstrainLong width; //映像の横幅 ConstrainLong height; //映像の縦幅 ConstrainDouble aspectRatio; //映像のアスペクト比(4:3なら1.33とか) ConstrainDouble frameRate; //映像のフレームレート ConstrainDOMString facingMode; //カメラの選択 ConstrainDouble volume; //音声ボリューム ConstrainLong sampleRate; //サンプリングレート(44.1kHzとか) ConstrainLong sampleSize; //サンプリングサイズ(16bitとか) ConstrainBoolean echoCancellation; //エコーキャンセラーON/OFF ConstrainDOMString deviceId; //デバイスID ConstrainDOMString groupId; //グループID };
  11. 11. 実際に使えるのか(その1)  width / height 2015/3/12 WebRTC Meetup Tokyo #7 11 ブラウザ 対応状況 Chrome ○ Firefox ☓ デモサイト:http://simpl.info/getusermedia/constraints/ video: { mandatory: { minWidth: 320, minHeight: 180, maxWidth: 1280, maxHeight: 780, } }
  12. 12. 実際に使えるのか(その2)  aspectRatio 2015/3/12 WebRTC Meetup Tokyo #7 12 ブラウザ 対応状況 Chrome ☓ Firefox ☓ WidthとHeightを調整することで実現可能 引用元:https://webrtchacks.com/how-to-figure-out-webrtc-camera-resolutions/
  13. 13. 実際に使えるのか(その3)  frameRate 2015/3/12 WebRTC Meetup Tokyo #7 13 ブラウザ 対応状況 Chrome ○ Firefox ☓ video: { mandatory: { minFrameRate: 10 maxFrameRate: 30 } }
  14. 14. 実際に使えるのか(その4)  facingMode 2015/3/12 WebRTC Meetup Tokyo #7 14 ブラウザ 対応状況 Chrome ☓ Firefox ☓ video: { mandatory: { facingMode: “front” } } *MediaStreamTrack.getSourcesでカメラのデバイスIDを取得すれば、 切り替えることは可能らしい
  15. 15. Firefoxで使えなくてえーって思いました? 2015/3/12 WebRTC Meetup Tokyo #7 15
  16. 16. ・Firefoxは about:config を変更して下さい ・アドオン作ると便利です 2015/3/12 WebRTC Meetup Tokyo #7 16
  17. 17. 2015/3/12 WebRTC Meetup Tokyo #7 17 引用元:https://webrtchacks.com/how-to-figure-out-webrtc-camera-resolutions/
  18. 18. ありがとうございました! 2015/3/12 WebRTC Meetup Tokyo #7 18

×