{"type":"doc","content":[{"type":"paragraph","content":[{"text":"Embed your stream into a webpage using iframe and communicate with your Unreal Engine Application.","type":"text"}]},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"To keep this tutorial super simple we will look into a very basic webpage.","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Instructions","type":"text"}]},{"type":"paragraph","content":[{"text":"We assume that your webpage already includes both a head and body section, similar to the following:","type":"text"}]},{"type":"codeBlock","content":[{"text":"\n\n\nPage Title\n\n\n\n

This is a Heading

This is a paragraph.

\n\n\n","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Find the sample webpage here:","type":"text"},{"type":"hardBreak"},{"type":"inlineCard","attrs":{"url":"https://www.w3schools.com/html/"}},{"text":" or ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default"}},{"text":" ","type":"text"}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"To ","type":"text"},{"text":"embed the stream,","type":"text","marks":[{"type":"strong"}]},{"text":" follow the below instructions: ","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"First, collect the simple ","type":"text"},{"text":"embedding script","type":"text","marks":[{"type":"strong"}]},{"text":" from your","type":"text"},{"text":" ","type":"text","marks":[{"type":"strong"}]},{"text":"E3DS Control Panel","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://controlpanel.eagle3dstreaming.com/"}}]},{"text":":","type":"text"}]}]}]},{"type":"paragraph","marks":[{"type":"indentation","attrs":{"level":1}}],"content":[{"text":"-","type":"text"},{"text":"Select your App","type":"text","marks":[{"type":"link","attrs":{"href":"https://eagle3dstreaming.atlassian.net/wiki/spaces/docs/pages/257556642"}}]},{"text":" from 'Step 1: Select an App'.","type":"text"}]},{"type":"paragraph","marks":[{"type":"indentation","attrs":{"level":1}}],"content":[{"text":"-","type":"text"},{"text":"Select your Config","type":"text","marks":[{"type":"link","attrs":{"href":"https://eagle3dstreaming.atlassian.net/wiki/spaces/docs/pages/5111809"}}]},{"text":" from ‘Step 2: Select a Config’.","type":"text"}]},{"type":"paragraph","marks":[{"type":"indentation","attrs":{"level":1}}],"content":[{"text":"-Click ‘","type":"text"},{"text":"Copy iFrame Script","type":"text","marks":[{"type":"strong"}]},{"text":"’ from ‘Step 3: Generate URLs’ to copy the code in the clipboard.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":586,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":586,"alt":"image-20240516-143054.png","id":"b20e074f-6eec-4b28-9be7-33c8ca902cd2","collection":"contentId-17236023","type":"file","height":368}},{"type":"caption","content":[{"text":"Image 1. ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}},{"type":"em"}]},{"text":"Standalone Apps","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}},{"type":"strong"},{"type":"em"}]},{"text":" :","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}},{"type":"em"}]},{"text":" Step 3:Generate URLs","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}},{"type":"strong"},{"type":"em"}]},{"text":" : ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}},{"type":"em"}]},{"text":"Copy iFrame Script","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}},{"type":"strong"},{"type":"em"}]}]}]},{"type":"orderedList","attrs":{"order":2},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Paste the code below anywhere within the body section of the code provided above. In our case, it looks like the following: ","type":"text"}]}]}]},{"type":"codeBlock","content":[{"text":"\n\n\n\n\n\nPage Title\n\n\n\n\n\n

This is a Heading

\n\n\n\n

This is a paragraph.

\n\n\n\n","type":"text"}]},{"type":"paragraph"},{"type":"orderedList","attrs":{"order":3},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The output will look something like the following:","type":"text"}]}]}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1432,"id":"21a0d711-f562-435f-a412-76064d0d3fd4","collection":"contentId-17236023","type":"file","height":417}},{"type":"caption","content":[{"text":"Image 2. ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}},{"type":"em"}]},{"text":"Standalone Apps","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}},{"type":"strong"},{"type":"em"}]},{"text":": Paste this code anywhere inside the body section ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}},{"type":"em"}]}]}]},{"type":"orderedList","attrs":{"order":4},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"If we modify the code to something like:","type":"text"}]}]}]},{"type":"codeBlock","marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"text":"Page Title\n\n

This is a Heading

\n\n\n\n

This is a paragraph.

\n\n","type":"text"}]},{"type":"paragraph"},{"type":"orderedList","attrs":{"order":5},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The output will look something like the following:","type":"text"}]}]}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"We just modified the size to make the view of streaming viewport bigger by adding ","type":"text"},{"text":"width=\"800\" height=\"600\".","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1430,"id":"c5c6ae11-cb79-47c1-96cd-462f8e66b09f","collection":"contentId-17236023","type":"file","height":644}},{"type":"caption","content":[{"text":"Image 3. ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}},{"type":"em"}]},{"text":"Standalone Apps","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}},{"type":"strong"},{"type":"em"}]},{"text":" : Adding ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}},{"type":"em"}]},{"text":"width=\"800\"","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}},{"type":"strong"},{"type":"em"}]},{"text":" ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}},{"type":"em"}]},{"text":"height=\"600\"","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}},{"type":"strong"},{"type":"em"}]}]}]},{"type":"paragraph","content":[{"text":"This is how easy it is to integrate streaming into an existing webpage.","type":"text"},{"type":"hardBreak"},{"text":"A skilled, knowledgeable front-end developer can refine it for better precision and aesthetics.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":2395,"id":"686a1c19-3925-4022-9f53-2cb9d3209ee5","collection":"contentId-17236023","type":"file","height":1052}},{"type":"caption","content":[{"text":"Image 4. Code in the clipboard : interface change","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}},{"type":"em"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Embedding a meeting stream (Host/Guest) into the webpage","type":"text"}]},{"type":"paragraph","content":[{"text":"In your Control Panel:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Select your App","type":"text","marks":[{"type":"link","attrs":{"href":"https://eagle3dstreaming.atlassian.net/wiki/spaces/docs/pages/257556642"}}]},{"text":" from ‘Step 1: Select an App’.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Select your Config","type":"text","marks":[{"type":"link","attrs":{"href":"https://eagle3dstreaming.atlassian.net/wiki/spaces/docs/pages/5111809"}}]},{"text":" from ‘Step 2: Select a Config’.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Click ‘","type":"text"},{"text":"Generate Meeting URLs","type":"text","marks":[{"type":"strong"}]},{"text":"’ in ‘Step 4: Generate Meeting URLs’.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Click on '","type":"text"},{"text":"Copy iFrame Script","type":"text","marks":[{"type":"strong"}]},{"text":"' on both the Host and Guest links.","type":"text"}]}]}]},{"type":"mediaSingle","attrs":{"layout":"center","width":630,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":974,"alt":"image-20240516-150117 (1).png","id":"a668cd7a-b2dd-4e72-a465-21d653accb8d","collection":"contentId-17236023","type":"file","height":313}},{"type":"caption","content":[{"text":"Image 5. ","type":"text","marks":[{"type":"em"}]},{"text":"Step 4:","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":" ","type":"text","marks":[{"type":"em"}]},{"text":"Generate Meeting URLs","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":" : ","type":"text","marks":[{"type":"em"}]},{"text":"Copy IframeScript","type":"text","marks":[{"type":"strong"},{"type":"em"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Using VOIP via iFrame ","type":"text"}]},{"type":"paragraph","content":[{"text":"To be able to use VOIP via iframe you have to add users microphone access permission to iframe","type":"text"}]},{"type":"paragraph","content":[{"text":"\n\n \n \n","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"3. Quality of the stream in iFrame","type":"text"}]},{"type":"paragraph","content":[{"text":"The Quality of the stream drops after embedding the App URL in iFrame.","type":"text"}]},{"type":"paragraph","content":[{"text":"You can set a custom resolution by increasing the width and the height from iFrame. ","type":"text"},{"text":"See this document. ","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://eagle3dstreaming.atlassian.net/wiki/spaces/docs/pages/320897025"}}]}]},{"type":"rule"},{"type":"heading","attrs":{"level":1},"content":[{"text":"Need help? Contact ","type":"text"},{"text":"Support","type":"text","marks":[{"type":"link","attrs":{"href":"https://eagle3dstreaming.atlassian.net/servicedesk/customer/portal/2"}}]}]},{"type":"paragraph","content":[{"text":"Submit a new request at ","type":"text"},{"text":"E3DS support portal","type":"text","marks":[{"type":"link","attrs":{"href":"https://eagle3dstreaming.atlassian.net/servicedesk/customer/portals"}}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"Requests sent on weekends will not be addressed until the following business day.","type":"text"}]},{"type":"paragraph"}],"version":1}