Heratio Help Center article. Category: Viewers & Media.

IIIF Integration

User Guide

View high-resolution images, stream audio/video, browse 3D models, annotate content, and manage IIIF collections.


Overview

IIIFINTEGRATIONImagesAudio/Video3DModelsDocumentsDeepZoomStreamingAR/WebXRPDF.jsOpenSeadragonTranscodingmodel-viewerviewerMiradorTranscriptionSnippetsAnnotationsCollectionsComparisonAuthenticationW3CstandardCuratedsetsLogin/ClickthroughDrawonimagesofmanifestsToken-basedaccess

What is IIIF?

IIIFBENEFITSDeepZoom-ViewtinydetailsatfullresolutionFastLoading-Onlyloadsthetilesyou'reviewingMulti-page-BrowsedocumentspagebypageShareable-LinkdirectlytospecificviewsComparable-ViewimagessidebysideInteroperable-WorkswithexternalIIIFresourcesMediaStreaming-Playaudio/videowithon-the-flytranscodingoflegacyformats3DSupport-View3DmodelswithARcapabilityAnnotations-Drawandcommentonimages

How It Works

When you view a record with digital objects, the IIIF system automatically:

RecordhasdigitalobjectsImage(JPEG,TIFF,PNG,etc.)IIIFmanifestgeneratedDeepzoomviewer(OpenSeadragonorMirador)PDFdocumentPDF.jsviewer(pagenavigation,zoom)Audio/Video(anyformat)HTML5playerwithon-the-flytranscoding(legacyformatsconvertedtoMP4/MP3)3DModel(GLB,OBJ,STL,PLY,USDZ)model-viewerwithARsupportMulti-pageTIFFOnecanvasperpage,thumbnailstripnavigation

Viewers

Choosing a Viewer

The system auto-selects the best viewer for your content. For images, you can switch between viewers using the toolbar:

VIEWERTOOLBAR[OpenSeadragon][Mirador][Fullscreen][Download][Annotations][IIIFBadge]FastdeepRichIIIFCommoncontrolszoomviewerworkspaceavailableinallviewers

Your viewer preference is saved in your browser for next time.

OpenSeadragon (Image Deep Zoom)

OPENSEADRAGONHighResolutionImageZoom&PanMiniMap[][-][Home][Full][Rotate][Flip]Bestfor:Fastbrowsing,examiningdetails

Mirador (Rich IIIF Workspace)

MIRADORSidePanelImageViewer-Info-Attribution(deepzoom)-Annotations-Search-Canvaslist[Thumbnails]Page3of25[<][>]Bestfor:Research,annotations,multi-windowcomparison

PDF.js (Document Viewer)

PDFVIEWERPDFDocumentRenderedwithPDF.js(nobrowserpluginneeded)[<]Page5of42[>][][-][Download]Bestfor:Reports,correspondence,scanneddocuments

3D Model Viewer

3DMODELVIEWER3DModelRotate/Zoom/Pan[AR]Supported:GLB,GLTF,OBJ,STL,PLY,USDZAR:WebXR(Android),QuickLook(iOS)Bestfor:Museumobjects,archaeologicalfinds,sculptures

Audio/Video Player

MEDIAPLAYERVideo/AudioContentLegacyformatstranscodedon-the-fly(AVI,MOV,WMV,FLACMP4/MP3)[Play]●05:23/21:15[Volume][Speed][Fullscreen][Download]Bestfor:Oralhistory,filmarchives,musicrecordings

Basic Navigation

Zooming (Images)

ZOOMCONTROLS[]Click-Zoomin[-]Click-ZoomoutScrollwheel-Zoomin/outDouble-click-Zoomtothatpoint[Home]-Resettofullview

Panning

ClickanddragtomovearoundtheimageDragtomove

Multi-Page Documents

PAGENAVIGATION[<]PreviousPage3of25Next[>]12[3]45...Clickthumbnailorusearrowstonavigate.Multi-pageTIFFsauto-detected(upto100pages).

Media Streaming

Supported Formats

The system plays any format by transcoding legacy files to browser-compatible formats:

MEDIAFORMATSUPPORTNative(notranscoding):•Video:MP4(H.264),WebM•Audio:MP3,AAC,OGG,WAVTranscodedon-the-fly(FFmpeg):•Video:AVI,MOV,WMV,FLV,MKV,MXF,MPEG,3GP,VOB•Audio:AIFF,FLAC,WMA,AC3,AUAlltranscodedtoMP4(H.264AAC)orMP3forplayback.Seeking(rangerequests)supportedfornativeformats.

Transcription (Whisper)

Audio and video files can be transcribed to text:

TRANSCRIPTION1.Openanaudio/videorecord2.Click"Transcribe"button3.Waitforprocessing(runsinbackground)4.ViewtimestampedtranscriptbelowtheplayerExportformats:•JSON-Fulldatawithtimestampsandconfidence•VTT-WebVideoTextTracks(captions)•SRT-SubRipsubtitles•TXT-PlaintexttranscriptLanguages:Auto-detectedormanuallyspecified

Media Snippets

Create named clips from audio/video recordings:

SNIPPETSCreatebookmarksforspecificsections:TitleStartEndNotesOpeningremarks00:0002:15IntroductionKeytestimony05:3012:45MainevidenceClosingstatement18:0021:15SummaryClickasnippettojumptothatsection.Playbackauto-pausesattheendmarker.

Metadata Extraction

Technical metadata is automatically extracted from media files:

EXTRACTEDMETADATA(viaFFprobe)Duration:21:15Bitrate:1,500kbpsFileSize:45.2MBAudio:AAC,44100Hz,stereo,128kbpsVideo:H.264,1920x1080,25fpsTags:Title,Artist,Album,Year,Copyright

