### Complete VIDTREO Player Integration Example (HTML & JavaScript)
Source: https://docs.vidtreo.com/player-getting-started/quick-start
This example provides a full HTML structure including the player script, the player component, and JavaScript event listeners for 'player-ready' and 'player-error'. It demonstrates a basic setup for playing a video with VIDTREO.
```html
My Video Player
My Video Player
```
--------------------------------
### Install VIDTREO Recorder SDK Packages
Source: https://docs.vidtreo.com/getting-started/quick-start
Installs the necessary VIDTREO recorder SDK packages using npm. Choose the package that matches your integration method: React, Web Component, or the Core SDK.
```bash
npm install @vidtreo/recorder-react @vidtreo/recorder
```
```bash
npm install @vidtreo/recorder-wc
```
```bash
npm install @vidtreo/recorder
```
--------------------------------
### Complete VIDTREO Recorder React Example
Source: https://docs.vidtreo.com/getting-started/quick-start
A comprehensive React example demonstrating the VIDTREO recorder component with state management for video URL, upload progress, and error handling. It includes UI elements for displaying upload status and the final video link.
```jsx
import { VidtreoRecorder } from '@vidtreo/recorder-react';
import { useState } from 'react';
function App() {
const [videoUrl, setVideoUrl] = useState(null);
const [isUploading, setIsUploading] = useState(false);
return (
);
}
```
--------------------------------
### VIDTREO Player Complete Example Configuration
Source: https://context7_llms
This HTML example shows a fully configured VIDTREO player with specific video ID, API key, theme color, and enabled features like screenshot, settings, pip, and fullscreen.
```html
```
--------------------------------
### Load VIDTREO Player Script (HTML)
Source: https://docs.vidtreo.com/player-getting-started/quick-start
This snippet shows how to load the VIDTREO Player script into an HTML page using either a CDN link or npm installation. Ensure this script is included in your HTML's head or before the closing body tag.
```html
```
--------------------------------
### Minimal Custom Recorder with Vidtreo Hooks (React)
Source: https://docs.vidtreo.com/examples/custom-ui
This example shows a simplified custom recording interface using the `useVidtreoRecorder` hook. It focuses on the essential elements: video preview and a single button to toggle recording. This is suitable for scenarios where a basic recording functionality is needed without extensive UI controls. Ensure '@vidtreo/recorder-react' is installed and VITE_VIDTREO_API_KEY is configured.
```javascript
import { useVidtreoRecorder } from '@vidtreo/recorder-react';
function MinimalRecorder() {
const { state, actions } = useVidtreoRecorder({
apiKey: import.meta.env.VITE_VIDTREO_API_KEY,
});
return (
);
}
```
--------------------------------
### Vidtreo Player Web Component Installation
Source: https://context7_llms
Instructions for installing the Vidtreo Player Web Component via npm or CDN.
```APIDOC
## Installation
### Via npm
```bash
npm install @vidtreo/player-wc
```
### Via CDN (Sem Build Necessário)
```html
```
```
--------------------------------
### Vidtreo Recorder Web Component - Installation
Source: https://context7_llms
Instructions for installing the `@vidtreo/recorder-wc` package via npm or using a CDN.
```APIDOC
# Web Component
The `@vidtreo/recorder-wc` package provides a framework-agnostic Web Component that works with Vue, Angular, Svelte, or plain HTML.
## Installation
### Via npm
```bash
npm install @vidtreo/recorder-wc
```
### Via CDN (No Build Required)
```html
```
```
--------------------------------
### Install Vidtreo Web Component (yarn)
Source: https://context7_llms
Installs the @vidtreo/recorder-wc package for framework-agnostic usage. This command is for yarn users.
```bash
yarn add @vidtreo/recorder-wc
```
--------------------------------
### Complete Vidtreo Recorder Example with JavaScript
Source: https://context7_llms
This example demonstrates a full HTML page integrating the Vidtreo recorder web component. It includes basic styling, script for component initialization, and event listeners for 'recording-start', 'upload-progress', 'upload-complete', and 'error' events. It showcases how to display upload progress and the final recorded video.
```html
Video Recorder
```
--------------------------------
### Install Vidtreo Core SDK (yarn)
Source: https://context7_llms
Installs the core @vidtreo/recorder SDK for custom implementations requiring full API control. This command is for yarn users.
```bash
yarn add @vidtreo/recorder
```
--------------------------------
### Install Vidtreo Web Component (pnpm)
Source: https://context7_llms
Installs the @vidtreo/recorder-wc package for framework-agnostic usage. This command is for pnpm users.
```bash
pnpm add @vidtreo/recorder-wc
```
--------------------------------
### Vidtreo Recorder Core Method: Preview
Source: https://context7_llms
Demonstrates how to start a media stream preview using the Vidtreo Recorder. It supports starting a 'camera' preview or a 'screen' sharing preview, returning the MediaStream object.
```typescript
// Start camera preview
const stream = await recorder.startPreview('camera');
// Start screen preview
const stream = await recorder.startPreview('screen');
```
--------------------------------
### Start Recording with VidtreoRecorder
Source: https://context7_llms
Initiates video recording from the camera or screen. Accepts optional constraints for video/audio and specifies the source type. Returns a Promise that resolves when recording starts.
```typescript
await recorder.startRecording(
options?: RecordingStartOptions,
sourceType?: SourceType
): Promise
```
--------------------------------
### Initialize and Use VIDTREO Recorder in Vanilla JavaScript
Source: https://docs.vidtreo.com/integrations/vanilla-js
Demonstrates basic usage of the VidtreoRecorder class. It covers initializing the recorder, starting a camera preview, attaching the stream to a video element, starting and stopping the recording, and handling upload completion and errors.
```javascript
import { VidtreoRecorder } from '@vidtreo/recorder';
// Initialize the recorder
const recorder = new VidtreoRecorder({
apiKey: 'your-api-key',
onUploadComplete: (result) => {
console.log('Video URL:', result.uploadUrl);
},
onError: (error) => {
console.error('Error:', error);
}
});
// Initialize and start preview
await recorder.initialize();
const stream = await recorder.startPreview();
// Attach to video element
const video = document.querySelector('video');
video.srcObject = stream;
// Start recording
await recorder.startRecording();
// Stop and upload
const result = await recorder.stopRecording();
console.log('Recording complete:', result);
```
--------------------------------
### Install Vidtreo React Recorder (bun)
Source: https://context7_llms
Installs the @vidtreo/recorder-react package for React applications, along with its peer dependency @vidtreo/recorder. This command is for bun users.
```bash
bun add @vidtreo/recorder-react @vidtreo/recorder
```
--------------------------------
### Install Vidtreo React Recorder
Source: https://docs.vidtreo.com/integrations/react
This command installs the necessary package for using Vidtreo's React recorder. Ensure you have npm or yarn installed in your project.
```bash
npm install @vidtreo/recorder-react
```
--------------------------------
### Install Vidtreo Core SDK (pnpm)
Source: https://context7_llms
Installs the core @vidtreo/recorder SDK for custom implementations requiring full API control. This command is for pnpm users.
```bash
pnpm add @vidtreo/recorder
```
--------------------------------
### Install VIDTREO Recorder Package
Source: https://docs.vidtreo.com/integrations/vanilla-js
Installs the core VIDTREO recorder package using npm. This is the first step to integrate custom video recording functionality into your web application.
```bash
npm install @vidtreo/recorder
```
--------------------------------
### Complete Recorder Example with Callbacks - JavaScript
Source: https://docs.vidtreo.com/configuration/callbacks
A comprehensive example demonstrating the integration of VIDTREO recorder with various callbacks for managing recording status, upload progress, and handling errors.
```javascript
import { VidtreoRecorder } from '@vidtreo/recorder-react';
import { useState } from 'react';
function VideoRecorderWithCallbacks() {
const [status, setStatus] = useState<'idle' | 'recording' | 'uploading' | 'complete' | 'error'>('idle');
const [progress, setProgress] = useState(0);
const [videoUrl, setVideoUrl] = useState(null);
const [error, setError] = useState(null);
return (
{
setStatus('recording');
setError(null);
}}
onRecordingStop={() => {
setStatus('uploading');
}}
onUploadProgress={(p) => {
setProgress(Math.round(p * 100));
}}
onUploadComplete={(result) => {
setStatus('complete');
setVideoUrl(result.uploadUrl);
setProgress(0);
}}
onUploadError={(err) => {
setStatus('error');
setError(`Upload failed: ${err.message}`);
}}
onError={(err) => {
setStatus('error');
setError(err.message);
}}
/>
{/* Status indicator */}
)}
);
}
```
--------------------------------
### Install Vidtreo Recorder Web Component via npm
Source: https://docs.vidtreo.com/integrations/web-component
This snippet shows how to install the `@vidtreo/recorder-wc` package using npm. This is the recommended method for projects using a build process.
```bash
npm install @vidtreo/recorder-wc
```
--------------------------------
### Install Vidtreo Player Web Component via npm
Source: https://context7_llms
Command to install the Vidtreo Player Web Component using npm. This package provides a framework-agnostic component for embedding video players.
```bash
npm install @vidtreo/player-wc
```
--------------------------------
### Install VIDTREO Player Web Component via npm/yarn/pnpm/bun
Source: https://context7_llms
Installs the VIDTREO Player web component package using common package managers like npm, yarn, pnpm, or bun. This allows you to integrate the player into your project with build tools.
```bash
npm install @vidtreo/player-wc
```
```bash
yarn add @vidtreo/player-wc
```
```bash
pnpm add @vidtreo/player-wc
```
```bash
bun add @vidtreo/player-wc
```
--------------------------------
### HTML/Web Component Event Listener for Upload
Source: https://docs.vidtreo.com/examples/basic-recording
This example shows how to use the Vidtreo recorder as a web component and listen for the 'upload-complete' event in plain JavaScript. An alert is displayed with the video's upload URL when the upload is finished.
```javascript
document.getElementById('recorder').addEventListener('upload-complete', (e) => {
alert('Video uploaded: ' + e.detail.uploadUrl);
});
```
--------------------------------
### React Recorder with State Management
Source: https://docs.vidtreo.com/examples/basic-recording
This example shows how to integrate the VidtreoRecorder with React's useState hook to manage the video URL and uploading status. It provides feedback to the user during the upload process and displays the recording once completed.
```jsx
import { VidtreoRecorder } from '@vidtreo/recorder-react';
import { useState } from 'react';
function RecorderWithState() {
const [videoUrl, setVideoUrl] = useState(null);
const [isUploading, setIsUploading] = useState(false);
return (
setIsUploading(true)}
onUploadComplete={(result) => {
setVideoUrl(result.uploadUrl);
setIsUploading(false);
}}
/>
{isUploading && (
Processing video...
)}
{videoUrl && (
Your Recording
)}
);
}
```
--------------------------------
### React Recorder with Time Limit
Source: https://docs.vidtreo.com/examples/basic-recording
This example demonstrates how to set a time limit for video recordings using the VidtreoRecorder. The onRecordingEnded callback is triggered when the recording duration reaches the specified limit, allowing for custom actions upon completion.
```jsx
import { VidtreoRecorder } from '@vidtreo/recorder-react';
function RecorderWithTimeLimit() {
return (
{
console.log('Recording ended');
}}
onUploadComplete={(result) => {
console.log('Video ready:', result.uploadUrl);
}}
/>
);
}
```
--------------------------------
### React Integration
Source: https://context7_llms
Example of how to integrate the VIDTREO Player component in a React application using hooks and refs.
```APIDOC
## React Integration
### Description
This section shows how to embed and manage the VIDTREO Player component within a React application. It demonstrates the use of `useRef` for DOM access and `useEffect` for event listener management.
### Method
N/A (Component Integration)
### Endpoint
N/A (Component Integration)
### Parameters
#### Path Parameters
N/A
#### Query Parameters
N/A
#### Request Body
N/A
### Request Example
```tsx
import { useEffect, useRef } from 'react';
function VideoPlayer() {
const playerRef = useRef(null);
useEffect(() => {
const player = playerRef.current;
if (!player) return;
const handleReady = () => {
console.log('Player is ready');
};
const handleError = (event: CustomEvent) => {
console.error('Error:', event.detail.error);
};
player.addEventListener('player-ready', handleReady);
player.addEventListener('player-error', handleError);
return () => {
player.removeEventListener('player-ready', handleReady);
player.removeEventListener('player-error', handleError);
};
}, []);
return (
);
}
```
### Response
#### Success Response (N/A)
N/A
#### Response Example
N/A
```
--------------------------------
### Error Handling Best Practices
Source: https://context7_llms
Guidelines and code examples for handling player errors gracefully and implementing retry mechanisms.
```APIDOC
## Error Handling Best Practices
### Description
This section outlines best practices for managing errors that may occur during video playback with the VIDTREO Player. It includes examples for user-friendly error display and implementing retry logic.
### Method
N/A (Event Handling)
### Endpoint
N/A (Event Handling)
### Parameters
#### Path Parameters
N/A
#### Query Parameters
N/A
#### Request Body
N/A
### Request Example
#### Graceful Error Display
```javascript
player.addEventListener('player-error', (event) => {
const error = event.detail.error;
// Show user-friendly error message
showErrorToUser(error);
// Log to error tracking service
errorTracker.capture(new Error(error));
// Offer retry option
showRetryButton();
});
```
#### Retry Logic
```javascript
function retryVideoLoad() {
const player = document.querySelector('vidtreo-player');
const videoId = player.getAttribute('video-id');
// Force re-initialization by updating video-id
player.setAttribute('video-id', videoId);
}
```
### Response
#### Success Response (N/A)
N/A
#### Response Example
N/A
```
--------------------------------
### VidtreoRecorder Start Preview Method
Source: https://context7_llms
Shows how to initiate a camera or screen preview using the `startPreview` method. This method can optionally accept a `sourceType` parameter to specify whether to preview the camera or the screen. It returns a Promise that resolves with the `MediaStream` object for the preview.
```typescript
await recorder.startPreview(sourceType?: SourceType): Promise
// sourceType: 'camera' | 'screen' (default: 'camera')
```
--------------------------------
### Vidtreo Recorder Web Component - Basic Usage (Angular)
Source: https://context7_llms
Example of using the `` Web Component in an Angular application, including module setup and component template integration.
```APIDOC
### Angular
```typescript
// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import '@vidtreo/recorder-wc';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
// ...
})
export class AppModule {}
```
```html
```
```
--------------------------------
### Complete VIDTREO Player Example
Source: https://context7_llms
A full HTML document demonstrating the integration of the VIDTREO Player, including script loading, component embedding, and event listeners for 'player-ready' and 'player-error'. Basic styling is also included.
```html
VIDTREO Player
My Video Player
```
--------------------------------
### VIDTREO Recorder Core Methods: Initialization, Preview, and Recording
Source: https://docs.vidtreo.com/integrations/vanilla-js
Details the core methods for interacting with the VIDTREO recorder. This includes initializing the recorder, starting camera or screen previews, and initiating and stopping the recording process, with options for specifying video/audio parameters.
```javascript
// Initialize the recorder
await recorder.initialize();
// Start camera preview
const stream = await recorder.startPreview('camera');
// Start screen preview
const stream = await recorder.startPreview('screen');
// Start recording with options
await recorder.startRecording({
video: { width: 1920, height: 1080, frameRate: 30 },
audio: true
}, 'camera'); // or 'screen'
// Stop recording
const result = await recorder.stopRecording(); // result: { recordingId, uploadUrl, blob }
```
--------------------------------
### Load VIDTREO Player Script (CDN)
Source: https://context7_llms
Include the VIDTREO Player Web Component script from a CDN to make the player available for use in your HTML. This is the simplest way to get started.
```html
```
--------------------------------
### Handle Recording Start Callback (React)
Source: https://context7_llms
Illustrates how to use the `onRecordingStart` callback in a React component to manage the recording state and trigger other UI updates when recording begins.
```jsx
{
console.log('Recording started');
setIsRecording(true);
// Additional logic like hiding UI elements or starting a timer
}}
/>
```
--------------------------------
### Basic Screen Recording Component (React)
Source: https://context7_llms
This React component utilizes the `useVidtreoRecorder` hook to enable basic screen recording. It includes functionality to start and stop screen recording, with an example callback for when the upload is complete.
```tsx
import { useVidtreoRecorder } from '@vidtreo/recorder-react';
function ScreenRecorder() {
const { state, actions } = useVidtreoRecorder({
apiKey: import.meta.env.VITE_VIDTREO_API_KEY,
onUploadComplete: (result) => console.log(result.uploadUrl),
});
return (
);
}
```
--------------------------------
### VidtreoRecorder Methods: Initialization and Preview
Source: https://docs.vidtreo.com/reference/recorder-api
Provides methods to initialize the recorder and start a media preview. `initialize()` must be called before other methods, and `startPreview()` allows users to see a preview of their camera or screen before recording.
```typescript
await recorder.initialize(): Promise
await recorder.startPreview(sourceType?: SourceType): Promise
```
--------------------------------
### Handle VIDTREO Recorder Events (JavaScript)
Source: https://docs.vidtreo.com/integrations/web-component
Provides a JavaScript example of how to interact with the VIDTREO recorder component by listening to its custom events. It covers handling recording start, upload progress, upload completion, and errors.
```javascript
const recorder = document.getElementById('recorder');
const progress = document.getElementById('progress');
const percent = document.getElementById('percent');
const result = document.getElementById('result');
const video = document.getElementById('video');
const link = document.getElementById('link');
recorder.addEventListener('recording-start', () => {
result.classList.add('hidden');
});
recorder.addEventListener('upload-progress', (e) => {
progress.classList.remove('hidden');
percent.textContent = Math.round(e.detail.progress * 100);
});
recorder.addEventListener('upload-complete', (e) => {
progress.classList.add('hidden');
result.classList.remove('hidden');
video.src = e.detail.uploadUrl;
link.href = e.detail.uploadUrl;
});
recorder.addEventListener('error', (e) => {
progress.classList.add('hidden');
alert('Error: ' + e.detail.error.message);
});
```
--------------------------------
### Basic React Recorder Component
Source: https://docs.vidtreo.com/examples/basic-recording
A simple React component demonstrating the basic usage of the VidtreoRecorder. It includes an onUploadComplete callback to log the upload URL upon successful video processing. No external state management is required for this basic setup.
```jsx
import { VidtreoRecorder } from '@vidtreo/recorder-react';
function BasicRecorder() {
return (
{
console.log('Video ready:', result.uploadUrl);
}}
/>
);
}
```
--------------------------------
### HTML/Web Component Vidtreo Recorder Basic Usage
Source: https://context7_llms
Provides a basic HTML example demonstrating how to use the Vidtreo Recorder as a web component. It includes loading the script from a CDN and listening for the `upload-complete` event to get the video URL. This is suitable for integration into non-React projects.
```html
```
--------------------------------
### Core Options
Source: https://context7_llms
Essential options for initializing the VIDTREO recorder, including API key and custom backend URLs.
```APIDOC
## Core Options
### apiKey
**Type:** `string` (required)
Your VIDTREO API key for authentication.
```tsx
```
### backendUrl / apiUrl
**Type:** `string`
**Default:** `"https://api.vidtreo.com"`
Custom API endpoint URL. Useful for proxying requests or using a custom backend.
```tsx
```
```
--------------------------------
### Integrate Analytics with Vidtreo Recorder (TypeScript/React)
Source: https://context7_llms
Provides an example of integrating analytics with the Vidtreo recorder. It shows how to track various events such as recording start, stop, upload progress, completion, and errors by calling a hypothetical `analytics.track` function. This requires a pre-existing analytics tracking implementation.
```tsx
function AnalyticsRecorder() {
const trackEvent = (event: string, data?: object) => {
// Send to your analytics service
analytics.track(event, data);
};
return (
{
trackEvent('recording_started');
}}
onRecordingStop={() => {
trackEvent('recording_stopped');
}}
onUploadProgress={(progress) => {
if (progress === 0.5) {
trackEvent('upload_halfway');
}
}}
onUploadComplete={(result) => {
trackEvent('recording_complete', {
recordingId: result.recordingId,
url: result.uploadUrl
});
}}
onError={(error) => {
trackEvent('recording_error', {
message: error.message
});
}}
/>
);
}
```