# EasyStream API Quick Start Guide
## Get Started in 5 Minutes
This guide will get you up and running with the EasyStream API quickly.
## Prerequisites
- EasyStream installed and running
- Modern web browser
- Basic JavaScript knowledge
---
## 1. Authentication
### Login and Get Token
```javascript
// The API client is automatically available as 'api'
const result = await api.login('myusername', 'mypassword');
if (result.success) {
console.log('Logged in!');
console.log('User:', result.user);
console.log('Token:', result.token);
// Token is automatically stored
}
```
### Check if Logged In
```javascript
if (api.isAuthenticated()) {
console.log('User is logged in');
} else {
console.log('Please log in');
}
```
---
## 2. Working with Videos
### List Videos
```javascript
const videos = await api.getVideos({
page: 1,
limit: 20,
sort: 'popular'
});
console.log('Videos:', videos.data.videos);
```
### Get Single Video
```javascript
const video = await api.getVideo('123456');
console.log('Video:', video.data);
```
### Search Videos
```javascript
const results = await api.searchVideos('funny cats');
console.log('Found:', results.data.videos);
```
### Like a Video
```javascript
await api.likeVideo('123456', 'like');
console.log('Video liked!');
```
### Create a Video
```javascript
const newVideo = await api.createVideo({
title: 'My Awesome Video',
description: 'This is a great video',
privacy: 'public',
category: 'entertainment'
});
console.log('Created video:', newVideo.data.file_key);
```
---
## 3. User Profiles
### Get Current User Profile
```javascript
const myProfile = await api.getMyProfile();
console.log('My profile:', myProfile.data);
```
### Get Another User's Profile
```javascript
const userProfile = await api.getUserProfile(123);
console.log('User:', userProfile.data);
```
### Update Profile
```javascript
await api.updateProfile({
usr_dname: 'My New Name',
usr_about: 'I love making videos!'
});
console.log('Profile updated!');
```
### Upload Avatar
```html
```
---
## 4. Comments
### Get Comments for a Video
```javascript
const comments = await api.getComments('123456', {
page: 1,
sort: 'recent'
});
console.log('Comments:', comments.data.comments);
```
### Post a Comment
```javascript
const newComment = await api.createComment(
'123456', // video file_key
'Great video!', // comment text
null // parent_id (null for top-level)
);
console.log('Comment posted:', newComment.data);
```
### Reply to a Comment
```javascript
const reply = await api.createComment(
'123456', // video file_key
'Thanks!', // reply text
789 // parent comment ID
);
console.log('Reply posted:', reply.data);
```
---
## 5. Subscriptions
### Subscribe to a Channel
```javascript
await api.subscribe(456); // channel user ID
console.log('Subscribed!');
```
### Check if Subscribed
```javascript
const status = await api.checkSubscription(456);
if (status.data.is_subscribed) {
console.log('Already subscribed');
} else {
console.log('Not subscribed');
}
```
### Get Subscription Feed
```javascript
const feed = await api.getSubscriptionFeed({ page: 1 });
console.log('New videos from subscriptions:', feed.data.videos);
```
---
## 6. Complete Examples
### Video Player Page
```html
Watch Video
```
### Browse Videos Page
```html
Browse Videos
```
---
## 7. Error Handling
Always wrap API calls in try-catch:
```javascript
try {
const result = await api.someAPICall();
// Handle success
} catch (error) {
// Handle error
console.error('Error:', error.message);
// Use built-in error handler
api.handleError(error);
// Or custom handling
if (error.message.includes('Authentication')) {
window.location.href = '/signin';
} else {
alert('Error: ' + error.message);
}
}
```
---
## 8. Common Patterns
### Loading State
```javascript
async function loadData() {
showLoading(); // Your loading function
try {
const result = await api.getVideos();
displayData(result.data);
} catch (error) {
api.handleError(error);
} finally {
hideLoading(); // Always hide loading
}
}
```
### Infinite Scroll
```javascript
let currentPage = 1;
let loading = false;
window.addEventListener('scroll', async () => {
if (loading) return;
const scrolledToBottom =
window.innerHeight + window.scrollY >= document.body.offsetHeight - 500;
if (scrolledToBottom) {
loading = true;
currentPage++;
try {
const result = await api.getVideos({ page: currentPage });
appendVideos(result.data.videos);
} catch (error) {
api.handleError(error);
} finally {
loading = false;
}
}
});
```
### Debounced Search
```javascript
let searchTimeout;
document.getElementById('search-input').addEventListener('input', (e) => {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(async () => {
const query = e.target.value;
if (query.length >= 2) {
const results = await api.searchVideos(query);
displaySearchResults(results.data.videos);
}
}, 300); // Wait 300ms after user stops typing
});
```
---
## 9. Browser Console Testing
Test API calls directly in the browser console:
```javascript
// Check authentication
api.isAuthenticated()
// Login
await api.login('username', 'password')
// Get videos
await api.getVideos({ page: 1 })
// Get current user
await api.getMyProfile()
// View stored token
localStorage.getItem('jwt_token')
// Clear token
api.clearToken()
```
---
## 10. Next Steps
- Read [API_DOCUMENTATION.md](API_DOCUMENTATION.md) for complete reference
- Check [FRONTEND_BACKEND_INTEGRATION_GUIDE.md](FRONTEND_BACKEND_INTEGRATION_GUIDE.md) for advanced patterns
- Review example code in [f_scripts/fe/js/api-helper.js](../f_scripts/fe/js/api-helper.js)
---
## Support
If you encounter issues:
1. Check browser console for errors
2. Check Network tab to see API requests/responses
3. Verify you're logged in: `api.isAuthenticated()`
4. Check API documentation for correct parameters
---
**Last Updated:** January 2025
Comments