WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう

いろんなユーザメディアを
使ってみよう
2015.08.03
WebRTC Meetup Tokyo #9
インフォコム株式会社
がねこまさし
@massie_g
1

いろんなユーザメディアを
使ってみよう
2015.08.03
WebRTC Meetup Tokyo #9
インフォコム株式会社
がねこまさし
@massie_g
2
メディアストリーム

今日のお話は、ここ！
3
PeerConnectionMediaStream
Chrome 44
Firefox 39 Firefox Nightly 42

おまじない
5
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;

カメラ
6
function startCamera() {
var gum = {video: true, audio: false};
navigator.getUserMedia(gum,
showMedia, errCallback
);
}
function showMedia(stream) {
localStreamURL = window.URL.createObjectURL(stream);
localVideo.src = localStreamURL;
}

マイク
7
function startMic() {
var gum = {video: false, audio: true};
);
}
localVideo.src = localStreamURL; // ※本来はaudioを使う
}

カメラ+マイク
8
var gum = {video: true, audio: true};
);
}
}

カメラ+マイク MS Edge
9
// New API
navigator.mediaDevices.getUserMedia(
{video: true, audio: false}
).then(function(stream) {
video.srcObject = stream;
}).catch(function(err){
console.error('getUserMedia Err:', err);
});
}

カメラ+マイク MS Edge
10
// Old API
navigator. getUserMedia(
{video: true, audio: false},
function(stream) {
video.src = window.URL.createObjectURL(stream);
},
function(err){
console.error('getUserMedia Err:', err);
}
);
}

Fake カメラ
11
var gum = {video: true, fake: true, audio: false};
);
}
}

Fake マイク
12
var gum = {video: false, fake: true, audio: true};
);
}
}

スクリーン/ウィンドウキャプチャ
13
• Chromeでは、機能拡張(Extension)が必要
– http://www.slideshare.net/yusukenaka52/screenshare-public
• https:// を使う
ブラウザ側
var extensionId = ”xxxxxxxxxxxxxxxxxxxxxxxxxxxx"; // extension id
chrome.runtime.sendMessage(extensionId, { getStream: true},
function(response) {
navigator.getUserMedia({
audio:false, // ※Audioと一緒には取得できない
video: { mandatory: { chromeMediaSource: "desktop",
chromeMediaSourceId: response.mediaid,
maxWidth : width, maxHeight : height }
}
}, successCallback, errorCallback);
}
);

スクリーン/ウィンドウキャプチャ
14
• ※注意：audioと一緒には取得できない
PeerConnection
MediaStream
MediaStream
PeerConnectionMediaStream
MediaStreamTrack
MediaStreamTrack
MediaStream

スクリーンキャプチャ
15
• Firefoxでは、about:configの設定で利用可能
• media.getusermedia.screensharing.enabled を新規に作成
– true に設定
• media.getusermedia.screensharing.allowed_domains
– 自分のサーバーのドメイン名、IPアドレスを追記
• https:// を使う

スクリーンキャプチャ
16
function startFirefoxScreen () {
var gum = {video: { mediaSource: "screen" }, audio: false};
// audio: true も可
);
}
}

ウィンドウキャプチャ
17
function startFirefoxScreen () {
var gum = {video: { mediaSource: "window" }, audio: false};
);
}
}

WebAudio oscillator
18
var context = new (window.AudioContext || window.webkitAudioContext)();
function startWebAudio() {
var oscillator = context.createOscillator();
oscillator.type = "sawtooth";
oscillator.frequency.value = 440; // 440Hz
// convert to mediastream
var destintation = context.createMediaStreamDestination();
oscillator.connect(destintation);
// start
var current = context.currentTime;
oscillator.start(current); // start now
oscillator.stop(current + 3.0); // stop 3 sec after
// show
showMedia(destintation.stream);
}

WebAudio from file (1)
19
var context = new (window.AudioContext || window.webkitAudioContext)();
// load file via XHR
function loadSound(file, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", file, true);
xhr.responseType = "arraybuffer";
xhr.onreadystatechange=function(){ // OK for Chrome, Safari
if(xhr.readyState==4 && xhr.status==200){
console.log('xhr.readystate 200');
context.decodeAudioData(xhr.response,function(buf){
callback(buf);
}, function(){console.error('decode error');});
}
}
xhr.send();
}

WebAudio from file (2)
20
function startWebAudioFile() {
var audioclip;
loadSound('http://yourserver.com/sound.mp3',
function(buf) {
audioclip = buf;
var src = context.createBufferSource();
src.buffer = audioclip;
var destintation = context.createMediaStreamDestination();
src.connect(destintation);
src.start(0);
// show
showMedia(destintation.stream);
}
);
}

Canvasキャプチャ
21
• Firefox Nightlyで簡易実装。about:configの設定で利用可能
• canvas.capturestream.enabled
– true に設定
• https:// を使う ← http:// でも OK

22
function startCanvas() {
localStream = canvas.captureStream(10); // FPS(必須)
if (localStream) {
localStreamURL = URL.createObjectURL(localStream);
}
}

23
function startCanvas() {
localStream = canvas.captureStream(10); // FPS(必須)
if (localStream) {
localStreamURL = URL.createObjectURL(localStream);
}
}
MediaRecorder と組み合わせて使いたいらしい

メディアソース一覧 Chrome
function getChromeMediaSource() {
MediaStreamTrack.getSources(function(sourceInfos) {
for (var i = 0; i != sourceInfos.length; ++i) {
var sourceInfo = sourceInfos[i];
if (sourceInfo.kind === 'audio') {
var id = sourceInfo.id;
var label = sourceInfo.label || 'microphone'; // label is available for https
// 適宜処理する
}
else if (sourceInfo.kind === 'video') {
var id = sourceInfo.id;
var label = sourceInfo.label || 'camera'; // label is available for https
} else {
console.log('Some other kind of source: ', sourceInfo);
}
}
});
25

デバイス一覧Firefox, Edge
function getDevices() {
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
devices.forEach(function(device) {
console.log(device.kind + ": " + device.label + " id = " + device.deviceId);
if (device.kind === 'audioinput') {
var id = device.deviceId;
var label = device.label || 'microphone'; // label is available for specific domain with https
}
else if (device.kind === 'videoinput') {
var id = device.deviceId;
var label = device.label || 'camera'; // label is available for specific domain with https
}
});
})
.catch(function(err) {
console.log(err.name + ": " + error.message);
});
}
26

なんちゃってデジタルズーム
28
<video>
<div style="overflow: hidden;">

WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう

More Related Content

Viewers also liked

Similar to WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう

More from mganeko

WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう