@3cr/viewer-browser NPM

@3cr/viewer-browser

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` 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@{{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@${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@${version}/dist/Viewer3CR.umd.js`;
    document.head.appendChild(s);
  });
}

// ...

await loadViewerScript('1.0.0');

Using the Package

Register 3DICOM Online Viewer version
Call the mountViewer 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.mountViewer(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 unmountViewer
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 script
Typescript (.ts) / Javascript (.js)
```
await window.unmountViewer();
```