Using Azure AI Immersive Reader in ReactJS app

Question

I am trying to use Azure IA Immersive reader in ReactJS app. I have created a resource on Azure Portal I have the Key and Endpoint of Immersive reader resource.

Trying to use '@microsoft/immersive-reader-sdk' via code below:

 function launchImmersiveReader() {
    const content = {
      title: 'Immersive Reader',
      chunks: [ {
          content: 'Hello, world!'
      } ]
  };
    
    launchAsync({
      key: ----------,
      endPoint: 'https://abc-dfg-dev.cognitiveservices.azure.com/',
      content: content,
  });
}

Calling this function on button click

<button onClick={launchImmersiveReader}>Launch Immersive Reader</button>

But it gives me error message code: BadArgument, message:Content must not be null

Answer 1

Take a look at the official code sample. You have to pass the token, subdomain, content and options.

try {
  await launchAsync(token, process.env.REACT_APP_SUBDOMAIN, data, options)
}
catch (error) {
  console.log(error);
  alert("Error in launching the Immersive Reader. Check the console.");
}