When I was try to use ffmpeg to convert video file extension, SharedArrayBuffer has troubles

I want to convert video extension to .mp4 by using ffmpeg.

At first, I wrote code like this.

import{ createFFmpeg, fetchFile, } from '@ffmpeg/ffmpeg'

export default {
    setup() {
        const ffmpeg = createFFmpeg({ log: true, })
        const previewVideo = async (event) => {
            const file = event.target.files[0]

            if (file.size > 1024*1024*200) {
                alert("100MB 이하의 동영상만 등록할 수 있습니다.\n\n" + "현재 파일 용량" + (Math.round(file.size / (1024 * 1024))) + "MB")    
            } else {
                const previewVideo = document.getElementById("previewVideo")
                console.log('start')
                await ffmpeg.load()
                console.log('start transcoding')
                ffmpeg.FS('writeFile', 'test.mov', await fetchFile(file))
                await ffmpeg.run('-i', 'test.mov', 'test.mp4')
                console.log('complete transcoding')
                const data = ffmpeg.FS('readFile', 'test.mp4')
                const videoUrl = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4'}))
                previewVideo.setAttribute("src", videoUrl)
                previewVideo.play()
            }
        }
    }
}

But, when I inputed video file, below error occurred.

Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined
    at 459bf020-690b-4964-b875-8028d2bcaf81:22:175
    at Object.load (createFFmpeg.js:64:20)
    at async Proxy.previewVideo (PostModal.vue:99:17)

PostModal.vue:99:17 = await ffmpeg.load()

So, I searched in google, finally I found one solution. And added below code in index.html body's bottom

<script>
  if (!crossOriginIsolated) SharedArrayBuffer = ArrayBuffer
</script>

And I could resolve that error!! However, another error occurred like below.

Uncaught (in promise) Error: bad memory
    at 7d608d39-864a-4c63-930a-5ec5065337fe:23:1
    at Object.load (createFFmpeg.js:64:20)
    at async Proxy.previewVideo (PostModal.vue:99:17)

I searched again. And then I found some people recommend to use coi-serviceworker.js I added below code in index.html body's

<script src="coi-serviceworker.js"></script>

And added file coi-serviceworker.js in my repo file github link

However, another two errors were occurred again...

An SSL certificate error occurred when fetching the script.

COOP/COEP Service Worker failed to register: DOMException: Failed to register a ServiceWorker for scope ('https://localhost:3000/') with script ('https://localhost:3000/coi-serviceworker.js'): An SSL certificate error occurred when fetching the script.

some solution recommended change Allow invalid certificates for resources loaded from localhost. to enable in chrome://flags/#allow-insecure-localhost

But, still occurred same error. I'm stuck here since I didn't find another solution. Could you have any another solution?