feat: add support for WADO-URI Streaming Volume Loading

packages/core/examples/volumeBasicWadoUri/index.ts

@@ -0,0 +1,90 @@
+import {
+  RenderingEngine,
+  Types,
+  Enums,
+  volumeLoader,
+} from '@cornerstonejs/core';
+import {
+  initDemo,
+  setTitleAndDescription,
+  setCtTransferFunctionForVolumeActor,
+  wadoURICreateImageIds
+} from '../../../../utils/demo/helpers';
+
+// This is for debugging purposes
+console.warn(
+  'Click on index.ts to open source code for this example --------->'
+);
+
+const { ViewportType } = Enums;
+
+// ======== Set up page ======== //
+setTitleAndDescription(
+  'Basic Volume using streaming WADOURI',
+  'Displays a DICOM series in a Volume viewport.'
+);
+
+const content = document.getElementById('content');
+const element = document.createElement('div');
+element.id = 'cornerstone-element';
+element.style.width = '500px';
+element.style.height = '500px';
+
+content.appendChild(element);
+// ============================= //
+
+/**
+ * Runs the demo
+ */
+async function run() {
+  // Init Cornerstone and related libraries
+  await initDemo();
+
+  const imageIds = wadoURICreateImageIds();
+
+  // Instantiate a rendering engine
+  const renderingEngineId = 'myRenderingEngine';
+  const renderingEngine = new RenderingEngine(renderingEngineId);
+
+  // Create a stack viewport
+  const viewportId = 'CT_SAGITTAL_STACK';
+  const viewportInput = {
+    viewportId,
+    type: ViewportType.ORTHOGRAPHIC,
+    element,
+    defaultOptions: {
+      orientation: Enums.OrientationAxis.SAGITTAL,
+      background: <Types.Point3>[0.2, 0, 0.2],
+    },
+  };
+
+  renderingEngine.enableElement(viewportInput);
+
+  // Get the stack viewport that was created
+  const viewport = <Types.IVolumeViewport>(
+    renderingEngine.getViewport(viewportId)
+  );
+
+  // Define a unique id for the volume
+  const volumeName = 'CT_VOLUME_ID'; // Id of the volume less loader prefix
+  const volumeLoaderScheme = 'cornerstoneStreamingImageVolume'; // Loader id which defines which volume loader to use
+  const volumeId = `${volumeLoaderScheme}:${volumeName}`; // VolumeId with loader id + volume id
+
+  // Define a volume in memory
+  const volume = await volumeLoader.createAndCacheVolume(volumeId, {
+    imageIds,
+  });
+
+  // Set the volume to load
+  volume.load();
+
+  // Set the volume on the viewport
+  viewport.setVolumes([
+    { volumeId, callback: setCtTransferFunctionForVolumeActor },
+  ]);
+
+  // Render the image
+  viewport.render();
+}
+
+run();