preview needs working phantomjs and imagemagick

[bernhardreiter]

On commit a92b915bc373d8e3cb24ee73645f78702f106e61 (HEAD -> mnt, origin/mnt) a simple preview of the spaces failed, observation: permanently running spinner.

Log showed a problem with phantomjs. Analysis (on Debian Buster) with

DEBUG=node-phantomjs* node spacedeck.js

and the first line of the following section to spacedeck-open-git/node_modules/node-phantom-simple/node-phantom-simple.js

    logger.debug('setting up phantom = spawn('+ options.path + ',' + args + ')');
    var phantom = spawn(options.path, args);

$ spacedeck-open-git/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs spacedeck-open-git/node_modules/node-phantom-simple/bridge.js
error while loading shared libraries: libfontconfig.so.1: cannot open shared object file: No such file or directory

so on Debian Buster at least the package libfontconfig1 is needed as optional requirement.

And the next error is

[space screenshot] resize error:  Error: Could not execute GraphicsMagick/ImageMagick: gm "identify" "-ping" "-format" "%[EXIF:Orientation]" "/tmp/b2bff430-9594-4ac5-bfe1-6e6d41436e6b.png" this most likely means the gm/convert binaries can't be found

hinting towards the need of package imagemagick

[bernhardreiter]

But with imagemagick it runs into https://github.com/aheckmann/gm/issues/669

[mntmn]

Try to install graphicsmagick, not imagemagick.

[bernhardreiter]

Yep, works with graphicsmagick (though leaving a page does not seem to retrigger thumbnail production right away).

[mntmn]

Yeah, the way the previews are updated is less than ideal.

[zeigerpuppy]

this error is still present in the docker build (even with graphicsmagick installed)

thumbnails don't build

spacedeck-ga | [2020-08-18T11:00:18.728Z] [space-screenshot] url: http://localhost:9666/api/spaces/dcaa557b-fd61-4e97-8122-71d20f3b8bad/html?api_token=########
spacedeck-ga | [2020-08-18T11:00:18.728Z] [space-screenshot] export_path: /tmp/dcaa557b-fd61-4e97-8122-71d20f3b8bad.png
spacedeck-ga | [2020-08-18T11:00:18.738Z] Executing (default): UPDATE `spaces` SET `thumbnail_updated_at`='2020-08-18 11:00:18.728 +00:00',`updatedAt`='2020-08-18 11:00:18.728 +00:00' WHERE `_id` = 'dcaa557b-fd61-4e97-8122-71d20f3b8bad'
spacedeck-ga | [2020-08-18T11:00:18.740Z] { Error: spawn /app/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs ENOENT
spacedeck-ga |     at Process.ChildProcess._handle.onexit (internal/child_process.js:240:19)
spacedeck-ga |     at onErrorNT (internal/child_process.js:415:16)
spacedeck-ga |     at process._tickCallback (internal/process/next_tick.js:63:19)
spacedeck-ga |   errno: 'ENOENT',
spacedeck-ga |   code: 'ENOENT',
spacedeck-ga |   syscall:
spacedeck-ga |    'spawn /app/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs',
spacedeck-ga |   path:
spacedeck-ga |    '/app/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs',
spacedeck-ga |   spawnargs: [ '/app/node_modules/node-phantom-simple/bridge.js' ] }
spacedeck-ga | GET /images/favicon.png 200 9.386 ms - 1425

[schmelly]

this error is still present in the docker build (even with graphicsmagick installed)

thumbnails don't build

