Embedding a SIRIUS room on your website

Embedding a SIRIUS room allows for you to add your SIRIUS session to your own personal website. You'll need to have access to the code of your webpage or at least the option to add a coded block/section.

Embed a session via iframe

Embedding a session into a service or app requires using an iframe with the  src attribute specified as the roomUrl and roomPassword.  

Example

<iframe	 src="https://sirius.video/roomID?password=roomPassword "allow="camera; microphone; fullscreen; speaker; display-capture" ></iframe>

Other embedding options

Android

For the integration we recommend using the WebView class: https://developer.android.com/reference/android/webkit/WebView

iOS

These are the recommended approaches to embed a session depending on the iOS version:

  • WKWebView supports embedding pages that use WebRTC from iOS 14.5 onwards. To access the microphone and camera, it is necessary to add both NSMicrophoneUsageDescription and NSCameraUsageDescription keys to the app’s Info.plist file.
  • For iOS 14.3 and 14.4 use SFSafariViewController to open a website containing an iframe with its src specified as a SIRIUS session.
  • Redirect to a browser (Safari by default) for iOS versions lower than 14.3.

When the app is sent to background, the camera is disabled. If you need the microphone to continue working while the app is in the background, we recommend redirecting to Safari app.

Reactive Native

Before starting, you will need to add the corresponding permissions to be able to access both the camera and microphone. 

Follow this guide to add and setup the react-native-webview library in your React Native project.

Finally, add the WebView component to your code, setup the properties and fill the room URL and parameters.

Flutter

Before starting, you will need to add the corresponding permissions to be able to access both the camera and microphone. 

We recommend using the flutter_inappwebview and permission_handler modules to handle media permissions in the webview. Update the settings in your iOS and Android projects to match the requirements. Note that there is a known issue to show the keyboard in Android webviews.

Finally, add the WebView component to your code, setup the properties and fill the room URL and parameters. 

Still need help? Contact Us Contact Us