asciinema / asciicast2gif

Generate GIF animations from asciicasts (asciinema recordings)
MIT License
1.21k stars 82 forks source link

Couldn't get geometry of requested DOM element #20

Closed xtonousou closed 5 years ago

xtonousou commented 7 years ago

asciicast2gif fails to generate .gif files

$ ./asciicast2gif asciicast.json image.gif

==> Loading asciicast-133781.json...
==> Spawning PhantomJS renderer...
==> Generating frame screenshots...
==> Couldn't get geometry of requested DOM element
/home/xtonousou/.scripts/others/asciicast2gif/main.js:568
return new Km(a,wf)}function Mm(a){try{var b=a[0];return b.h?b.h(a):b.call(null,a)}catch(e){if(e instanceof Object)throw b=e,a[6].Qc(),b;throw e;}}function Nm(a,b,e){e=Gm(e,Lm(function(e){a[2]=e;a[1]=b;return Mm(a)}));return k(e)?(a[2]=pc(e),a[1]=b,ck):null}function Om(a,b,e){b=b.ld(0,e,Lm(function(b){a[2]=b;a[1]=3;return Mm(a)}));return k(b)?(a[2]=pc(b),a[1]=3,ck):null}function Pm(a,b){var e=a[6];null!=b&&e.ld(0,b,Lm(function(){return function(){return null}}(e)));e.Qc();return e}
                                                                                                                   ^

Error: program exited with code 1
    at ChildProcess.<anonymous> (/home/xtonousou/.scripts/others/asciicast2gif/main.js:1028:100)
    at emitTwo (events.js:125:13)
    at ChildProcess.emit (events.js:213:7)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)

The .json file is the one mentioned here

$ uname -a

Linux hyperi0n 4.12.6-1-ARCH #1 SMP PREEMPT Sat Aug 12 09:16:22 CEST 2017 x86_64 GNU/Linux
ku1ik commented 7 years ago

What are your Node.js and PhantomJS versions?

xtonousou commented 7 years ago

Well, it's been a while since I used asciicast2gif, so I fetched the latest commits, built and reinstalled it. The JSON file that has been used is this.

Getting Started

$ ./asciicast2gif 133946.json 133946.gif
==> Loading 133946.json...
==> Spawning PhantomJS renderer...
==> Generating frame screenshots...
==> Couldn't get geometry of requested DOM element
/home/xtonousou/asciicast2gif/main.js:568
return new Km(a,wf)}function Mm(a){try{var b=a[0];return b.h?b.h(a):b.call(null,a)}catch(e){if(e instanceof Object)throw b=e,a[6].Qc(),b;throw e;}}function Nm(a,b,e){e=Gm(e,Lm(function(e){a[2]=e;a[1]=b;return Mm(a)}));return k(e)?(a[2]=pc(e),a[1]=b,ck):null}function Om(a,b,e){b=b.ld(0,e,Lm(function(b){a[2]=b;a[1]=3;return Mm(a)}));return k(b)?(a[2]=pc(b),a[1]=3,ck):null}function Pm(a,b){var e=a[6];null!=b&&e.ld(0,b,Lm(function(){return function(){return null}}(e)));e.Qc();return e}
                                                                                                                   ^

Error: program exited with code 1
    at ChildProcess.<anonymous> (/home/xtonousou/asciicast2gif/main.js:1028:100)
    at emitTwo (events.js:125:13)
    at ChildProcess.emit (events.js:213:7)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)

Node.js Version

$ node --version
v8.6.0

PhantomJS Version

$ phantomjs --version
2.1.1

Kernel

$ uname -a
Linux hyperi0n 4.13.3-1-ARCH #1 SMP PREEMPT Thu Sep 21 20:33:16 CEST 2017 x86_64 GNU/Linux
ku1ik commented 7 years ago

I just tried it on the linked asciicast, directly on my macOS and also via Docker, and worked fine in both cases.

🤔

cbrake commented 6 years ago

I'm also seeing this on arch linux -- perhaps that is the common factor. Docker version works fine.

masaeedu commented 6 years ago

20, #44, and #50 (so far) seem to be duplicates. Could anyone who's seeing this issue please run with DEBUG=1 asciicast2gif ... and see if the message console.log: Failed to pre-load Powerline Symbols font appears alongside the rest of the output?

masaeedu commented 6 years ago

I suspect this might be an issue with missing fonts on the system. The logic in fontfaceonload.js is doing some kind of analysis of font heights and widths that I can't understand, but if I just tweak options.error() on line 129 to options.success(), it starts to work for me.

ku1ik commented 5 years ago

@masaeedu good job on spotting this! 🏆

