Embedded Viewer

The quickest and easiest way to get the OHIF Viewer up and running is to embed it into an existing web application. It allows us to forego a "build step", and add a powerful medical imaging viewer to an existing web page using only a few include tags. Here's how it works:

Embedded Viewer Diagram
embedded viewer diagram
  1. Create a new web page or template that includes the following external dependencies:
  1. The WADO Image Loader Codecs and Web Worker source code should be accessible from your server's root
  2. Create a JS Object to hold the OHIF Viewer's configuration. Here are some example values that would allow the viewer to hit our public PACS:
// Set before importing `ohif-viewer`
window.config = {
  // default: '/'
  routerBasename: '/',
  // default: ''
  relativeWebWorkerScriptsPath: '',
  servers: {
    dicomWeb: [
      {
        name: 'DCM4CHEE',
        wadoUriRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado',
        qidoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
        wadoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
        qidoSupportsIncludeField: true,
        imageRendering: 'wadors',
        thumbnailRendering: 'wadors',
        requestOptions: {
          requestFromBrowser: true,
        },
      },
    ],
  },
};
  1. Render the viewer in the web page's target div
// Made available by the `ohif-viewer` script included in step 1
var Viewer = window.OHIFStandaloneViewer.App;
var app = React.createElement(Viewer, window.config, null);

ReactDOM.render(app, document.getElementById('ohif-viewer-target'));

Tips & Tricks

I'm having trouble getting this to work. Where can I go for help?

First, check out this fully functional CodeSandbox example. If you're still having trouble, feel free to search or GitHub issues. Can't find anything related your problem? Create a new one.

When I include bootstrap, other styles on my page no longer work correctly. What can I do?

When we include bootsrap (and the other dependencies), they are added globally. This has the potential of causing conflicts with other scripts and styles on the page. To prevent this, embed the viewer in a new/empty web page. Have that working? Good. Now embed that new page using an <iframe> element.

This should produce the expected result while also protecting your page from any globally defined styles/scripts.

results matching ""

    No results matching ""