patrickmatte / scroll-capture

15 stars 4 forks source link

After capture process video is not being created. #33

Closed RTarvid closed 4 months ago

RTarvid commented 5 months ago

After capture process video is not being created - just video player with disabled controls and black frame.

MacOS 13.6 Version 121.0.6167.139 (Official Build) (x86_64)

patrickmatte commented 5 months ago

Thanks for providing the software versions but a copy/paste of the JS console logs would be a lot more helpful.

RTarvid commented 5 months ago

Console doesn’t show anything. I narrowed down issue to width of the webpage and pixel ratio in settings. I have 5K iMac display. I found that ScrollCapture was set to 2x Pixel ratio in setting.

If chrome window size is w1584 or less (and pixel ratio is set to 2x), then video is recording fine, and I can download it.

Since I was trying to record wider video ( > w1585px), (and pixel ratio was set to 2x) I was getting no recording, just black frame. But when I changed pixel ratio to 1x in settings, I was able to record chrome window wider than 1584pixels. So problem is with 2x pixel ratio.

On 7 February 2024 at 03:25:07, Patrick Matte @.***) wrote:

Thanks for providing the software versions but a copy/paste of the JS console logs would be a lot more helpful.

— Reply to this email directly, view it on GitHub https://github.com/patrickmatte/scroll-capture/issues/33#issuecomment-1931080258, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4WVOBL4KCG2GFWHK6Q3MLYSLJXHAVCNFSM6AAAAABC4ZYCUOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZRGA4DAMRVHA . You are receiving this because you authored the thread.Message ID: @.***>

patrickmatte commented 5 months ago

Chrome doesn't support saving with the MP4 format right out the box so I bundled FFMpeg with the extension a couple weeks ago and I'm thinking that you may have ran into the 2GB filesize limit of FFMPEG.wasm. Was your video pretty long? What was the video bitrate? I have an older macbook pro here and have no problem capturing at 1920x995 with a pixel ratio of 2. I'll make some tests and try to crash the FFmpeg process. If you wan to get to the bottom of this, you can open the chrome extension manager and under Scroll Capture, check the logs coming out of offscreen.html. That's where the error should appear.

patrickmatte commented 5 months ago

Ok so I'm ruling out the 2GB file limit for FFMpeg. I had to record 10 minutes at 1920x995 with pixelratio of 2 with a ridiculous bitrate of 192mbps to be able to crash the FFmpeg process. So there are two options left.

  1. You recorded a relatively long video with sound on and FFmpeg took a while to transcode the audio so the video player was showing empty until the transcoding was finished. Try to wait longer and see if the video finally appears. Or better yet, just turn sound off in the scroll capture settings, then the video should show up almost instantly because ffmpeg only needs to re-encode the sound, it uses the original h264 track of the webm file without transcoding it so it's really fast with sound turned off. With the extension manager, you can look at the logs for offscreen.html and all of the ffmpeg logs show up.

  2. When using scroll capture on multiple pages, chrome can get finnicky when granting the permission to record the tab stream. Try to close scroll capture and reload the url that you want to start capturing, then start the extension again. Or close the tab and try it inside a new tab.

Either way, the offscreen.html logs would be very helpful.

RTarvid commented 5 months ago

Hi, the height of the area I was recording was larger than yours. I need to capture promo videos for Dribbble. Today and yesterday I was recording without sound. I don’t need it. I was recording no more than 30sec. Even 2s recording had this error. Video quality was always set to 15Mbit. I was refreshing page and relaunching Scroll-capture often. By default I was using 1x Pixel ratio, but when I started to dig deeper, I changed Pixel ratio to 1x and with this setting video recorded and was available instantly. I see that other Chrome store users report same issue, and I think they also might have retina displays, and 2x Pixel ratio setting enabled.

There is another issue I haven't told you about. I’m unable to scroll the actions I create. Whenever I try to scroll inside Scroll-capture, I’m scrolling website behind. When I create additional action steps, for a moment I can see that small scrollbar appears in the panel, but after it disappears the only way I’m able to move up or down is by using Tab and Shift+Tab. Here is a screen recording: https://www.dropbox.com/scl/fi/gpi701usryi7znp1v01lk/Screen-Recording-2024-02-07-at-20.55.29.mov?rlkey=qg6c00v4w3x31lcpxf6q3k8ya&dl=0

Here is the log:

async ƒ d(e){if("recording"===n?.state)throw new Error("Called startRecording while recording is in progress.");console.log(d,e);const t=e.tabWidth,a=e.tabHeight,m=e.pixelRatio,l={};e.exportVideo&&(l.video={… {videoBitsPerSecond: 16, audioBitsPerSecond: 256, pixelRatio: 2, tabWidth: 1609, tabHeight: 1575, …}

offscreen.js:1 getUserMedia constraints {"video":{"mandatory":{"chromeMediaSource":"tab","chromeMediaSourceId":"GI0mCFoKbZSq1rvYfo3iyA==","minWidth":3218,"maxWidth":3218,"minHeight":3150,"maxHeight":3150,"minFrameRate":30,"maxFrameRate":60}}}

offscreen.js:1 MediaRecorder options {"mimeType":"video/webm;codecs=h264","audioBitsPerSecond":256000,"videoBitsPerSecond":16000000}

ffmpeg.min.js:1 [Program terminated with exit(1)] undefined

ffmpeg.min.js:1 [info] load ffmpeg-core

ffmpeg.min.js:1 [info] loading ffmpeg-core

ffmpeg.min.js:1 [info] ffmpeg-core loaded

ffmpeg.min.js:1 [info] run FS.writeFile sample_video.webm <0 bytes binary file> offscreen.js:1 (5) ['-i', 'sample_video.webm', '-c:v', 'copy', 'sample_video.mp4']

ffmpeg.min.js:1 [info] run ffmpeg command: -i sample_video.webm -c:v copy sample_video.mp4

ffmpeg.min.js:1 [fferr] ffmpeg version 3ea4213 Copyright (c) 2000-2020 the FFmpeg developers

ffmpeg.min.js:1 [fferr] built with emcc (Emscripten gcc/clang-like replacement) 2.0.8 (d059fd603d0b45b584f634dc2365bc9e9a6ec1dd)

ffmpeg.min.js:1 [fferr] configuration: --target-os=none --arch=x86_32 --enable-cross-compile --disable-x86asm --disable-inline-asm --disable-stripping --disable-programs --disable-doc --disable-debug --disable-runtime-cpudetect --disable-autodetect --extra-cflags='-O3 --closure 1 -I/src/build/include' --extra-cxxflags='-O3 --closure 1 -I/src/build/include' --extra-ldflags='-O3 --closure 1 -I/src/build/include -L/src/build/lib' --pkg-config-flags=--static --nm=llvm-nm --ar=emar --ranlib=emranlib --cc=emcc --cxx=em++ --objcc=emcc --dep-cc=emcc --disable-pthreads --disable-w32threads --disable-os2threads --enable-gpl --enable-nonfree --enable-zlib --enable-libx264 --enable-libx265 --enable-libvpx --enable-libwavpack --enable-libmp3lame --enable-libfdk-aac --enable-libtheora --enable-libvorbis --enable-libfreetype --enable-libopus --enable-libwebp --enable-libass --enable-libfribidi

ffmpeg.min.js:1 [fferr] libavutil 56. 51.100 / 56. 51.100 ffmpeg.min.js:1 [fferr] libavcodec 58. 91.100 / 58. 91.100 ffmpeg.min.js:1 [fferr] libavformat 58. 45.100 / 58. 45.100 ffmpeg.min.js:1 [fferr] libavdevice 58. 10.100 / 58. 10.100 ffmpeg.min.js:1 [fferr] libavfilter 7. 85.100 / 7. 85.100 ffmpeg.min.js:1 [fferr] libswscale 5. 7.100 / 5. 7.100 ffmpeg.min.js:1 [fferr] libswresample 3. 7.100 / 3. 7.100 ffmpeg.min.js:1 [fferr] libpostproc 55. 7.100 / 55. 7.100 ffmpeg.min.js:1 [fferr] sample_video.webm: Invalid data found when processing input ffmpeg.min.js:1 [ffout] FFMPEG_END ffmpeg.min.js:1 [info] run FS.readFile sample_video.mp4

ffmpeg.min.js:1 Uncaught (in promise) Error: ffmpeg.FS('readFile', 'sample_video.mp4') error. Check if the path exists at Object.U [as FS] (ffmpeg.min.js:1:11538) at offscreen.js:1:2587 at async a.onload (offscreen.js:1:2348) U @ ffmpeg.min.js:1 (anonymous) @ offscreen.js:1 load (async) (anonymous) @ offscreen.js:1 n.onstop @ offscreen.js:1

Let me know if you need more informaition.

On 7 February 2024 at 18:24:21, Patrick Matte @.***) wrote:

Ok so I'm ruling out the 2GB file limit for FFMpeg. I had to record 10 minutes at 1920x995 with pixelratio of 2 with a ridiculous bitrate of 192mbps to be able to crash the FFmpeg process. So there are two options left.

1.

You recorded a relatively long video with sound on and FFmpeg took a while to transcode the audio so the video player was showing empty until the transcoding was finished. Try to wait longer and see if the video finally appears. Or better yet, just turn sound off in the scroll capture settings, then the video should show up almost instantly because ffmpeg only needs to re-encode the sound, it uses the original h264 track of the webm file without transcoding it so it's really fast with sound turned off. With the extension manager, you can look at the logs for offscreen.html and all of the ffmpeg logs show up. 2.

When using scroll capture on multiple pages, chrome can get finnicky when granting the permission to record the tab stream. Try to close scroll capture and reload the url that you want to start capturing, then start the extension again. Or close the tab and try it inside a new tab.

Either way, the offscreen.html logs would be very helpful.

— Reply to this email directly, view it on GitHub https://github.com/patrickmatte/scroll-capture/issues/33#issuecomment-1932411388, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4WVODQ2CNGRMUDNVLAHBLYSOTDLAVCNFSM6AAAAABC4ZYCUOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZSGQYTCMZYHA . You are receiving this because you authored the thread.Message ID: @.***>

patrickmatte commented 5 months ago

Can I take a look at that URL? Since the scroll capture panel opens up directly inside the website, the css rules of the website can sometimes mess with the scrollcapture css. There must be something in the website that prevents scrolling the scroll capture container. Or maybe the preventDefault method is called in the website's scroll event handler. With the URL, I'll be able to try it myself.

It seems like FFmpeg is loading correctly but the source video blob is broken so the MediaRecorder must be failing. Maybe I need to change the minWidth and minHeight of the media constraints to use a pixelRatio of 1.

patrickmatte commented 5 months ago

Also, can you delete all of your actions and press the recording button. Then click the red camera extension button to stop the recording. Let's see if that works at least?

RTarvid commented 5 months ago

Ok, it looks like you are right - I have tested on many websites - sometimes I’m able to scroll through actions.

Websites listed below are where scroll doesn't work for me.

https://studiovoila.com/

https://creandum.com/

https://kozowood.com/en

On 7 February 2024 at 21:39:32, Patrick Matte @.***) wrote:

Can I take a look at that URL? Since the scroll capture panel opens up directly inside the website, the css rules of the website can sometimes mess with the scrollcapture css. There must be something in the website that prevents scrolling the scroll capture container. Or maybe the preventDefault method is called in the website's scroll event handler. With the URL, I'll be able to try it myself.

It seems like FFmpeg is loading correctly but the source video blob is broken so the MediaRecorder must be failing. Maybe I need to change the minWidth and minHeight of the media constraints to use a pixelRatio of 1.

— Reply to this email directly, view it on GitHub https://github.com/patrickmatte/scroll-capture/issues/33#issuecomment-1932742620, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4WVODLOCNCPF6ALHWLVT3YSPJ7HAVCNFSM6AAAAABC4ZYCUOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZSG42DENRSGA . You are receiving this because you authored the thread.Message ID: @.***>

patrickmatte commented 5 months ago

Thanks for those urls. I can't figure out why it's not scrolling. I noticed that when I add new actions to the list, a scrollbar appears for about a second and I can grab it and scroll it manually but as soon as i release it, the scrollbar dissapears and i can't scroll anymore.

Using the chrome device emulation mode, I was able to scroll it. https://github.com/patrickmatte/scroll-capture/assets/435963/bcc405f6-0e0e-4350-964e-c062dd11b82a

I had an idea, using custom css to style the scroll capture scrollbars. I found a chrome extension that does it automatically https://chromewebstore.google.com/detail/custom-scrollbars/ddbipglapfjojhfapmpmofnaoellkggc And it works, I can grab the styled scrollbar and scroll, but I still can't use the trackpad... But at least you'll be able to scroll.

As for the recording, I'm not quite sure, as you can see in the video, the recording work for me pretty much all the time, no matter the pixelRatio value.

patrickmatte commented 5 months ago

I uploaded a new version to the chrome store that includes media constraints with ideal, min and max sizes. This way you don't have to make your window smaller or use a smaller pixelRatio, the MediaRecorder should be smart enough to pick the largest available size for the recording. Hopefully this fixes the error.

I also added a little scrollbar so you'll be able to drag it around when the scroll event doesn't work. These css and js conflicts are less than ideal but adding the scroll capture panel directly on top of the website seemed to me like the easiest solution.

Thanks for taking the time to debug this! The new vesion should eventually appear in the store. Sometimes it takes less than 12 hours but other times it takes 4 or 5 days...

meetWibe commented 5 months ago

Facing same issue ! Error:

ffmpeg.min.js:1 Uncaught (in promise) Error: ffmpeg.FS('readFile', 'sample_video.mp4') error. Check if the path exists at Object.U [as FS] (ffmpeg.min.js:1:11538) at offscreen.js:1:2587 at async a.onload (offscreen.js:1:2348)

RTarvid commented 5 months ago

I’m glad I could take part in finding a solution. To be honest, you are the first developer that responded to an issue in such a short time. Usually it takes at least few days to get first response and then at least two weeks to get to the bottom of the problem. Adobe is the worst.

Chrome store doesn't reflect this, but I see that I have newest update installed. I can see a scrollbar and on some webpages I can even scroll using mouse, and on some I need to drag it, but at least there is something that I can use instead of using Tab key.

I still have an issue with the black screen at 2x pixel ratio, but I’m recording really large area so maybe that’s why. Funny, but what I didn’t test before are different pixel ratios. So today I tested that I can use 1x up to 1.6x pixel ratio, but the problem appears from 1.7x pixel ratio. I can live with that :).