Any problem with FontFaceOnload will result in callPhantom with null rect, and the other part of the code will log this "can't get geometry" error when rect is null. This is likely it.

The reason I used FontFaceOnload is that, without solution like this it's possible that first few screenshots will not have Powerline symbols rendered (until the font loads in Phantom). It's a race condition thing. It may be that it actually does more harm than good though....

ku1ik commented 5 years ago

And, actually even more likely problem is that when you run asciicast2gif directly on your host (not via Docker) then you don't have Powerline Symbols on your system, and then it always fails 🤔

masaeedu commented 5 years ago

@sickill Is there a way to fallback here if the font isn't present in the system? If I just bypass this check using the hack I described things still seem to work fine.

ku1ik commented 5 years ago

I just remembered that this font is embedded in the html file (https://github.com/asciinema/asciicast2gif/blob/master/page/asciicast2gif.html#L10), so it's always there. It could be that when running directly you can have different version of PhantomJS which cannot handle this inline font definition properly 🤔

Anyway, since the font is there, loading it should it either be instant, or it will never happen. So after 1s wait we could just proceed like it had succeeded (only small subset of users use Powerline anyway).

ku1ik commented 5 years ago

I think I might have fixed it with d959ac120316e4bdbb396e0cda7d11453131825a. My limited testing confirms that. If anyone else can confirm it solves it then I'll publish new release to npmjs.org too. Thanks @masaeedu for help!

doronbehar commented 5 years ago

I've just tried to build it from source and npm run build failed with these trace:

Compiling ["main.js"] from ["src"]...
Compiling ["main.js"] failed.
clojure.lang.ExceptionInfo: failed compiling file:/var/code/doron/asciicast2gif/src/asciinema/gif/main.cljs {:file #object[java.io.File 0x4e6c4c55 "/var/code/doron/asciicast2gif/src/asciinema/gif/main.cljs"]}
        at clojure.core$ex_info.invokeStatic(core.clj:4739)
        at clojure.core$ex_info.invoke(core.clj:4739)
        at cljs.compiler$compile_file$fn__3702.invoke(compiler.cljc:1562)
        at cljs.compiler$compile_file.invokeStatic(compiler.cljc:1522)
        at cljs.compiler$compile_file.invoke(compiler.cljc:1498)
        at cljs.closure$compile_file.invokeStatic(closure.clj:573)
        at cljs.closure$compile_file.invoke(closure.clj:564)
        at cljs.closure$fn__5124.invokeStatic(closure.clj:653)
        at cljs.closure$fn__5124.invoke(closure.clj:647)
        at cljs.closure$fn__5052$G__5045__5059.invoke(closure.clj:521)
        at cljs.closure$compile_sources$iter__5250__5254$fn__5255.invoke(closure.clj:1011)
        at clojure.lang.LazySeq.sval(LazySeq.java:40)
        at clojure.lang.LazySeq.seq(LazySeq.java:49)
        at clojure.lang.Cons.next(Cons.java:39)
        at clojure.lang.RT.next(RT.java:706)
        at clojure.core$next__5108.invokeStatic(core.clj:64)
        at clojure.core$dorun.invokeStatic(core.clj:3134)
        at clojure.core$doall.invokeStatic(core.clj:3140)
        at clojure.core$doall.invoke(core.clj:3140)
        at cljs.closure$compile_sources.invokeStatic(closure.clj:1007)
        at cljs.closure$compile_sources.invoke(closure.clj:996)
        at cljs.closure$build.invokeStatic(closure.clj:2817)
        at cljs.closure$build.invoke(closure.clj:2718)
        at cljs.build.api$build.invokeStatic(api.clj:208)
        at cljs.build.api$build.invoke(api.clj:189)
        at cljs.build.api$build.invokeStatic(api.clj:195)
        at cljs.build.api$build.invoke(api.clj:189)
        at cljsbuild.compiler$compile_cljs$fn__718.invoke(compiler.clj:61)
        at cljsbuild.compiler$compile_cljs.invokeStatic(compiler.clj:60)
        at cljsbuild.compiler$compile_cljs.invoke(compiler.clj:48)
        at cljsbuild.compiler$run_compiler.invokeStatic(compiler.clj:168)
        at cljsbuild.compiler$run_compiler.invoke(compiler.clj:129)
        at user$eval847$iter__895__899$fn__900$fn__926.invoke(form-init4950959104330864636.clj:1)
        at user$eval847$iter__895__899$fn__900.invoke(form-init4950959104330864636.clj:1)
        at clojure.lang.LazySeq.sval(LazySeq.java:40)
        at clojure.lang.LazySeq.seq(LazySeq.java:49)
        at clojure.lang.RT.seq(RT.java:528)
        at clojure.core$seq__5124.invokeStatic(core.clj:137)
        at clojure.core$dorun.invokeStatic(core.clj:3125)
        at clojure.core$doall.invokeStatic(core.clj:3140)
        at clojure.core$doall.invoke(core.clj:3140)
        at user$eval847.invokeStatic(form-init4950959104330864636.clj:1)
        at user$eval847.invoke(form-init4950959104330864636.clj:1)
        at clojure.lang.Compiler.eval(Compiler.java:7062)
        at clojure.lang.Compiler.eval(Compiler.java:7052)
        at clojure.lang.Compiler.load(Compiler.java:7514)
        at clojure.lang.Compiler.loadFile(Compiler.java:7452)
        at clojure.main$load_script.invokeStatic(main.clj:278)
        at clojure.main$init_opt.invokeStatic(main.clj:280)
        at clojure.main$init_opt.invoke(main.clj:280)
        at clojure.main$initialize.invokeStatic(main.clj:311)
        at clojure.main$null_opt.invokeStatic(main.clj:345)
        at clojure.main$null_opt.invoke(main.clj:342)
        at clojure.main$main.invokeStatic(main.clj:424)
        at clojure.main$main.doInvoke(main.clj:387)
        at clojure.lang.RestFn.applyTo(RestFn.java:137)
        at clojure.lang.Var.applyTo(Var.java:702)
        at clojure.main.main(main.java:37)
Caused by: clojure.lang.ExceptionInfo: No such namespace: asciinema.player.asciicast, could not locate asciinema/player/asciicast.cljs, asciinema/player/asciicast.cljc, or JavaScript source providing "asciinema.player.asciicast" in file /var/code/doron/asciicast2gif/src/asciinema/gif/main.cljs {:tag :cljs/analysis-error}
        at clojure.core$ex_info.invokeStatic(core.clj:4739)
        at clojure.core$ex_info.invoke(core.clj:4739)
        at cljs.analyzer$error.invokeStatic(analyzer.cljc:697)
        at cljs.analyzer$error.invoke(analyzer.cljc:693)
        at cljs.analyzer$error.invokeStatic(analyzer.cljc:695)
        at cljs.analyzer$error.invoke(analyzer.cljc:693)
        at cljs.analyzer$analyze_deps.invokeStatic(analyzer.cljc:2129)
        at cljs.analyzer$analyze_deps.invoke(analyzer.cljc:2103)
        at cljs.analyzer$ns_side_effects.invokeStatic(analyzer.cljc:3476)
        at cljs.analyzer$ns_side_effects.invoke(analyzer.cljc:3471)
        at cljs.analyzer$analyze_STAR_$fn__2510.invoke(analyzer.cljc:3596)
        at clojure.lang.PersistentVector.reduce(PersistentVector.java:341)
        at clojure.core$reduce.invokeStatic(core.clj:6747)
        at clojure.core$reduce.invoke(core.clj:6730)
        at cljs.analyzer$analyze_STAR_.invokeStatic(analyzer.cljc:3596)
        at cljs.analyzer$analyze_STAR_.invoke(analyzer.cljc:3586)
        at cljs.analyzer$analyze.invokeStatic(analyzer.cljc:3616)
        at cljs.analyzer$analyze.invoke(analyzer.cljc:3598)
        at cljs.compiler$emit_source.invokeStatic(compiler.cljc:1386)
        at cljs.compiler$emit_source.invoke(compiler.cljc:1365)
        at cljs.compiler$compile_file_STAR_$fn__3672.invoke(compiler.cljc:1467)
        at cljs.compiler$with_core_cljs.invokeStatic(compiler.cljc:1285)
        at cljs.compiler$with_core_cljs.invoke(compiler.cljc:1274)
        at cljs.compiler$compile_file_STAR_.invokeStatic(compiler.cljc:1451)
        at cljs.compiler$compile_file_STAR_.invoke(compiler.cljc:1444)
        at cljs.compiler$compile_file$fn__3702.invoke(compiler.cljc:1547)
        ... 55 more
Subprocess failed
ku1ik commented 5 years ago

@doronbehar when cloning this repo you need --recursive flag (see here https://github.com/asciinema/asciicast2gif#building-from-source) to get git submodules cloned too.

Run git submodule update --init --recursive and try again.

doronbehar commented 5 years ago

Confirmed.

funilrys commented 5 years ago

Hi @sickill, just wanted to confirm that the patch fixes the issue.

Also @cbrake, there is an AUR package: https://aur.archlinux.org/packages/nodejs-asciicast2gif/

ku1ik commented 5 years ago

@funilrys thx!