Format Conversion

The system can convert non-viewable formats for browser display:

FORMATCONVERSIONSourceFormatConvertedToToolPSD,CR2(RAW)JPEGImageMagickDOCX,XLSX,PPTXPDFLibreOfficeZIP,RAR,TGZFilelistingBuilt-inTXT,CSV,XMLPlaintextviewBuilt-inSVGRenderedimageBrowsernativeConversionsarecached—fastonrepeatviews.

Annotations

Drawing on Images

With OpenSeadragon, you can annotate images using the Annotorious tool:

ANNOTATIONTOOLSClick[Annotations]inthetoolbartoenable,then:[Rectangle]-Drawaboxaroundanarea[Polygon]-Drawacustomshape[Freehand]-DrawfreehandAfterdrawing:1.Atextboxappears2.Typeyourcomment3.Chooseapurpose:Comment,Tag,Describe,Transcribe4.ClickSaveAnnotationsaresavedtotheserverandvisibletootherusersviewingthesamerecord.

Viewing Annotations

Existing annotations appear as colored overlays on the image:

Annotation1ClicktoreadcommentAnno2Hoveroveranannotationtoseethecomment.Clicktoeditordelete(ifyoucreatedit).

IIIF Collections

What Are Collections?

Collections are curated groups of IIIF manifests — your own records or external resources from other institutions.

Browsing Collections

IIIFCOLLECTIONSSouthAfricanHeritagePhotographyCapeTownHistoricalViews(12items)JohannesburgMiningEra(8items)KwaZulu-NatalCulturalHeritage(15items)ExternalIIIFResourcesBritishLibrary-AfricaCollection(external)Smithsonian-AfricanArt(external)[NewCollection]

Creating a Collection (Admin)

  1. Go to IIIF Collections (via admin menu)
  2. Click New Collection
  3. Fill in name, description, attribution
  4. Add items — search your records or paste external manifest URIs
  5. Reorder items by drag-and-drop

Each collection generates a IIIF Collection manifest at: /manifest-collection/:slug/manifest.json

This URL can be loaded in any IIIF-compatible viewer worldwide.


Protected Content

Some images may require authentication to view at full resolution.

Access Levels

ACCESSTYPESPublic-NologinrequiredClickthrough-AgreetotermsofuseLoginRequired-MusthaveanaccountKiosk-Onlyaccessibleon-premisesRestricted-Specialpermissionneeded

Clickthrough Access

Some content requires you to agree to terms before viewing:

ACCESSREQUIREDThisresourcerequiresacknowledgmentofterms.Byclicking"IAgree"youacknowledgethat:-Thismaterialisforpersonalresearchonly-Youwillnotredistributewithoutpermission-Copyrightmayapplytothiscontent[IAgree]

What You See Without Access

Withoutauthentication:Afterauthentication:FullresolutionLow-resimagewiththumbnaildeepzoomLogintoviewfullFullaccessgranted

Authentication Flow

1.Viewprotectedimage2.Click"Login"or"IAgree"3.Pop-upwindowopens4.LoginoraccepttermsWindowclosesautomatically5.Fullimageloads

Keyboard Shortcuts

KEYACTIONor=Zoomin-or_Zoomout0(zero)ResetviewFTogglefullscreenPrevious/NextpageHomeFirstpageEndLastpageRRotate90degreesEscapeExitfullscreen

Fullscreen Mode

Click the Fullscreen button or press F to enter fullscreen. Press Escape or click the button again to exit.

FULLSCREENVIEWBestfordetailedexamination[PressESCtoexit]

Comparing Images (Mirador)

Mirador allows side-by-side comparison in a multi-window workspace:

Image1Image2(Beforerestoration)(Afterrestoration)Bothwindowshaveindependentzoomandpan.

Dedicated Comparison Page

You can also compare images from different records using the dedicated comparison viewer:

URL: /iiif/compare?slugs=slug1,slug2

Example: /iiif/compare?slugs=historical-photo-1,historical-photo-2

This opens a full-screen Mirador workspace in mosaic mode, with each manifest in its own panel. You can add more windows from the workspace controls.

From the researcher workspace (ahgResearchPlugin), use the "Compare selected" button to open selected items in the comparison viewer.


Tips

DODON'TUsefullscreenfordetailSquintatsmallviewsLettilesloadbeforemovingPanrapidlyUsekeyboardforspeedClickeverythingslowlyUseMiradorforresearchScreenshotlowresolutionCreatesnippetsforAVclipsNotetimestampsmanuallyAnnotatefindingsonimagesDescribelocationsintextCreatecollectionsforgroupsBookmarkindividualitemsDownloadoriginalswhenneededSavecompressedcopies

Troubleshooting

ProblemSolutionImageloadsslowlyWaitfortilestoloadCheckinternetconnectionBlurrywhenzoomedWaitforhigh-restilesMaybelimitoforiginalscanViewerwon'tloadRefreshthepageTryadifferentbrowserCheckbrowserconsoleforerrorsVideowon'tplayWaitfortranscodingtostartLegacyformatstakeamomentCheckFFmpegisinstalledTranscriptionnotappearingProcessingrunsinbackgroundCheckbackinafewminutesLargefilestakelonger3Dmodelblack/emptyFilemaybecorruptTryadifferentformat(GLB)CheckbrowserWebGLsupportAnnotationsnotsavingCheckyouareloggedinRefreshandtryagainFullscreennotworkingBrowsermayblockitTryF11forbrowserfullscreenAuthpopupblockedWhitelistthedomaininyourbrowserpopupsettings

Need Help?

Contact your system administrator if you experience issues.


Part of the Heratio AHG Framework Last Updated: March 2026