Dartでhtml5のFullscreen APIを実行したいと思ったのですが、メソッドがあるにも関わらず、どうにも動きませんでした。
import 'dart:html' as dom; main() { var canvas = dom.querySelector('#canvas--fullscreen'); canvas.requestFullscreen(); // 動かない! }
ベンダープレフィックスが必要
html5のFullscreen APIは、まだベンダープレフィックス(webkitとかmsとか)が必要な状態で、JavaScriptであっても単純には呼べないようです。JavaScriptだと、webkitRequestFullscreen
とかのメソッドがあるのですが、Dartのdart:htmlパッケージには1つしかありません(requestFullscreen
のみ)。
DartからJavaScriptのメソッドを呼び出す
リフレクションのような形になりますが、dart:jsパッケージを使って、Element
をJsObject
に変換し、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メソッドに実装してくれて透過的に扱えたらいいのになぁと思いました。