amandaghassaei / canvas-capture

Record the canvas as an image, mp4 video, or gif from the browser
https://apps.amandaghassaei.com/canvas-capture/demo/
MIT License
205 stars 14 forks source link

The worker script or module filename must be an absolute path or a relative path starting with './' or '../'. #25

Open zeankundev opened 1 year ago

zeankundev commented 1 year ago

Hi, I got a problem when using CanvasCapture. When I try to call stop record, I had this fallback that would help me analyze the errors. I overcame this error, which reads:

Uncaught (in promise) TypeError: The worker script or module filename must be an absolute path or a relative path starting with './' or '../'. Received "blob:file:///cc745104-6f41-4c98-a3a2-bd4187ed908e"
    at __node_internal_captureLargerStackTrace (node:internal/errors:490:5)
    at new NodeError (node:internal/errors:399:5)
    at new Worker (node:internal/worker:166:15)
    at Object.Vh (25dcdf7f-aba0-4cbe-b…11097e200b86:37:263)
    at Object.li (25dcdf7f-aba0-4cbe-b…11097e200b86:37:312)
    at Bb (25dcdf7f-aba0-4cbe-b…1097e200b86:160:120)
    at n (25dcdf7f-aba0-4cbe-b…11097e200b86:206:60)
    at 7d514dec-92ae-40c8-8…489a5ab7dd:0xacb78b
    at f._proxy_main (25dcdf7f-aba0-4cbe-b…1097e200b86:226:454)
    at C:\Users\Zean\Stream…as-capture.js:354:9
    at new Promise (<anonymous>)
    at Object.run (C:\Users\Zean\Stream…s-capture.js:351:14)
    at C:\Users\Zean\Stream…-capture.js:2115:60
    at step (C:\Users\Zean\Stream…-capture.js:1325:23)
    at Object.next (C:\Users\Zean\Stream…-capture.js:1306:53)
    at fulfilled (C:\Users\Zean\Stream…-capture.js:1297:58)

Typically called from here.

document.getElementById('ui-record-stream').onclick = () => {
    if (isRecording != false) {
        isRecording = false
        try {
            CanvasCapture.stopRecord()
            document.getElementById('ui-record-status').innerText = 'camera'
        } catch (e) {
            console.error(`Failed to stop recording. Err: ${e}`)
        }
    } else {
        CanvasCapture.beginVideoRecord({
            format:  CanvasCapture.MP4,
            name: `StreamsoftCapture-${HandlerDate.getFullYear()}-${HandlerDate.getMonth()}-${HandlerDate.getDay}-at-${HandlerDate.getHours}-${HandlerDate.getMinutes()}`,
            onExportProgress: (HandlerExportProgress) => {
                console.log(`EXPORT: export_status=${HandlerExportProgress}`)
            },
            onExportFinish: () => {
                console.log('Finished exporting capture')
            },
            onError: (HandlerExportError) => {
                console.error(`ERROR: ${HandlerExportError}`)
            }
        })
        isRecording = true
        console.log('Set isRecording to true')
        console.log(`Status of recording in MP4: ${CanvasCapture.browserSupportsMP4()}`)
        try {
            CanvasCapture.recordFrame()
            document.getElementById('ui-record-status').innerText = 'square'
            console.log('Attempted to start recording')
        } 
        catch (e) {
            console.error(`Failed to record. Err: ${e}`)
        }
    }
}

I'm running this on an electron environment v24.3.1.

bravokiloecho commented 1 year ago

I'm having this exact problem using https://github.com/saltyshiomix/nextron

I'd love to find a solution!

amandaghassaei commented 1 year ago

Internally the library loads up a webworker script via

// Make it so we don't have to specify workersPath for CCapture gif recorder.
// This is not a large file, so no need to separate from lib.
// @ts-ignore
import gifWorkerString from 'raw-loader!./CCapture.js/gif.worker.js';
// @ts-ignore
import * as JSZip from 'jszip';
const gifWorkersPath = URL.createObjectURL(new Blob([gifWorkerString]));

does installing raw-loader fix it? what are you using to build this project?