Skip to content

Two demo html failed to render #18

@garywill

Description

@garywill

Below 2 html files from your demo failed to render. (Others render okay)

$ node render --url http://localhost:8080/examples/vue-starfield.html --video=vue-starfield.mp4
Spawn worker 1
Worker 1: getInfo
PAGE LOG: Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
PAGE LOG: You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
PAGE LOG: Live reload enabled.
Movie info: { fps: 60, numberOfFrames: 600, width: 1920, height: 1080 }
Spawn worker 2
Worker 1: render(0)
Spawn worker 3
Worker 2: render(1)
Spawn worker 4
Worker 3: render(2)
Worker 4: render(3)
Render frame 0 0/600
ffmpeg version 3.4.12 Copyright (c) 2000-2022 the FFmpeg developers
built with gcc 7 (SUSE Linux)
configuration: --prefix=/usr --libdir=/usr/lib64 --shlibdir=/usr/lib64 --incdir=/usr/include/ffmpeg --extra-cflags='-fmessage-length=0 -grecord-gcc-switches -O2 -Wall -D_FORTIFY_SOURCE=2 -fstack-protector-strong -funwind-tables -fasynchronous-unwind-tables -fstack-clash-protection -g' --optflags='-fmessage-length=0 -grecord-gcc-switches -O2 -Wall -D_FORTIFY_SOURCE=2 -fstack-protector-strong -funwind-tables -fasynchronous-unwind-tables -fstack-clash-protection -g' --disable-htmlpages --enable-pic --disable-stripping --enable-shared --disable-static --enable-gpl --disable-openssl --enable-avresample --enable-libcdio --enable-gnutls --enable-ladspa --enable-libass --enable-libbluray --enable-libcelt --enable-libcdio --enable-libdc1394 --enable-libfreetype --enable-libgsm --enable-libmp3lame --enable-libopenjpeg --enable-libopus --enable-libpulse --enable-libspeex --enable-libtheora --enable-libtwolame --enable-libvidstab --enable-libvorbis --enable-libvpx --enable-libwebp --enable-libzimg --enable-libzvbi --enable-vaapi --enable-vdpau --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-version3 --enable-libx264 --enable-libx265 --enable-libxvid
libavutil      55. 78.100 / 55. 78.100
libavcodec     57.107.100 / 57.107.100
libavformat    57. 83.100 / 57. 83.100
libavdevice    57. 10.100 / 57. 10.100
libavfilter     6.107.100 /  6.107.100
libavresample   3.  7.  0 /  3.  7.  0
libswscale      4.  8.100 /  4.  8.100
libswresample   2.  9.100 /  2.  9.100
libpostproc    54.  7.100 / 54.  7.100
PAGE LOG: Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
PAGE LOG: You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
Worker render(0) finished timing=5,666,4836
Worker 1: render(4)
Render frame 1 1/600
PAGE LOG: Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
PAGE LOG: You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
PAGE LOG: Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
PAGE LOG: You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
PAGE LOG: Live reload enabled.
PAGE LOG: Live reload enabled.
PAGE LOG: Live reload enabled.
Worker render(4) finished timing=0,322,14572
Worker 1: render(5)
Worker render(2) finished timing=6613,1158,14095
Worker 3: render(6)
Worker render(1) finished timing=7719,267,16464
Worker 2: render(7)
Render frame 2 2/600
Render frame 3 3/600
Worker render(3) finished timing=7172,228,17836
Worker 4: render(8)
Render frame 4 4/600
Render frame 5 5/600
Worker render(5) finished timing=0,1217,13333
Worker 1: render(9)
Render frame 6 6/600
Worker render(7) finished timing=1,1008,12558
Worker 2: render(10)
Worker render(8) finished timing=0,1967,12242
Worker 4: render(11)
Worker render(6) finished timing=1,4130,16203
Worker 3: render(12)
Render frame 7 7/600
Render frame 8 8/600
Render frame 9 9/600
Input #0, image2pipe, from 'pipe:':
Duration: N/A, bitrate: N/A
Stream #0:0: Video: png, rgba(pc), 1920x1080, 60 fps, 60 tbr, 60 tbn, 60 tbc
Stream mapping:
Stream #0:0 -> #0:0 (png (native) -> h264 (libx264))
/tmp/html5-animation-video-renderer/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:217
this._callbacks.set(id, { resolve, reject, error: new Error(), method });
^

