Hatena::Grouporera

もし高校野球の女子マネージャーがOpera Browserを使ったら

logo
 | 

2011-10-19

ウェブカム API と本スタイル CSS

19:21

Labs 版が出てますね。

2つの機能を試すことができるそうです。一つは navigator.getUserMedia メソッド。ウェブカム API です。もしかしたらマイクも使えるのかも。

Android 版 Opera では3月から既に使えてましたが、デスクトップにも登場ということですね。

dev.opera.com にも解説記事が出ました。

// Replace the source of the video element with the stream from the camera
var video = document.getElementById('sourcevid');
if (navigator.getUserMedia) {
    navigator.getUserMedia('video', successCallback, errorCallback);
    function successCallback(stream) {
        video.src = stream;
    }
    function errorCallback(error) {
        console.error('An error occurred: [CODE ' + error.code + ']');
        return;
    }
} else {
    console.log('Native web camera streaming (getUserMedia) is not supported in this browser.');
    return;
}
Playing with HTML5 video and getUserMedia support - Dev.Opera

仕様はこれです。

上の例で一つおかしな点がありますね。successCallback に渡されるのは MediaStream オブジェクトで、これを直接 video.src に指定できるのはおかしいはずです。仕様に沿うなら video.src = URL.createObjectURL(stream) が正しいはず。どういうことなんでしょうか。


もう一つのお試し機能は、CSS Paged Media です。確かホーコンさんが前にデモしてたような記憶が。うろ覚え。

@media -o-paged {
  html { 
    height: 100%;
    overflow: -o-paged-x;
  }
}
Opera Reader: a new way to read the Web! - Dev.Opera

こんな感じで、あと CSS Multicol と組み合わせたりして簡単に本のような感じになるらしいです。

他にも -o- な CSS がいっぱい出てきてます。

@-o-navigation {
  nav-up: -o-url-doc(/);
  nav-down: url(a1.html);
  nav-right: -o-link-rel(next);
  nav-left: -o-go(back);          
}

↑こんなのあるんですけど、筋が悪いですね。CSS は見た目を定義するもので、構造を定義するのは HTML の仕事です。CSS に構造を持ち込むべきではないです。

トラックバック - http://orera.g.hatena.ne.jp/edvakf/20111019
 |