@3cr/viewer-browser-development NPM

@3cr/viewer-browser-development

npm.io

Ecosystem integration for installing and running 3DICOM Online Viewer (3CR-OV) within the Browser (client-side)

3DICOM Online Viewer (3CR-OV) Playground

Include `@3cr/viewer-browser-development` script

Choose one of the following ways

HTML Script Tag
Insert this line into your index.html
```
<script src="https://cdn.jsdelivr.net/npm/@3cr/viewer-browser-development@{{version}}/dist/Viewer3CR.umd.js"> </script>
```
Note: Please ensure you replace the {{version}} with the version of the viewer you want.

JS/TS way

You can also include it dynamically within your code.

Typescript (.ts)

export async function loadViewerScript(version: string): Promise<void> {
  return new Promise<void>((resolve) => {
    const s = document.createElement('script');
    s.onload = () => {
      resolve()
    }
    s.src = `https://cdn.jsdelivr.net/npm/@3cr/viewer-browser-development@${version}/dist/Viewer3CR.umd.js`;
    document.head.appendChild(s);
  })
}

// ...

await loadViewerScript("1.0.0");

Javascript (.js)

export async function loadViewerScript(version) {
  return new Promise((resolve) => {
    const s = document.createElement('script');
    s.onload = () => {
      resolve()
    }
    s.src = `https://cdn.jsdelivr.net/npm/@3cr/viewer-browser-development@${version}/dist/Viewer3CR.umd.js`;
    document.head.appendChild(s);
  })
}
 
// ...

await loadViewerScript("1.0.0");

Using the Package

Register 3DICOM Online Viewer version
Call the registerViewer function with the version of 3CR you would like to view. This will generate a new container to load the viewer within and register the 3CR Instance.
Typescript (.ts) / Javascript (.js)
```
const VERSION_3CR: string = '1.0.0';

await window.registerViewer(VERSION_3CR)
```
Load in the 3VXL file
Generate the 3VXL file and Decryption Key/Iv and supply that to the loadViewer function
Note: You can supply undefined/nothing to the loadViewer() function to display a default scan for testing purposes.
Typescript (.ts) / Javascript (.js)
```
const payload = {
  Url: "<Some presigned URL to a 3VXL file.>",
  DecryptionKey: {
    Iv: "<Initialisation Vector of the Key>",
    Key: "<Decryption Key>"
  }
}
await window.loadViewer(payload)

// OR

await window.loadViewer()
```
(Optional) Clean up
In order to ensure the css namespace and data from the viewer is cleaned up and removed after execution, call ejectViewer
Note: You may also want to clean up the initial script you loaded on your site, by removing the nodes of the script you created in Include @3cr/viewer-browser-development script
Typescript (.ts) / Javascript (.js)
```
await window.ejectViewer()
```