Error: Protocol error (Runtime.evaluate): Execution context was destroyed.
at /tmp/html5-animation-video-renderer/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:217:63
at new Promise (<anonymous>)
at CDPSession.send (/tmp/html5-animation-video-renderer/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:216:16)
at ExecutionContext._evaluateInternal (/tmp/html5-animation-video-renderer/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:166:18)
at ExecutionContext.evaluate (/tmp/html5-animation-video-renderer/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:110:27)
at DOMWorld.evaluate (/tmp/html5-animation-video-renderer/node_modules/puppeteer/lib/cjs/puppeteer/common/DOMWorld.js:91:24)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Node.js v20.8.1

$ node render --url http://localhost:8080/examples/gsap-hello-world.html
Spawn worker 1
Worker 1: getInfo
PAGE LOG: Live reload enabled.
Movie info: { fps: 60, numberOfFrames: 180, width: 1920, height: 1080 }
Spawn worker 2
Worker 1: render(0)
Spawn worker 3
Worker 2: render(1)
Spawn worker 4
Worker 3: render(2)
Worker 4: render(3)
Render frame 0 0/180
ffmpeg version 3.4.12 Copyright (c) 2000-2022 the FFmpeg developers
built with gcc 7 (SUSE Linux)
configuration: --prefix=/usr --libdir=/usr/lib64 --shlibdir=/usr/lib64 --incdir=/usr/include/ffmpeg --extra-cflags='-fmessage-length=0 -grecord-gcc-switches -O2 -Wall -D_FORTIFY_SOURCE=2 -fstack-protector-strong -funwind-tables -fasynchronous-unwind-tables -fstack-clash-protection -g' --optflags='-fmessage-length=0 -grecord-gcc-switches -O2 -Wall -D_FORTIFY_SOURCE=2 -fstack-protector-strong -funwind-tables -fasynchronous-unwind-tables -fstack-clash-protection -g' --disable-htmlpages --enable-pic --disable-stripping --enable-shared --disable-static --enable-gpl --disable-openssl --enable-avresample --enable-libcdio --enable-gnutls --enable-ladspa --enable-libass --enable-libbluray --enable-libcelt --enable-libcdio --enable-libdc1394 --enable-libfreetype --enable-libgsm --enable-libmp3lame --enable-libopenjpeg --enable-libopus --enable-libpulse --enable-libspeex --enable-libtheora --enable-libtwolame --enable-libvidstab --enable-libvorbis --enable-libvpx --enable-libwebp --enable-libzimg --enable-libzvbi --enable-vaapi --enable-vdpau --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-version3 --enable-libx264 --enable-libx265 --enable-libxvid
libavutil      55. 78.100 / 55. 78.100
libavcodec     57.107.100 / 57.107.100
libavformat    57. 83.100 / 57. 83.100
libavdevice    57. 10.100 / 57. 10.100
libavfilter     6.107.100 /  6.107.100
libavresample   3.  7.  0 /  3.  7.  0
libswscale      4.  8.100 /  4.  8.100
libswresample   2.  9.100 /  2.  9.100
libpostproc    54.  7.100 / 54.  7.100
Worker render(0) finished timing=2,25,721
Worker 1: render(4)
Render frame 1 1/180
Worker render(4) finished timing=0,16,592
Worker 1: render(5)
Worker render(5) finished timing=0,3,235
Worker 1: render(6)
Worker render(6) finished timing=0,2,249
Worker 1: render(7)
Worker render(7) finished timing=0,1,281
Worker 1: render(8)
Worker render(8) finished timing=0,2,281
Worker 1: render(9)
Worker render(9) finished timing=0,2,235
Worker 1: render(10)
Worker render(10) finished timing=0,3,250
Worker 1: render(11)
Worker render(11) finished timing=0,2,308
Worker 1: render(12)
PAGE LOG: Live reload enabled.
Worker render(12) finished timing=0,2,280
Worker 1: render(13)
Worker render(2) finished timing=3395,1,284
Worker 3: render(14)
Worker render(13) finished timing=1,1,313
Worker 1: render(15)
Worker render(14) finished timing=1,3,307
Worker 3: render(16)
Worker render(15) finished timing=0,2,341
Worker 1: render(17)
Worker render(16) finished timing=0,1,377
Worker 3: render(18)
Worker render(17) finished timing=0,4,354
Worker 1: render(19)
PAGE LOG: Live reload enabled.
Worker render(18) finished timing=0,4,495
Worker 3: render(20)
Worker render(19) finished timing=0,1,553
Worker 1: render(21)
Worker render(1) finished timing=4605,6,535
Worker 2: render(22)
Render frame 2 2/180
Render frame 3 3/180
Worker render(20) finished timing=0,5,772
Worker 3: render(23)
PAGE LOG: Live reload enabled.
Worker render(22) finished timing=0,16,742
Worker 2: render(24)
Worker render(21) finished timing=0,3,881
Worker 1: render(25)
Worker render(23) finished timing=0,11,1045
Worker 3: render(26)
Worker render(24) finished timing=0,18,968
Worker 2: render(27)
Worker render(3) finished timing=5764,3,1145
Worker 4: render(28)
Render frame 4 4/180
Render frame 5 5/180
Render frame 6 6/180
Render frame 7 7/180
Render frame 8 8/180
Render frame 9 9/180
Render frame 10 10/180
Render frame 11 11/180
Render frame 12 12/180
Render frame 13 13/180
Render frame 14 14/180
Render frame 15 15/180
Render frame 16 16/180
Render frame 17 17/180
Render frame 18 18/180
Render frame 19 19/180
Render frame 20 20/180
Render frame 21 21/180
Render frame 22 22/180
Render frame 23 23/180
Render frame 24 24/180
Render frame 25 25/180
Worker render(25) finished timing=0,41,1457
Worker 1: render(29)
Render frame 26 26/180
Worker render(27) finished timing=0,27,1335
Worker 2: render(30)
Worker render(28) finished timing=0,29,1353
Worker 4: render(31)
Worker render(26) finished timing=0,134,2094
Worker 3: render(32)
Render frame 27 27/180
Render frame 28 28/180
Render frame 29 29/180
Worker render(31) finished timing=0,113,1923
Worker 4: render(33)
Worker render(30) finished timing=0,40,2062
Worker 2: render(34)
Worker render(29) finished timing=0,283,2760
Worker 1: render(35)
Render frame 30 30/180
Render frame 31 31/180
Render frame 32 32/180
Worker render(32) finished timing=0,54,2220
Worker 3: render(36)
Render frame 33 33/180
Worker render(33) finished timing=0,214,1863
Worker 4: render(37)
Render frame 34 34/180
Worker render(34) finished timing=0,128,2049
Worker 2: render(38)
Render frame 35 35/180
Worker render(35) finished timing=0,755,2146
Worker 1: render(39)
Render frame 36 36/180
Worker render(36) finished timing=0,559,1977
Worker 3: render(40)
Render frame 37 37/180
Worker render(37) finished timing=0,288,2161
Worker 4: render(41)
Render frame 38 38/180
Worker render(38) finished timing=0,55,2547
Worker 2: render(42)
Render frame 39 39/180
Worker render(39) finished timing=0,315,2248
Worker 1: render(43)
Render frame 40 40/180
Worker render(40) finished timing=0,166,2377
Worker 3: render(44)
Render frame 41 41/180
Worker render(41) finished timing=0,484,2076
Worker 4: render(45)
Render frame 42 42/180
Worker render(44) finished timing=0,98,1526
Worker 3: render(46)
Worker render(43) finished timing=0,510,1513
Worker 1: render(47)
Worker render(42) finished timing=0,599,3112
Worker 2: render(48)
Render frame 43 43/180
Render frame 44 44/180
Render frame 45 45/180
Worker render(45) finished timing=0,326,2626
Worker 4: render(49)
Render frame 46 46/180
Worker render(47) finished timing=0,339,2196
Worker 1: render(50)
Worker render(46) finished timing=0,458,2465
Worker 3: render(51)
Render frame 47 47/180
Render frame 48 48/180
Worker render(48) finished timing=0,545,2703
Worker 2: render(52)
Render frame 49 49/180
Worker render(49) finished timing=0,474,2355
Worker 4: render(53)
Render frame 50 50/180
Worker render(51) finished timing=0,27,2875
Worker 3: render(54)
Worker render(50) finished timing=0,809,2644
Worker 1: render(55)
Render frame 51 51/180
Render frame 52 52/180
Worker render(52) finished timing=0,457,2573
Worker 2: render(56)
Render frame 53 53/180
Worker render(53) finished timing=0,863,2145
Worker 4: render(57)
Render frame 54 54/180
Worker render(54) finished timing=0,521,2328
Worker 3: render(58)
Render frame 55 55/180
Worker render(55) finished timing=0,187,2591
Worker 1: render(59)
Render frame 56 56/180
Worker render(56) finished timing=0,827,2791
Worker 2: render(60)
Render frame 57 57/180
Worker render(57) finished timing=0,27,2798
Worker 4: render(61)
Render frame 58 58/180
Worker render(58) finished timing=0,136,2880
Worker 3: render(62)
Render frame 59 59/180
Worker render(59) finished timing=0,792,3075
Worker 1: render(63)
Render frame 60 60/180
Worker render(60) finished timing=0,293,2868
Worker 2: render(64)
Render frame 61 61/180
Worker render(62) finished timing=0,546,2587
Worker 3: render(65)
Worker render(61) finished timing=0,1119,3126
Worker 4: render(66)
Render frame 62 62/180
Render frame 63 63/180
Worker render(63) finished timing=0,728,3862
Worker 1: render(67)
Render frame 64 64/180
Worker render(64) finished timing=0,971,3086
Worker 2: render(68)
Render frame 65 65/180
Worker render(66) finished timing=0,285,3809
Worker 4: render(69)
Worker render(65) finished timing=0,1454,4368
Worker 3: render(70)
Render frame 66 66/180
Render frame 67 67/180
Worker render(67) finished timing=0,892,3003
Worker 1: render(71)
Render frame 68 68/180
Worker render(69) finished timing=0,42,3166
Worker 4: render(72)
Worker render(68) finished timing=0,660,4450
Worker 2: render(73)
Render frame 69 69/180
Render frame 70 70/180
Input #0, image2pipe, from 'pipe:':
Duration: N/A, bitrate: N/A
Stream #0:0: Video: png, rgba(pc), 1920x1080, 60 fps, 60 tbr, 60 tbn, 60 tbc
Stream mapping:
Stream #0:0 -> #0:0 (png (native) -> h264 (libx264))
[libx264 @ 0x557bb970d840] using cpu capabilities: MMX2 SSE2Fast SSSE3 SSE4.2 AVX
[libx264 @ 0x557bb970d840] profile Constrained Baseline, level 4.2, 4:2:0, 8-bit
[libx264 @ 0x557bb970d840] 264 - core 164 - H.264/MPEG-4 AVC codec - Copyleft 2003-2022 - http://www.videolan.org/x264.html - options: cabac=0 ref=1 deblock=0:0:0 analyse=0:0 me=dia subme=0 psy=1 psy_rd=1.00:0.00 mixed_ref=0 me_range=16 chroma_me=1 trellis=0 8x8dct=0 cqm=0 deadzone=21,11 fast_pskip=1 chroma_qp_offset=0 threads=6 lookahead_threads=1 sliced_threads=0 nr=0 decimate=1 interlaced=0 bluray_compat=0 constrained_intra=0 bframes=0 weightp=0 keyint=250 keyint_min=25 scenecut=0 intra_refresh=0 rc=crf mbtree=0 crf=16.0 qcomp=0.60 qpmin=0 qpmax=69 qpstep=4 ip_ratio=1.40 aq=0
Output #0, mp4, to 'video.mp4':
Metadata:
encoder         : Lavf57.83.100
Stream #0:0: Video: h264 (libx264) (avc1 / 0x31637661), yuv420p, 1920x1080, q=-1--1, 60 fps, 15360 tbn, 60 tbc
Metadata:
encoder         : Lavc57.107.100 libx264
Side data:
cpb: bitrate max/min/avg: 0/0/0 buffer size: 0 vbv_delay: -1
Worker render(70) finished timing=0,201,3826me=00:00:00.00 bitrate=5907.7kbits/s speed=6.14e-05x
Worker 3: render(74)
Render frame 71 71/180
PAGE LOG: Live reload enabled.=       0kB time=00:00:00.10 bitrate=   3.8kbits/s speed=0.0626x
PAGE LOG: Live reload enabled.=       0kB time=00:00:00.21 bitrate=   1.8kbits/s speed=0.0995x
PAGE LOG: Live reload enabled.e=       0kB time=00:00:00.33 bitrate=   1.2kbits/s speed=0.119x
Worker render(71) finished timing=0,1639,4097me=00:00:00.45 bitrate=   0.9kbits/s speed=0.133x
Worker 1: render(75)
Render frame 72 72/180
Worker render(73) finished timing=0,589,3548ime=00:00:00.55 bitrate=   0.7kbits/s speed=0.136x
Worker 2: render(76)
PAGE LOG: Live reload enabled.
Worker render(72) finished timing=0,1316,4092me=00:00:00.63 bitrate=   0.6kbits/s speed=0.14x
Worker 4: render(77)
Render frame 73 73/180
Render frame 74 74/180
Worker render(74) finished timing=0,899,3637ime=00:00:00.83 bitrate=2516.8kbits/s speed=0.147x
Worker 3: render(78)
Render frame 75 75/180
/tmp/html5-animation-video-renderer/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:265
throw new Error('Execution context was destroyed, most likely because of a navigation.');
^

Error: Execution context was destroyed, most likely because of a navigation.
at rewriteError (/tmp/html5-animation-video-renderer/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:265:23)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async ExecutionContext._evaluateInternal (/tmp/html5-animation-video-renderer/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:165:64)
at async ExecutionContext.evaluate (/tmp/html5-animation-video-renderer/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:110:16)
at async Object.render (/tmp/html5-animation-video-renderer/render.js:59:26)
at async work (/tmp/html5-animation-video-renderer/render.js:128:24)

Node.js v20.8.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions