Orthanc + OHIF Viewer V3 + Nginx ?

[Rana Asim Wajid]

I have been pulling my hair out over the last three days trying to figure this out without any luck.....

I have no idea if this is the right place but since I know a lot of Orthanc users use OHIF viewer with Orthanc it seems logical to ask here....

OHIF V3 with Orthanc MPR functionality works fine on localhost but Error: Uncaught (in promise) Error: SharedArrayBuffer is NOT supported in your browser see https://developer.chrome.com/blog/enabling-shared-array-buffer/ error occurs when accessing over that internet

Steps to Reproduce:

1. open any study on localhost and switch to MPR view. It will work find
2. open any study over the internet and switch to MPR view. It will generate Error: Uncaught (in promise) Error: SharedArrayBuffer is NOT supported in your browser see https://developer.chrome.com/blog/enabling-shared-array-buffer/ error in browser console and MPR will not generate.

my nginx config file is below:

worker_processes 1;

events { worker_connections 1024; }

http {

    upstream orthanc-server {
        server 127.0.0.1:8099;
    }

    server {
        listen [::]:8099 default_server;
        listen 8099;

        # CORS Magic
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow_Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';

        location / {

if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow_Credentials' 'true';
                add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
                add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain charset=UTF-8';
                add_header 'Content-Length' 0;
                return 204;
            }
try_files $uri $uri/ /index.html;
add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Origin' '*';
add_header Cross-Origin-Opener-Policy same-origin;
add_header Cross-Origin-Embedder-Policy require-corp;
add_header Cross-Origin-Resource-Policy same-origin;
  }
 
 
location /orthanc/{
       
            proxy_pass http://localhost:8042;
            proxy_set_header Authorization "Basic YWxuYXNhcnBhY3MbyybyybNhcnBhY3M1Nzc=";
            proxy_set_header Host $Host:8099/orthanc/;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Host $server_name;

            # CORS Magic
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow_Credentials' 'true';
            add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
            rewrite /orthanc(.*) $1 break;
                           }      
    }

}

My OHIF app-config.js is below

window.config = {
    routerBasename: "/",
    extensions: [],
    modes: [],
    customizationService: {},
    showStudyList: !0,
    maxNumberOfWebWorkers: 3,
    omitQuotationForMultipartRequest: !0,
    showWarningMessageForCrossOrigin: !0,
    showCPUFallbackMessage: !0,
    showLoadingIndicator: !0,
    maxNumRequests: {
        interaction: 100,
        thumbnail: 75,
        prefetch: 10
    },
    dataSources: [{
        friendlyName: "dcmjs DICOMWeb Server",
        namespace: "@ohif/extension-default.dataSourcesModule.dicomweb",
        sourceName: "dicomweb",
        configuration: {
            name: "aws",
            wadoUriRoot: '/orthanc/wado',
qidoRoot: '/orthanc/dicom-web',
wadoRoot: '/orthanc/dicom-web',
            qidoSupportsIncludeField: !1,
            supportsReject: !1,
            imageRendering: "wadors",
            thumbnailRendering: "wadors",
            enableStudyLazyLoad: !1,
            supportsFuzzyMatching: !1,
            supportsWildcard: !0,
            staticWado: !0,
            singlepart: "bulkdata,video,pdf"
        }
    }, {
        friendlyName: "dicom json",
        namespace: "@ohif/extension-default.dataSourcesModule.dicomjson",
        sourceName: "dicomjson",
        configuration: {
            name: "json"
        }
    }, {
        friendlyName: "dicom local",
        namespace: "@ohif/extension-default.dataSourcesModule.dicomlocal",
        sourceName: "dicomlocal",
        configuration: {}
    }],
    httpErrorHandler: e => {
        console.warn(e.status), console.warn("test, navigate to https://ohif.org/")
    },
    defaultDataSourceName: "dicomweb",
   
};

The current behavior:
OHIF V3 with Orthanc MPR functionality works fine on localhost but Error: Uncaught (in promise) Error: SharedArrayBuffer is NOT supported in your browser see https://developer.chrome.com/blog/enabling-shared-array-buffer/ error occurs when accessing over that internet

The expected behavior:
It should work over the internet as well as localhost

I tried using the example nginx config file here as a guide >>> https://github.com/OHIF/Viewers/blob/master/.docker/Nginx-Orthanc/config/nginx.conf but no luck.

[Callie Warner]

Hello Rana,

Your Orthanc and NGINX configurations are correct. You need to add the cross-origin headers to the server running OHIF Viewer itself for the MPR functionality to work. Add the following headers to server you're hosting OHIF Viewer on:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

I use S3 and CloudFront as my solution for hosting OHIF Viewer. If you've got a similar environment then I can help you to get them added there.

[James Manners]

SharedArrayBuffer is only available if you are accessing a secure (https) site. Are you using https to serve the site?

James

--
You received this message because you are subscribed to the Google Groups "Orthanc Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to orthanc-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/orthanc-users/4b3808f9-6f3a-40c1-86a2-b4863f922d31n%40googlegroups.com.

--

James Manners • Director Suite 3, Level 2, 10 Queens Road, Melbourne, Victoria 3004, Australia T:  03 9017 5230 M:  0422 973 235 E:  ja...@binary.com.au W:  binary.com.au