patorashのブログ

方向性はまだない

DartでFullscreen APIを実行する

Darthtml5のFullscreen APIを実行したいと思ったのですが、メソッドがあるにも関わらず、どうにも動きませんでした。

import 'dart:html' as dom;

main() {
  var canvas = dom.querySelector('#canvas--fullscreen');
  canvas.requestFullscreen(); // 動かない!
}

ベンダープレフィックスが必要

html5のFullscreen APIは、まだベンダープレフィックス(webkitとかmsとか)が必要な状態で、JavaScriptであっても単純には呼べないようです。JavaScriptだと、webkitRequestFullscreenとかのメソッドがあるのですが、Dartdart:htmlパッケージには1つしかありません(requestFullscreenのみ)。

DartからJavaScriptのメソッドを呼び出す

リフレクションのような形になりますが、dart:jsパッケージを使って、ElementJsObjectに変換し、callMethodメソッドを使ってベンダープレフィックスのついているメソッドを呼び出すようです。

import 'dart:html' as dom;
import 'dart:js';

/// フルスクリーンで表示します。
/// 
/// [element]のFullscreen APIを呼び出します。
/// [参考URL](https://stackoverflow.com/questions/29714889/how-to-request-fullscreen-in-compiled-dart)
void fullscreenWorkaround(dom.Element element) {
  var elem = new JsObject.fromBrowserObject(element);
  if (elem.hasProperty("requestFullscreen")) {
    elem.callMethod("requestFullscreen");
  } else {
    List<String> vendors = ['moz', 'webkit', 'ms', 'o'];
    for (String vendor in vendors) {
      String vendorFullscreen = "${vendor}RequestFullscreen";
      if (vendor == 'moz') {
        vendorFullscreen = "${vendor}RequestFullScreen";
      }
      if (elem.hasProperty(vendorFullscreen)) {
        elem.callMethod(vendorFullscreen);
        return;
      }
    }
  }
}

main() {
  var canvas = dom.querySelector('#canvas--fullscreen');
  fullscreenWorkaround(canvas); // 動く!
}

このあたりの処理もrequestFullscreenメソッドに実装してくれて透過的に扱えたらいいのになぁと思いました。