Table of Contents
OAuth Embedded Recording Player
Embed TetherX recording playback directly in your own application using OAuth2 authentication. This allows you to show recorded footage within your custom interface while maintaining secure access control.
Warning: This feature requires a valid OAuth2 user token with appropriate permissions. See OAuth2 integration for authentication setup.
Step 1: Add JavaScript & CSS
Add the TetherX public CDN script and CSS to your page's <head> section:
<link rel="stylesheet" href="https://my.timeline.is/cdn/tetherx.css" />
<script src="https://my.timeline.is/cdn/tetherx.js"></script>
Tip: Place these in your layout template so they're available across all pages that need embedded recordings.
Step 2: Create the Iframe
Add an iframe with the tetherx-recording-view class and construct the source URL using your recording ID:
<iframe class="tetherx-recording-view"
src="https://my.timeline.is/recordings/5def4f0983825a241d4a2858/preview"
width="100%"
height="500">
</iframe>
Understanding the URL structure:
- Base URL:
https://my.timeline.is/recordings/ - Recording ID:
5def4f0983825a241d4a2858(unique identifier for each recording) - Path:
/preview(renders the playback interface)
How to find recording IDs:
- Go to an event in the TetherX Platform
- Open the recording you want to embed
- Copy the recording ID from the URL bar
- Or fetch recording IDs via the REST API
Step 3: Initialise Player
After page load, execute the following JavaScript to enable the embedded player:
new TetherX('user_oauth2_token').recordings();
Warning: Replace user_oauth2_token with your actual OAuth2 access token. Never expose tokens in client-side code for production - fetch them securely from your server.
Example implementation:
<script>
document.addEventListener('DOMContentLoaded', function() {
// Fetch token from your backend API
fetch('/api/tetherx_token')
.then(response => response.json())
.then(data => {
new TetherX(data.access_token).recordings();
});
});
</script>
Tip: To initialise all TetherX features (live view tooltips and recordings), use: new TetherX('user_oauth2_token').init();
Multiple Recordings
You can embed multiple recordings on the same page:
<!-- Recording 1 -->
<iframe class="tetherx-recording-view"
src="https://my.timeline.is/recordings/5def4f0983825a241d4a2858/preview"
width="100%" height="400">
</iframe>
<!-- Recording 2 -->
<iframe class="tetherx-recording-view"
src="https://my.timeline.is/recordings/6abc1234cdef567890ab1234/preview"
width="100%" height="400">
</iframe>
<script>
new TetherX('user_oauth2_token').recordings();
</script>
The recordings() method will initialise all iframes with the tetherx-recording-view class on the page.
Troubleshooting
Player not loading:
- Verify the TetherX script and CSS are loaded before initialisation
- Check the browser console for authentication errors
- Ensure the OAuth2 token is valid and not expired
Iframe shows "Access Denied":
- Confirm the OAuth2 user has permission to view the recording
- Verify the recording ID is correct and exists
- Check that the recording belongs to a zone the user can access
Controls not responding:
- Ensure you're calling
.recordings()after the DOM is fully loaded - Check that the iframe has the correct
tetherx-recording-viewclass - Verify no JavaScript errors are blocking execution