Mais conteúdo relacionado Semelhante a WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう Semelhante a WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう (20) 5. カメラ
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;
}
6. マイク
7
function startMic() {
var gum = {video: false, audio: true};
navigator.getUserMedia(gum,
showMedia, errCallback
);
}
function showMedia(stream) {
localStreamURL = window.URL.createObjectURL(stream);
localVideo.src = localStreamURL; // ※本来はaudioを使う
}
7. カメラ+マイク
8
function startCamera() {
var gum = {video: true, audio: true};
navigator.getUserMedia(gum,
showMedia, errCallback
);
}
function showMedia(stream) {
localStreamURL = window.URL.createObjectURL(stream);
localVideo.src = localStreamURL;
}
8. カメラ+マイク MS Edge
9
// New API
function startCamera() {
navigator.mediaDevices.getUserMedia(
{video: true, audio: false}
).then(function(stream) {
video.srcObject = stream;
}).catch(function(err){
console.error('getUserMedia Err:', err);
});
}
9. カメラ+マイク MS Edge
10
// Old API
function startCamera() {
navigator. getUserMedia(
{video: true, audio: false},
function(stream) {
video.src = window.URL.createObjectURL(stream);
},
function(err){
console.error('getUserMedia Err:', err);
}
);
}
10. Fake カメラ
11
function startMic() {
var gum = {video: true, fake: true, audio: false};
navigator.getUserMedia(gum,
showMedia, errCallback
);
}
function showMedia(stream) {
localStreamURL = window.URL.createObjectURL(stream);
localVideo.src = localStreamURL;
}
11. Fake マイク
12
function startMic() {
var gum = {video: false, fake: true, audio: true};
navigator.getUserMedia(gum,
showMedia, errCallback
);
}
function showMedia(stream) {
localStreamURL = window.URL.createObjectURL(stream);
localVideo.src = localStreamURL;
}
15. スクリーンキャプチャ
16
function startFirefoxScreen () {
var gum = {video: { mediaSource: "screen" }, audio: false};
// audio: true も可
navigator.getUserMedia(gum,
showMedia, errCallback
);
}
function showMedia(stream) {
localStreamURL = window.URL.createObjectURL(stream);
localVideo.src = localStreamURL;
}
16. ウィンドウキャプチャ
17
function startFirefoxScreen () {
var gum = {video: { mediaSource: "window" }, audio: false};
navigator.getUserMedia(gum,
showMedia, errCallback
);
}
function showMedia(stream) {
localStreamURL = window.URL.createObjectURL(stream);
localVideo.src = localStreamURL;
}
17. 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);
}
18. 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();
}
19. 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);
}
);
}
24. メディアソース一覧 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
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
