Socket
Socket
Sign inDemoInstall

@3cr/viewer-browser-development

Package Overview
Dependencies
11
Maintainers
0
Versions
52
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@3cr/viewer-browser-development

![](https://img.shields.io/badge/tests-successful-green) ![](https://img.shields.io/circleci/build/bitbucket/medvr/3cr-sdk-browser/main)


Version published
Weekly downloads
418
increased by123.53%
Maintainers
0
Created
Weekly downloads
 

Readme

Source

@3cr/viewer-browser-development

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

  1. 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)
    
  2. 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()
    
  3. (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()
    

Contributing

Pull requests are welcome. For changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

FAQs

Package last updated on 14 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc