Media access
You stored a video on our service! Happy to serve you. Now you want to stream it to your users. This is how you do it.
What you'll need
- Your secret API key
- media UUID - you get this reference when you create a token for the annotation tool or the recorder
The magic POST method to get a secure url :
curl --location --request POST 'https://api.pathfindr.dev/api/tokens' \
--header 'Authorization: Bearer <API KEY>' \
--form 'file_uuid="<UUID>"'
By default the URL expires in 6 hours. If you want a shorter TTL, add this parameter:
# remember the \ at the end of previous line!
--form 'time_to_live=3600' # 3600 seconds = 1 hour, max 315360000 (10 years)
You had a request, here is your response:
{
"access_token": "<ACCESS TOKEN>",
"expires_at": "2022-12-12T15:44:42.037199Z",
"url": "<SECURE URL>"
}
In case of media files, the access token is embedded in the URL field, so you may feed that directly to our player, for documents, you will have a download link instead.
Large videos? Don't worry about bandwidth, user's will get a smooth experience, by streaming only chunks from our servers!
If there is no url in the response it means that you do not have access to the requested file.
The API key is secret and should never be shared with anyone. All requests using the API key should be sent from your backend and never your frontend.
Feeding the player
After the generation of the streaming url you can now use it within the expiration time to stream your video.
- npm
- CDN
import Player from '@pathfindr.dev/player';
import '@pathfindr.dev/player/dist/player.css';
const options = {
streaming: 'https://vod.pathfindr.dev/videos/5f861706-11ab-4ae9-aca0-f8ef7425c226/c20eb442-8d01-4c9d-a452-91dde3dbf5be/3/converted-videos/1660738207_file_example_mp4_480_1_5mg.mp4.mp4',
start: 0,
interval: 5,
autoplay: false,
};
const player = new Player("#player-container", options);
const options = {
streaming: 'https://vod.pathfindr.dev/videos/5f861706-11ab-4ae9-aca0-f8ef7425c226/c20eb442-8d01-4c9d-a452-91dde3dbf5be/3/converted-videos/1660738207_file_example_mp4_480_1_5mg.mp4.mp4',
start: 0,
interval: 5,
autoplay: false,
};
const player = new Pathfindr.Player("#player-container", options);
For better UX, we implemented adaptive streaming as well! Jump over to the next section to see how to enable it