Hyperlapse.jsで400エラーが出るときの対応

概要

Hyperlapse.jsは、Google Street Viewからタイムラプスが作れるライブラリです。

参考記事

• Hyperlapseで環状八号線を南下する動画を Google ストリートビューからつくってみた
• GoogleのStreetViewを動画にするHyperlapseを使ってみる

エラー

タイムラプス作成途中で、画像が400エラーになってしまいました。解決方法は以下リンクにありました。

• simple.html does not work by Cross-Origin error · Issue #21 · TeehanLax/Hyperlapse.js

Hyperlapse.js/examples/js/GSVPano.jsの中にある、this.composePanoramaを以下のように変更します。エラーが起きた時も画像を返してやるように対処しています。

this.composePanorama = function (panoId) {

    this.setProgress(0);
    console.log('Loading panorama for zoom ' + _zoom + '...');

    var w = (_zoom==3) ? 7 : Math.pow(2, _zoom),
        h = Math.pow(2, _zoom - 1),
        self = this,
        url,
        x,
        y;

    _count = 0;
    _total = w * h;

    for( y = 0; y < h; y++) {
        for( x = 0; x < w; x++) {
            url = 'https://maps.google.com/cbk?output=tile&panoid=' + panoId + '&zoom=' + _zoom + '&x=' + x + '&y=' + y + '&' + Date.now();
            (function (x, y) { 
                var img = new Image();
                img.addEventListener('load', function () {
                    self.composeFromTile(x, y, this);
                });
                img.addEventListener('error', function () {
                    self.composeFromTile(x, y, new Image());
                });
                img.crossOrigin = 'anonymous';
                img.src = url;
            })(x, y);
        }
    }

};

以上。