I suggest you to add some description regarding scrollbar usage, or pixel ratio setting, so that users who have this problem could know which setting to tweak to adapt ScrollCapture to their resolution.

Have a nice day!

On 8 February 2024 at 03:13:30, Patrick Matte @.***) wrote:

I uploaded a new version to the chrome store that includes media constraints with ideal, min and max sizes. This way you don't have to make your window smaller or use a smaller pixelRatio, the MediaRecorder should be smart enough to pick the largest available size for the recording. Hopefully this fixes the error.

I also added a little scrollbar so you'll be able to drag it around when the scroll event doesn't work. These css and js conflicts are less than ideal but adding the scroll capture panel directly on top of the website seemed to me like the easiest solution.

Thanks for taking the time to debug this! The new vesion should eventually appear in the store. Sometimes it takes less than 12 hours but other times it takes 4 o r 5 days...

— Reply to this email directly, view it on GitHub https://github.com/patrickmatte/scroll-capture/issues/33#issuecomment-1933210129, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4WVOD5ZDQPP23PGT7IUJDYSQRDVAVCNFSM6AAAAABC4ZYCUOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZTGIYTAMJSHE . You are receiving this because you authored the thread.Message ID: @.***>

patrickmatte commented 5 months ago

Is it possible that your browser's zoom level was not 100%? I just tried zooming out my browser to 67% and set pixelRatio to 1.7 and the recording didn't work. Then I set it to 1.6 and it worked. I had never tried capturing while being zoomed out before. I think this is a problem that I can fix. I'll probably push another update later today if I fix it.

RTarvid commented 5 months ago

In my case zoom level was set to 100%.

On 9 February 2024 at 17:35:14, Patrick Matte @.***) wrote:

Is it possible that your browser's zoom level was not 100%? I just tried zooming out my browser to 67% and set pixelRatio to 1.7 and the recording didn't work. Then I set it to 1.6 and it worked. I had never tried capturing while being zoomed out before. I think this is a problem that I can fix. I'll probably push another update later today if I fix it.

— Reply to this email directly, view it on GitHub https://github.com/patrickmatte/scroll-capture/issues/33#issuecomment-1936142445, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4WVOHCPF7V4SITQFXYZWDYSY63FAVCNFSM6AAAAABC4ZYCUOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZWGE2DENBUGU . You are receiving this because you authored the thread.Message ID: @.***>

patrickmatte commented 5 months ago

Ah that's too bad, I thought that was it. I'm not sure how to fix that issue then. I don't understand why you wouldn't be able to capture the screen with the available pixel ratio. That doesn't make sense.

patrickmatte commented 4 months ago

Did a few more updates which may have fixed the issues with using the max pixel ratio