(作業メモ 20260202) cutycapt を利用する

e-Learning の教材の話です。教材のファイルに，それ自身をブラウザで表示したときのキャプチャーを含めたいと思います。以前に利用した puppeteer を使用しようと考えましたが，うまくいきません。SCORM ファイルの書き出しの時に，キャプチャー画像を潜りこませようと思います。教材を作成するツールは WEBアプリなので，サーバー側で（www-dataで）puppeteer を実行することになるのですが，これが以前は何とかなったのですけど，今の環境(ubuntu24)では，うまく動かすことができません。

例えば，下記の内容のコード（html-to-jpeg.js）を書いて

const puppeteer = require('/usr/local/lib/node_modules/puppeteer');

const fs = require('fs');
const path = '/var/www/.cache/puppeteer';

// Launch Puppeteer with a custom cache path

async function launchBrowser() {
    //ensureCacheDirectory();
    const browser = await puppeteer.launch({
        headless: true,
        executablePath: '/snap/bin/chromium',
        userDataDir: path,
        args: ['--no-sandbox', '--disable-setuid-sandbox'],
    });
    return browser;
}

(async () => {
  const browser = await launchBrowser();
  const page = await browser.newPage();
  await page.goto('https://techblog.recruit.co.jp/article-1119/'); // ここに変換したいHTMLのURLを入力
  // Set screen size.
  await page.setViewport({width: 1920, height: 1200});

  await page.screenshot({path: './output.png', type: 'png'});
  await browser.close();
})();

上記を，下のようなコマンドで実行します。

sudo -u www-data node ./html-to-jpeg.js

そうすると，以下のようなエラーとなります。

Error: Failed to launch the browser process:  Code: 1

stderr:
/user.slice/user-1000.slice/user@1000.service/app.slice/app-org.gnome.Terminal.slice/vte-spawn-0a7f94f1-c80e-4d78-bcd3-effd21224d11.scope is not a snap cgroup for tag snap.chromium.chromium

snap が導入されたことが関係しているのか，cgroup というのはコントロールグループということの様ですが，ブラウザを起動するのに権限が足りないと言っているのではないかと思います。これが解決できない。snap 版ではないgoogle-chrome も試してみたのですが，やはり起動できませんでした。

ブラウザ画面のキャプチャーができればよいので，puppeteer をあきらめて，他のツールを試してみました。それは cutycapt というものなのですが，WebKitエンジンを利用したものだそうです。cutycapt と xvfb を導入します。

sudo apt-get install cutycapt
sudo apt-get install xvfb

他に，日本語フォントなども必要だとのことですが，ubuntu desktop 環境なので，それはすでに有ったようです。上記だけで動きました。使用するコマンドは下記のようなものです。ひとつながりの命令です。

xvfb-run --server-args="-screen 0, 1280x1024x24" cutycapt --url=https://www.google.com --out=./tmp/google.png --delay=3000

3 秒待つというのが入っています。上記は www-data で実行可能でした。このページの冒頭の画像はこのコマンドの返事です。次回のサーバーのセットアップの時に，これらを導入することを忘れないようにしないと。

参考サイト