How to Install OHIF web-based DICOM Viewer in docker and connect to dcm4chee VNA

OHIF is a web-based open source Medical Imaging (DICOM) Viewer.

To install it on docker you can use either docker command line or for example portainer.

Command line approach

docker pull ohif/viewer
docker run -p 3000:80 ohif/viewer:latest

PS. Noticed that on 16/11/2021 the latest has some issues so you can use instead this version:
docker pull ohif/viewer:v2.11.8.7749

Portainer aproach

If you prefer watching a video with all the steps check out my video below.

• Create a new volume by going to Volumes -> Add volume
• Fill in the Name as ohif and hit Create the volume

• Press on create container
• Fill in the name
• Fill the image

• Press on publish a new network port
• Map port 3000 from the host to port 80 on the container

• Under Advanced container settings choose volumes
• Map additional volume
• fill the container path as /usr/share/nginx/html/
• choose the volume ohif

Modify the configuration to connect to dcm4chee VNA

The configurations are inside the container under /usr/share/nginx/html/app-config.js

If you used portainer and connected a volume then you can go to your host machine and use for example nano to edit the configuration. If you didn’t create the volume you can use for example the below docker cp command to copy the config file from the host to the docker container (ohif is the container name).

sudo docker cp .\app-config.js ohif:/usr/share/nginx/html/app-config.js

You can use the below command to edit the file in nano if you have the volume created as in the portainer aproach.

sudo nano /var/lib/docker/volumes/ohif/_data/app-config.js

With nano edit the wado connections to point to your dcm4chee installation.

In my case I have dcm4chee running at the below address.

Note! If you point to localhost and then open ohif in the browser on the host machine it will work, but if you use it from a different machine it won’t work. So keep in mind that the browser is connecting to the dcm4chee urls.

    wadoUriRoot: 'http://192.168.0.200:8080/dcm4chee-arc/aets/DCM4CHEE/wado',
    qidoRoot: 'http://192.168.0.200:8080/dcm4chee-arc/aets/DCM4CHEE/rs',
    wadoRoot: 'http://192.168.0.200:8080/dcm4chee-arc/aets/DCM4CHEE/rs',

My full app-config.js is below

window.config = {
  // default: '/'
  routerBasename: '/',
  extensions: [],
  showStudyList: true,
  filterQueryParam: false,
  servers: {
    dicomWeb: [
      {
        name: 'DCM4CHEE',
        wadoUriRoot: 'http://192.168.0.200:8080/dcm4chee-arc/aets/DCM4CHEE/wado',
        qidoRoot: 'http://192.168.0.200:8080/dcm4chee-arc/aets/DCM4CHEE/rs',
        wadoRoot: 'http://192.168.0.200:8080/dcm4chee-arc/aets/DCM4CHEE/rs',
        qidoSupportsIncludeField: true,
        imageRendering: 'wadors',
        thumbnailRendering: 'wadors',
        enableStudyLazyLoad: true,
        supportsFuzzyMatching: true,
      },
    ],
  },
  // Extensions should be able to suggest default values for these?
  // Or we can require that these be explicitly set
  hotkeys: [
    // ~ Global
    {
      commandName: 'incrementActiveViewport',
      label: 'Next Viewport',
      keys: ['right'],
    },
    {
      commandName: 'decrementActiveViewport',
      label: 'Previous Viewport',
      keys: ['left'],
    },
    // Supported Keys: https://craig.is/killing/mice
    // ~ Cornerstone Extension
    { commandName: 'rotateViewportCW', label: 'Rotate Right', keys: ['r'] },
    { commandName: 'rotateViewportCCW', label: 'Rotate Left', keys: ['l'] },
    { commandName: 'invertViewport', label: 'Invert', keys: ['i'] },
    {
      commandName: 'flipViewportVertical',
      label: 'Flip Horizontally',
      keys: ['h'],
    },
    {
      commandName: 'flipViewportHorizontal',
      label: 'Flip Vertically',
      keys: ['v'],
    },
    { commandName: 'scaleUpViewport', label: 'Zoom In', keys: ['+'] },
    { commandName: 'scaleDownViewport', label: 'Zoom Out', keys: ['-'] },
    { commandName: 'fitViewportToWindow', label: 'Zoom to Fit', keys: ['='] },
    { commandName: 'resetViewport', label: 'Reset', keys: ['space'] },
    // clearAnnotations
    { commandName: 'nextImage', label: 'Next Image', keys: ['down'] },
    { commandName: 'previousImage', label: 'Previous Image', keys: ['up'] },
    // firstImage
    // lastImage
    {
      commandName: 'previousViewportDisplaySet',
      label: 'Previous Series',
      keys: ['pagedown'],
    },
    {
      commandName: 'nextViewportDisplaySet',
      label: 'Next Series',
      keys: ['pageup'],
    },
    // ~ Cornerstone Tools
    { commandName: 'setZoomTool', label: 'Zoom', keys: ['z'] },
    // ~ Window level presets
    {
      commandName: 'windowLevelPreset1',
      label: 'W/L Preset 1',
      keys: ['1'],
    },
    {
      commandName: 'windowLevelPreset2',
      label: 'W/L Preset 2',
      keys: ['2'],
    },
    {
      commandName: 'windowLevelPreset3',
      label: 'W/L Preset 3',
      keys: ['3'],
    },
    {
      commandName: 'windowLevelPreset4',
      label: 'W/L Preset 4',
      keys: ['4'],
    },
    {
      commandName: 'windowLevelPreset5',
      label: 'W/L Preset 5',
      keys: ['5'],
    },
    {
      commandName: 'windowLevelPreset6',
      label: 'W/L Preset 6',
      keys: ['6'],
    },
    {
      commandName: 'windowLevelPreset7',
      label: 'W/L Preset 7',
      keys: ['7'],
    },
    {
      commandName: 'windowLevelPreset8',
      label: 'W/L Preset 8',
      keys: ['8'],
    },
    {
      commandName: 'windowLevelPreset9',
      label: 'W/L Preset 9',
      keys: ['9'],
    },
  ],
  cornerstoneExtensionConfig: {},
  // Following property limits number of simultaneous series metadata requests.
  // For http/1.x-only servers, set this to 5 or less to improve
  //  on first meaningful display in viewer
  // If the server is particularly slow to respond to series metadata
  //  requests as it extracts the metadata from raw files everytime,
  //  try setting this to even lower value
  // Leave it undefined for no limit, sutiable for HTTP/2 enabled servers
  // maxConcurrentMetadataRequests: 5,
};