WebRTC Meetup Tokyo #7 のLT資料です

1. WebRTC Meetup Tokyo #7 LT

2. 自己紹介
2015/3/12 WebRTC Meetup Tokyo #7 2
仲 裕介/なか ゆうすけ/@Tukimikage
 所属
 NTTコミュニケーションズ
 オフィシャルワーク
 HTML5 Experts.jp 副編集長
 WebRTC開発者向けフレームワーク「SkyWay」の開発
 コミュニティワーク
 WebRTC Meetup Tokyo主催
 html5j 自動車部部長、エンタープライズ部スタッフ

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

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. ところで、あわせてこんなコー
ド書きますよね？
2015/3/12 WebRTC Meetup Tokyo #7 5

6. 2015/3/12 WebRTC Meetup Tokyo #7 6
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
まだベンダープレフィックス付いている。

7. つまり、ブラウザごとに使える
機能が違うんです。
2015/3/12 WebRTC Meetup Tokyo #7 7

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. 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. 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. 実際に使えるのか（その１）
 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. 実際に使えるのか（その２）
 aspectRatio
2015/3/12 WebRTC Meetup Tokyo #7 12
ブラウザ 対応状況
Chrome ☓
Firefox ☓
WidthとHeightを調整することで実現可能
引用元：https://webrtchacks.com/how-to-figure-out-webrtc-camera-resolutions/

13. 実際に使えるのか（その３）
 frameRate
2015/3/12 WebRTC Meetup Tokyo #7 13
ブラウザ 対応状況
Chrome ○
Firefox ☓
video: {
mandatory: {
minFrameRate: 10
maxFrameRate: 30
}
}

14. 実際に使えるのか（その４）
 facingMode
2015/3/12 WebRTC Meetup Tokyo #7 14
ブラウザ 対応状況
Chrome ☓
Firefox ☓
video: {
mandatory: {
facingMode: “front”
}
}
＊MediaStreamTrack.getSourcesでカメラのデバイスIDを取得すれば、
切り替えることは可能らしい

15. Firefoxで使えなくてえーって思いました？
2015/3/12 WebRTC Meetup Tokyo #7 15

16. ・Firefoxは about:config を変更して下さい
・アドオン作ると便利です
2015/3/12 WebRTC Meetup Tokyo #7 16

17. 2015/3/12 WebRTC Meetup Tokyo #7 17
引用元：https://webrtchacks.com/how-to-figure-out-webrtc-camera-resolutions/

18. ありがとうございました！
2015/3/12 WebRTC Meetup Tokyo #7 18