Open Ohif Viewer in Iframe

[dhavalsolankislk]

Hello, We want to use OHIF viewer in our application but we want to use OHIF viewer globally. So we are looking for a concept to open in Iframe, but we have a requirement that when we open in iframe we want to pass dcm4chee configuration every time we open in iframe, so that we can use OHIF viewer globally and just pass seriesInstanceId of dicom image and dcm4chee configuration. How can we achieve this.

[dannyrb]

@dhavalsolankislk, what have you tried? Where are you getting stuck? We have some guidance on embedding the viewer in an iFrame in our docs. You can open a specific study by setting the URL of the iFrame, and the configuration is a simple JS object that could be server rendered if you need it to be dynamic.

[kamlesh0606]

Hi,

thanks for reply,

I checked embedded-viewer. but do not found iFrame code . So Please provide iFrame code.

Need to set dicom configuration (Like window.config object) then open directly study using ({Server IP + port}/viewer/{studyId}) .

So My Application Pass dicom config object into iFrame then open dicom study using my DICOM Image Archives server.

Thanks kamlesh

[pieper]

I have a similar use case but couldn't find an answer anywhere.

I forked @dannyrb 's iframe sandbox and tried adding a studyUID but I get three weird nested iframes:

https://codesandbox.io/s/ohif-iframe-example-m8m3f

I also tried in colab and can get the studylist but can't open a study. When I try iframes they don't work.

https://colab.research.google.com/drive/1AVD_U1nO-vm5zZqXelUP1ZURJBpJXN-M

Also doesn't work in an index.html that only contains:

<h1>Regular content</h1>
Hello world
<h1>iframe content</h1>
<iframe src="https://viewer.ohif.org/viewer/1.3.6.1.4.1.5962.99.1.3814087073.479799962.1489872804257.3.0" width="1200" height="100"></iframe>
<h1>more iframe content</h1>
<iframe src="https://viewer.ohif.org" width="1200" height="100"></iframe>

[spalte]

It looks to me like people are talking about two separate problems here.

1: iframe https://viewer.ohif.org sets "x-frame-options: deny" so you will not be able to embed content hosted from that location in an iframe. You can however host your own OHIF that does not set this HTTP header.

2: Send DICOMweb configuration It is possible to set the OHIF configuration by passing a URL to the configuration JSON as the url query parameter. We currently do this with KHEOPS for example.

Example: Putting it together: Launch a local OHIF using docker:

docker run --rm -p 3000:80 ohif/viewer:v3.7.7.10368

Save the following HTML to a file and open it up in a browser (Other than Safari since Safari doesn't respect the standard and doesn't treat connections to 127.0.0.1 as secure connections, I tested on Chrome on MacOS 10.15.3)

<h1>Regular content</h1>
Hello world
<h1>iframe content</h1>
<iframe src="http://127.0.0.1:3000/viewer?url=https%3A%2F%2Fdemo.kheops.online%2Fapi%2Flink%2Fc2hyQTv1zZfe4JxO7aO7Ql%2Fohifservermetadata&studyInstanceUids=2.16.840.1.113669.632.20.1211.10000502993&seriesInstanceUids=1.3.12.2.1107.5.2.31.30222.30000007072005313478100001711" width="1200" height="400"></iframe>

Some notes: OHIF seems to have broken the url configuration loading very recently (as of v3.7.8.10404) so we load a slightly older version of OHIF. Issue #1572

KHEOPS creates a custom DICOMweb endpoint for each album, and the following is a link to the configuration of the endpoint, in OHIF format, that is passed to OHIF. https://demo.kheops.online/api/link/c2hyQTv1zZfe4JxO7aO7Ql/ohifservermetadata

studyInstanceUids tells the OHIF viewer what study to open. seriesInstanceUids tells the OHIF viewer what series to show initially.

[dannyrb]

Thanks for the detailed response, @spalte .

@pieper, the reason setting the full URL doesn't work is because that request is sent to the server, and the server has no resources at that route. For the OHIF PWA to work, you have to add a redirect rule so that all unmatched results return the application's index.html. From there, React's client-side routing takes over.

The issue is that many people using the "Script Tag" version of the OHIF Viewer don't have the ability to change any part of their server. This makes me think the "Script Tag" version should use "hash routing" instead of the Browser History API. We can accomplish this by swapping out the BrowserRoute with HashRouter when we build the "Script Tag" version; or by allowing either and making it configurable at build time with an environment variable.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.