[Bug] Error: No JPEG Lossless decoder loaded

[naccib]

Describe the Bug

Cornerstone can not load DICOM images provided using WadoURI.

This is a slightly modified version of the NextJS template.

Steps to Reproduce

1. Load a set of DICOM images using the browser's file input feature
2. Set each image ID to the URL of the images with the "wadouri:" prefix
3. Load the images into a new Volume

"use client"

import { useEffect, useState,  useRef } from "react"
import { createImageIdsAndCacheMetaData, initDemo } from "../lib"
import { createImageIdsAndCacheMetaDataFromLocalFiles } from "@/lib/createImageIdsAndCacheMetaData"
import {
  RenderingEngine,
  Enums,
  type Types,
  volumeLoader,
} from "@cornerstonejs/core"

export default function App() {
    const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);

    const elementRef = useRef<HTMLDivElement>(null)
    const running = useRef(false)

    useEffect(() => {
        const setup = async () => {
          if (running.current) {
            return
          }
          running.current = true
          await initDemo()
    
          // Get Cornerstone imageIds and fetch metadata into RAM
          const imageIds = uploadedFiles.map((file) => `wadouri:${URL.createObjectURL(file)}`)

          console.log(imageIds)
    
          // Instantiate a rendering engine
          const renderingEngineId = "myRenderingEngine"
          const renderingEngine = new RenderingEngine(renderingEngineId)
          const viewportId = "CT_STACK"
    
          const viewportInput = {
            viewportId,
            type: Enums.ViewportType.ORTHOGRAPHIC,
            element: elementRef.current as HTMLDivElement,
            defaultOptions: {
              orientation: Enums.OrientationAxis.SAGITTAL,
            },
          }
    
          renderingEngine.enableElement(viewportInput)
    
          // Get the stack viewport that was created
          const viewport = renderingEngine.getViewport(viewportId) as Types.IVolumeViewport
    
          // Define a volume in memory
          const volumeId = "myVolume"
          const volume = await volumeLoader.createAndCacheVolume(volumeId, {
            imageIds
          })
    
          // Set the volume to load
          volume.load()
    
          // Set the volume on the viewport and it's default properties
          viewport.setVolumes([{ volumeId }])
    
          // Render the image
          viewport.render()
        }
    
        if(uploadedFiles.length > 0 && elementRef.current && !running.current) {
            setup()
        }
    
        // Create a stack viewport
      }, [elementRef, running, uploadedFiles])

    return (
        <div className="h-screen w-screen">
            <div>
                <input
                    type="file"
                    webkitdirectory=""
                    directory=""
                    onChange={(e) => {
                        const files = Array.from(e.target.files || [])
                        setUploadedFiles(files)

                        console.log(files)
                    }}
                />
            </div>

            <div ref={elementRef} className="w-full h-full bg-red-400">

            </div>
        </div>
    )
}

The current behavior

No images are loaded and this error is thrown:

Uncaught (in promise) {error: Error: No JPEG Lossless decoder loaded at decodeJPEGLossless (webpack-internal:///(app-pages-br…, dataSet: a }

The expected behavior

The images are loaded and displayed.

OS

Windows 10

Node version

16.14

Browser

Chrome 83