spacedeck-ga | [2020-08-18T11:00:18.728Z] [space-screenshot] url: http://localhost:9666/api/spaces/dcaa557b-fd61-4e97-8122-71d20f3b8bad/html?api_token=########
spacedeck-ga | [2020-08-18T11:00:18.728Z] [space-screenshot] export_path: /tmp/dcaa557b-fd61-4e97-8122-71d20f3b8bad.png
spacedeck-ga | [2020-08-18T11:00:18.738Z] Executing (default): UPDATE `spaces` SET `thumbnail_updated_at`='2020-08-18 11:00:18.728 +00:00',`updatedAt`='2020-08-18 11:00:18.728 +00:00' WHERE `_id` = 'dcaa557b-fd61-4e97-8122-71d20f3b8bad'
spacedeck-ga | [2020-08-18T11:00:18.740Z] { Error: spawn /app/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs ENOENT
spacedeck-ga |     at Process.ChildProcess._handle.onexit (internal/child_process.js:240:19)
spacedeck-ga |     at onErrorNT (internal/child_process.js:415:16)
spacedeck-ga |     at process._tickCallback (internal/process/next_tick.js:63:19)
spacedeck-ga |   errno: 'ENOENT',
spacedeck-ga |   code: 'ENOENT',
spacedeck-ga |   syscall:
spacedeck-ga |    'spawn /app/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs',
spacedeck-ga |   path:
spacedeck-ga |    '/app/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs',
spacedeck-ga |   spawnargs: [ '/app/node_modules/node-phantom-simple/bridge.js' ] }
spacedeck-ga | GET /images/favicon.png 200 9.386 ms - 1425

Apparently spacedeck uses phantomjs-prebuild which is compiled against glibc. Thus, an Alpine Docker base image won't work. I was able to get it running with the following (not deeply-tested) Dockerfile:

FROM node:10

WORKDIR /app

RUN apt-get update && apt-get dist-upgrade -y && apt-get install -y git make cmake gcc g++ graphicsmagick ffmpeg ghostscript libmad0-dev libid3tag0-dev libsndfile-dev libgd-dev libboost-dev libboost-program-options-dev libboost-filesystem-dev libboost-regex-dev libboost-system-dev libpng-dev zlib1g-dev libflac-dev

# build audiowaveform from source

RUN git clone https://github.com/bbc/audiowaveform.git
RUN mkdir audiowaveform/build/
RUN cd audiowaveform/build/ && cmake -D ENABLE_TESTS=0 ..
RUN cd audiowaveform/build/ && make
RUN cd audiowaveform/build/ && make install

# install node package

COPY package*.json ./
RUN npm install
COPY . .

# start app

EXPOSE 9666
CMD ["node", "spacedeck.js"]

[zeigerpuppy]

Thanks @schmelly for the alternative Dockerfile. I have built with that Dockerfile and it looks like preview images are getting created. However, they are not displayed for me in the application, each space continues to have a blank preview.

I think this log is showing a successful thumbnail creation.

spacedeck-ga2 | [2020-11-05T00:27:22.062Z] Executing (default): SELECT `_id`, `space_id`, `user_id`, `mime`, `thumbnail_uri`, `last_update_user_id`, `editor_name`, `last_update_editor_name`, `description`, `state`, `title`, `tags`, `search_text`, `link_uri`, `play_from`, `play_to`, `x`, `y`, `z`, `r`, `w`, `h`, `control_points`, `group`, `locked`, `payload_uri`, `payload_thumbnail_web_uri`, `payload_thumbnail_medium_uri`, `payload_thumbnail_big_uri`, `payload_size`, `fill_color`, `stroke_color`, `text_color`, `stroke`, `stroke_style`, `alpha`, `order`, `crop_x`, `crop_y`, `crop_w`, `crop_h`, `shape`, `shape_svg`, `padding_left`, `padding_right`, `padding_top`, `padding_bottom`, `margin_left`, `margin_right`, `margin_top`, `margin_bottom`, `border_radius`, `align`, `valign`, `brightness`, `contrast`, `saturation`, `blur`, `hue`, `opacity`, `payload_alternatives`, `created_at`, `updated_at`, `createdAt`, `updatedAt` FROM `artifacts` AS `artifact` WHERE `artifact`.`space_id` = '72c86a95-8468-421b-8e79-2041f15a7ed7';
spacedeck-ga2 | GET /api/spaces/72c86a95-8468-421b-8e79-2041f15a7ed7/html?api_token=99Spikerspacedeck 200 19.430 ms - 15525
spacedeck-ga2 | GET /stylesheets/style.css 200 8.487 ms - 361679
spacedeck-ga2 | [2020-11-05T00:27:22.398Z] Executing (default): SELECT `_id`, `name`, `space_type`, `creator_id`, `parent_space_id`, `access_mode`, `password`, `edit_hash`, `edit_slug`, `editors_locking`, `thumbnail_uri`, `width`, `height`, `background_color`, `background_uri`, `created_at`, `updated_at`, `thumbnail_url`, `thumbnail_updated_at`, `createdAt`, `updatedAt` FROM `spaces` AS `space` WHERE (`space`.`_id` = '72c86a95-8468-421b-8e79-2041f15a7ed7' OR `space`.`edit_slug` = '72c86a95-8468-421b-8e79-2041f15a7ed7') LIMIT 1;
spacedeck-ga2 | GET /api/spaces/72c86a95-8468-421b-8e79-2041f15a7ed7/null 403 16.749 ms - 25
spacedeck-ga2 | [2020-11-05T00:27:23.125Z] [storage] uploading /tmp/72c86a95-8468-421b-8e79-2041f15a7ed7.png.thumb.jpg  to  s72c86a95-8468-421b-8e79-2041f15a7ed7/thumb_1604536041725.jpg
spacedeck-ga2 | [2020-11-05T00:27:23.128Z] [s3]/tmp/72c86a95-8468-421b-8e79-2041f15a7ed7.png.thumb.jpg to /storage/s72c86a95-8468-421b-8e79-2041f15a7ed7/thumb_1604536041725.jpg
spacedeck-ga2 | [2020-11-05T00:27:23.130Z] Executing (default): UPDATE `spaces` SET `thumbnail_url`='/storage/s72c86a95-8468-421b-8e79-2041f15a7ed7/thumb_1604536041725.jpg',`updatedAt`='2020-11-05 00:27:23.129 +00:00' WHERE `_id` = '72c86a95-8468-421b-8e79-2041f15a7ed7'

