「すばらしい！」と言われて嬉しかったのでブログを書くメソッド。
@agektmr エージさんが考えたgUM用の{video: true, audio: true, toString: function(){return 'video audio';}、すばらしい！元々のブログポストやgistへのリンクがありますか。
@ourmaninjapan おっとこれを考えたのは僕じゃないです。 @kanasan です
@agektmr Ah, ごめん.間違いました。 @kanasan のブログとかにあるかな。
以前、WebRTCのエントリーを書いた時に指摘があった。
webkitGetUserMediaの仕様が変わってるので僕のCanaryではデモが動かないでござる
それまで第一引数が文字列だった getUserMedia(Chromeは現バージョンではベンダープレフィックス付のwebkitGetUserMedia) の仕様が、最新のものではオブジェクトを指定するように変更されたとのこと。
//old
navigator.getUserMedia(
"video, audio",
function(stream){/*onSuccess*/},
function(e){/*onError*/}
);
//new
navigator.getUserMedia(
{audio : true, video : true},
function(stream){/*onSuccess*/},
function(e){/*onError*/}
);
navigator.getUserMedia(
"video, audio",
function(stream){/*onSuccess*/},
function(e){/*onError*/}
);
//new
navigator.getUserMedia(
{audio : true, video : true},
function(stream){/*onSuccess*/},
function(e){/*onError*/}
);
Chromeのdev版の実装が新しい仕様になったため、文字列指定では動かない。
オブジェクトを指定すると現行バージョンのChromeだと当然のようにエラーに...。
なんとなく、第一引数のオブジェクトに、試しにtoStringを加えてみた。
オブジェクトを指定すると現行バージョンのChromeだと当然のようにエラーに...。
なんとなく、第一引数のオブジェクトに、試しにtoStringを加えてみた。
navigator.getUserMedia(
{audio : true, video : true, toString : function(){return "video, audio";}},
function(stream){/*onSuccess*/},
function(e){/*onError*/}
);
{audio : true, video : true, toString : function(){return "video, audio";}},
function(stream){/*onSuccess*/},
function(e){/*onError*/}
);
なんとまあ、動くじゃないですか!
ということで、今だと以下のように書くとdev版を含めたChromeとOperaの仕様を吸収することができる。
ということで、今だと以下のように書くとdev版を含めたChromeとOperaの仕様を吸収することができる。
function attachUserMedia(videoElement) {
if ("getUserMedia" in navigator) {
navigator.getUserMedia(
{audio : true, video : true, toString : function(){return "video, audio";}},
function(stream) {
videoElement.src = stream;
},
function(e) {
console.log(err);
}
);
} else if ("webkitGetUserMedia" in navigator) {
navigator.webkitGetUserMedia(
{audio : true, video : true, toString : function(){return "video, audio";}},
function(stream) {
var url = webkitURL.createObjectURL(stream);
videoElement.src = url;
},
function(e) {
console.log(err);
}
);
} else {
console.log("nothing : user stream");
}
}
if ("getUserMedia" in navigator) {
navigator.getUserMedia(
{audio : true, video : true, toString : function(){return "video, audio";}},
function(stream) {
videoElement.src = stream;
},
function(e) {
console.log(err);
}
);
} else if ("webkitGetUserMedia" in navigator) {
navigator.webkitGetUserMedia(
{audio : true, video : true, toString : function(){return "video, audio";}},
function(stream) {
var url = webkitURL.createObjectURL(stream);
videoElement.src = url;
},
function(e) {
console.log(err);
}
);
} else {
console.log("nothing : user stream");
}
}
本当は try...catch... を使ったりしてもっとスマートに書けるんだけど、今後仕様がどう変わるのかわからないのと、別のブラウザがどう実装してくるのか不明なので冗長なままにしてある。