I do see a warning in the web console (Firefox), which I guess may be related to the image not loading properly.

<source> element has no "src" attribute. Media resource load failed.

[banglashi]

Hi, so I had the same issue but didn't stumble upon this one when trying to fix it. (It probably would have saved me some hours) Perhaps it should say something with Docker on the title. Anyway, this is the Dockerfile I ended up with that works for me. I still need to refine it to just the changes that did the trick, but in the meantime I will post it here as a reference if it is useful for someone else.

FROM node:10.23.0-alpine3.11

WORKDIR /app

# Add support for https on wget
RUN apk update && apk add --no-cache wget && apk --no-cache add openssl wget && apk add ca-certificates && update-ca-certificates

# Add phantomjs
RUN wget -qO- "https://github.com/dustinblackman/phantomized/releases/download/2.1.1a/dockerized-phantomjs.tar.gz" | tar xz -C / \
    && npm config set user 0 \
    && npm install -g phantomjs-prebuilt

# Add fonts required by phantomjs to render html correctly
RUN apk add --update ttf-dejavu ttf-droid ttf-freefont ttf-liberation ttf-ubuntu-font-family && rm -rf /var/cache/apk/*

# build audiowaveform from source
RUN apk add git make cmake gcc g++ libmad-dev libid3tag-dev libsndfile-dev gd-dev boost-dev libgd libpng-dev zlib-dev bzip2 curl
RUN apk add zlib-static libpng-static boost-static

RUN apk add autoconf automake libtool gettext
RUN wget https://github.com/xiph/flac/archive/1.3.3.tar.gz
RUN tar xzf 1.3.3.tar.gz
RUN cd flac-1.3.3/ && ./autogen.sh
RUN cd flac-1.3.3/ && ./configure --enable-shared=no
RUN cd flac-1.3.3/ && make
RUN cd flac-1.3.3/ && make install
RUN rm -f 1.3.3.tar.gz

RUN git clone https://github.com/bbc/audiowaveform.git
RUN mkdir audiowaveform/build/
RUN cd audiowaveform/build/ && cmake -D ENABLE_TESTS=0 -D BUILD_STATIC=1 ..
RUN cd audiowaveform/build/ && make
RUN cd audiowaveform/build/ && make install

# install other requirements
RUN apk add graphicsmagick ffmpeg ffmpeg-dev ghostscript
RUN curl -o- -L https://yarnpkg.com/install.sh | bash

# install node package
RUN npm install phantomjs-prebuilt
COPY package*.json ./
# RUN npm install phantomjs-prebuilt@2.1.16 --ignore-scripts
RUN npm install
COPY . .

# start app

EXPOSE 9666
CMD ["node", "spacedeck.js"]