From f47bc0ab29748069c2bfda638e3f81d5b05eaffd Mon Sep 17 00:00:00 2001 From: szekelyzol Date: Thu, 12 Oct 2023 12:41:59 +0200 Subject: [PATCH] Fix duplicate H1 headers --- .../delivery-analytics/analytics.md | 23 +- .../reference/invalid-query-parameter.md | 11 +- .../livestream/apivideo-flutter-livestream.md | 42 +- .../apivideo-android-player-analytics.md | 91 +-- .../sdks/player/apivideo-android-player.md | 39 +- .../sdks/player/apivideo-flutter-player.md | 58 +- .../sdks/player/apivideo-hlsjs-analytics.md | 30 +- .../sdks/player/apivideo-player-analytics.md | 78 +-- .../sdks/player/apivideo-player-sdk.md | 580 +++++++++--------- .../player/apivideo-react-native-player.md | 35 +- .../sdks/player/apivideo-react-player.md | 41 +- .../player/apivideo-swift-player-analytics.md | 79 +-- .../sdks/player/apivideo-swift-player.md | 40 +- .../sdks/player/apivideo-videojs-analytics.md | 26 +- .../sdks/vod/apivideo-android-uploader.md | 70 +-- .../sdks/vod/apivideo-android-upstream.md | 39 +- .../sdks/vod/apivideo-flutter-uploader.md | 25 +- .../sdks/vod/apivideo-ios-uploader.md | 41 +- .../vod/apivideo-react-native-uploader.md | 28 +- .../vod/apivideo-typescript-media-recorder.md | 56 +- ...ivideo-typescript-media-stream-composer.md | 118 ++-- .../sdks/vod/apivideo-typescript-uploader.md | 115 ++-- .../vod/delegated-upload-tokens.md | 11 +- templates/documentation/vod/video-object.md | 27 +- 24 files changed, 634 insertions(+), 1069 deletions(-) diff --git a/templates/documentation/delivery-analytics/analytics.md b/templates/documentation/delivery-analytics/analytics.md index b7943591..ced1579e 100644 --- a/templates/documentation/delivery-analytics/analytics.md +++ b/templates/documentation/delivery-analytics/analytics.md @@ -5,8 +5,7 @@ metadata: description: "Learn how you can get data insights for your videos and live streams using api.video's Analytics solution." --- -Analytics & data -============= +# Analytics & data api.video enables you to collect play event data about your videos and live streams. @@ -20,7 +19,7 @@ Use this data to understand your audience, or integrate the data directly into y Visit the **[Analytics](https://dashboard.api.video/analytics)** page on the Dashboard to get started and see your data visualized! -# How it works +## How it works api.video's solution uses playback data to analyze and segment your viewers. @@ -33,7 +32,7 @@ api.video's solution uses playback data to analyze and segment your viewers. After play events are collected, there is a short delay while the API processes the data. api.video recommends that you retrieve Analytics periodically, for example once every minute. This enables you to keep track of live stream engagement or manage user-generated content without delay. -## Requirements +### Requirements {% capture content %} The Analytics feature is available using api.video's video player. Check out the [Video Player SDK](/sdks/player/apivideo-player-sdk) for details about the implementation. @@ -43,7 +42,7 @@ When using third-party players, you need to implement the [Video.js](/sdks/playe {% include "_partials/callout.html" kind: "info", content: content %} -# Usage +## Usage Api.video offers 2 dedicated API endpoints for analytics: @@ -59,7 +58,7 @@ You can test the Analytics endpoints **in api.video's sandbox environment**. Che {% endcapture %} {% include "_partials/callout.html" kind: "info", content: content %} -## Request +### Request The endpoints accept `GET` requests. You must provide 2 **required** query parameters in your requests: `from` and `dimension`. You can also provide 2 **optional** query parameters: `to`, and `filter`. @@ -84,7 +83,7 @@ api.video retains play event data for 30 days. If you select a time period that | `to` | `date` | `false` | Use this optional query parameter to set the end date for the time period that you want analytics for.

- The API returns analytics data **excluding** the day you set in `to`.
- If you do not specify a `to` date, the API returns analytics data starting from the `from` date up until today, and **excluding** today.
- A valid date value is only **within the last 30 days**.
- The value you provide must follow the `YYYY-MM-DD` format. | | `filter` | `key-value pair` | `false` | Use this parameter to filter your results to a specific video or live stream in a project that you want analytics for.

You must use the `videoId:` or `liveStreamId:` prefix when specifying an identifier for a video or a live stream.

Note that the **Get play events for videos** endpoint only accepts video `ID` as a filter, and the **Get play events for live streams** endpoint only accepts live stream `ID` as a filter. | -### Dimension +#### Dimension This parameter enables you to define a single property that you want analytics for. You can select only **one property** in your request. @@ -98,14 +97,14 @@ This parameter enables you to define a single property that you want analytics f | `operatingSystem` | the operating system used during the play event. Response values include `windows`, `mac osx`, `android`, `ios`, `linux`. | | `browser` | the browser used during the play event. Response values include `chrome`, `firefox`, `edge`, `opera`. | -## Response +### Response Based on your request the Analytics API returns paginated play event data in an array of objects. Each object contains these analytics fields: - `value`: shows a value for the property you have specified for `dimension` in your request. For example, if you requested `dimension=browser`, each `value` field in the response returns a type of browser that was used during the play events. - `plays`: shows the number of play events for one specific `value`. -### Structure +#### Structure ```json { @@ -149,7 +148,7 @@ Based on your request the Analytics API returns paginated play event data in an | `value` | `string` | The value of the dimension that you've selected in the request. You can find the possible [dimensions in the table above](#dimension). | | `plays` | `int` | The number of play events that was returned for the dimension in question | -### Examples +#### Examples You can find sample responses for some common analytics parameters here: @@ -260,7 +259,7 @@ This example uses the sandbox environment's `{base_URL}`. Check out the [API env
-# Best practices +## Best practices To ensure that your Analytics implementation runs smoothly, make sure that you: @@ -269,7 +268,7 @@ To ensure that your Analytics implementation runs smoothly, make sure that you: - only select **one** property for `dimension` in your request. - use the `videoId:` or `liveStreamId:` prefix appropriately when using the `filter` parameter. -# What's next +## What's next Check out the **[API reference](/reference/api/Analytics)** for sample responses and errors, and more details about using the Analytics endpoint. diff --git a/templates/documentation/reference/invalid-query-parameter.md b/templates/documentation/reference/invalid-query-parameter.md index e6d2e209..215e6256 100644 --- a/templates/documentation/reference/invalid-query-parameter.md +++ b/templates/documentation/reference/invalid-query-parameter.md @@ -2,22 +2,19 @@ title: "Invalid Query Parameter" slug: "invalid-query-parameter" metadata: - title: "Invalid Attribute" + title: "Invalid Query Parameter" description: "You sent in a query parameter that doesn't exist, isn't correct for the endpoint you're using, or has a bad value." --- -Invalid Query Parameter -================= +# Invalid Query Parameter You sent in a query parameter that doesn't exist, isn't correct for the endpoint you're using, or has a bad value. -# Solution +## Solution If you're not using one of our API clients, check our documentation for the endpoint you're using and make sure the parameters are set up correctly in your request. -If you are using one of our API clients, check the rules for how to format parameters within your client. They are not always identical to how they would be sent if you weren't using an API client. - -# Learning resources +If you are using one of our API clients, check the rules for how to format parameters within your client. They are not always identical to how they would be sent if you weren't using an API client. ## Tools diff --git a/templates/documentation/sdks/livestream/apivideo-flutter-livestream.md b/templates/documentation/sdks/livestream/apivideo-flutter-livestream.md index f80fdad2..25519fb5 100644 --- a/templates/documentation/sdks/livestream/apivideo-flutter-livestream.md +++ b/templates/documentation/sdks/livestream/apivideo-flutter-livestream.md @@ -6,35 +6,19 @@ metadata: description: "The official Flutter RTMP live stream client for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -Flutter RTMP Live stream Client -============================ +# Flutter RTMP Live stream Client [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. -# Table of contents - -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [Permissions](#permissions) - - [Code sample](#code-sample) -- [Example App](#example-app) - - [Setup](#setup) - - [Android](#android) - - [iOS](#ios) -- [Plugins](#plugins) -- [FAQ](#faq) - -# Project description +## Project description This module is made for broadcasting RTMP live stream from smartphone camera. -# Getting started +## Getting started -## Installation +### Installation In your pubspec.yaml file, add the following: @@ -49,7 +33,7 @@ In your dart file, import the package: import 'package:apivideo_live_stream/apivideo_live_stream.dart'; ``` -## Permissions +### Permissions To be able to broadcast, you must: @@ -75,7 +59,7 @@ The library will require android.permission.CAMERA and android.permission.RECORD NSMicrophoneUsageDescriptionYour own description of the purpose ``` -## Code sample +### Code sample 1. Creates a live stream controller @@ -111,7 +95,7 @@ _controller.startStreaming("YOUR_STREAM_KEY"); _controller.stop(); ``` -### Manages application lifecycle +#### Manage application lifecycle On the application side, you must manage application lifecycle: @@ -126,13 +110,13 @@ void didChangeAppLifecycleState(AppLifecycleState state) { } ``` -# Example App +## Example App You can try our [example app](https://github.com/apivideo/api.video-flutter-live-stream/tree/master/example), feel free to test it. -## Setup +### Setup Be sure to follow the [Flutter installation steps](https://docs.flutter.dev/get-started/) before anything. @@ -148,11 +132,11 @@ git@github.com:apivideo/api.video-flutter-live-stream.git Wait for the indexation to finish. -### Android +#### Android Connect an Android device to your computer and click on the `Run main.dart` button. -### iOS +#### iOS 1) Connect an iOS device to your computer and click on the `Run main.dart` button. @@ -163,7 +147,7 @@ the `YOUR_PROJECT_NAME/example/ios/Runner.xcworkspace` file.
Click on Example, go in `Signin & Capabilities` tab, add your team and create a unique bundle identifier. -# Plugins +## Plugins api.video Flutter live stream library is using external native library: @@ -172,7 +156,7 @@ api.video Flutter live stream library is using external native library: | StreamPack | [StreamPack] | | HaishinKit | [HaishinKit] | -# FAQ +## FAQ If you have any questions, ask us in the [community](https://community.api.video). Or use [issues](https://github.com/apivideo/api.video-flutter-live-stream/issues). diff --git a/templates/documentation/sdks/player/apivideo-android-player-analytics.md b/templates/documentation/sdks/player/apivideo-android-player-analytics.md index eeb6562d..35e67af8 100644 --- a/templates/documentation/sdks/player/apivideo-android-player-analytics.md +++ b/templates/documentation/sdks/player/apivideo-android-player-analytics.md @@ -6,36 +6,13 @@ metadata: description: "The official api.video Android Player analytics plugin for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video Android Player analytics plugin -============== +# api.video Android Player analytics plugin [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. -# Table of contents - -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [Gradle](#gradle) - - [Permissions](#permissions) -- [Sample application](#sample-application) -- [Documentation](#documentation) - - [Options](#options) - - [ApiVideoPlayerAnalytics API](#apivideoplayeranalytics-api) - - [`play(): Future`](#playeventtime-float--currenttime-futurevoid) - - [`resume(): Future`](#resumeeventtime-float--currenttime-futurevoid) - - [`ready(): Future`](#readyeventtime-float--currenttime-futurevoid) - - [`end(): Future`](#endeventtime-float--currenttime-futurevoid) - - [`seek(from: Float, to: Float): Future`](#seekfrom-float-to-float-futurevoid) - - [`pause(): Future`](#pauseeventtime-float--currenttime-futurevoid) - - [`destroy(): Future`](#destroyeventtime-float--currenttime-futurevoid) - - [`currentTime`](#currenttime) - - [API documentation](#api-documentation) - -# Project description +## Project description Android library to manually call the api.video analytics collector. @@ -44,11 +21,11 @@ monitoring module. This module also supports ExoPlayer analytics. -# Getting started +## Getting started -## Installation +### Installation -### Gradle +#### Gradle In your module `build.gradle`, add the following code in `dependencies`: @@ -58,7 +35,7 @@ dependencies { } ``` -## Permissions +### Permissions In your `AndroidManifest.xml`, add the following code in ``: @@ -67,15 +44,15 @@ In your `AndroidManifest.xml`, add the following code in ``: ``` -# Sample application +## Sample application A demo application demonstrates how to use player analytics library. See [`/example`](https://github.com/apivideo/api.video-android-player-analytics/tree/main/example) folder. -# Documentation +## Documentation -## Options +### Options The analytics module constructor takes a `Options` parameter that contains the following options: @@ -94,49 +71,27 @@ Options instantiation is made with either mediaUrl or videoInfo. Once the module is instantiated, the following methods have to be called to monitor the playback events. -## ApiVideoPlayerAnalytics API +### ApiVideoPlayerAnalytics API -#### Event time or current time +- Event time or current time If you know the event timestamp, you can use it as the `eventTime` parameter. If you don't know the event timestamp, you can set the `currentTime` parameter with a scheduler. -#### `play(eventTime: Float = currentTime): Future` +#### Methods -> method to call when the video starts playing for the first time (in the case of a resume after -> paused, use `resume()`) +| Method | Description | +|----------|----------| +| `play(eventTime: Float = currentTime): Future` | method to call when the video starts playing for the first time (in the case of a resume after paused, use `resume()`) | +| `resume(eventTime: Float = currentTime): Future` | method to call when the video playback is resumed after a pause | +| `ready(eventTime: Float = currentTime): Future` | method to call once the player is ready to play the media | +| `end(eventTime: Float = currentTime): Future` | method to call when the video is ended | +| `seek(from: Float, to: Float): Future` | method to call when a seek event occurs, the `from` and `to` parameters are mandatory and should contain the seek start & end times in seconds | +| `pause(eventTime: Float = currentTime): Future` | method to call when the video is paused | +| `destroy(eventTime: Float = currentTime): Future` | method to call when the video player is disposed (eg. when the use closes the navigation tab) | +| `currentTime` | field to call each time the playback time changes (it should be called often, the accuracy of the collected data depends on it) if you don't know event time. | -#### `resume(eventTime: Float = currentTime): Future` - -> method to call when the video playback is resumed after a pause - -#### `ready(eventTime: Float = currentTime): Future` - -> method to call once the player is ready to play the media - -#### `end(eventTime: Float = currentTime): Future` - -> method to call when the video is ended - -#### `seek(from: Float, to: Float): Future` - -> method to call when a seek event occurs, the `from` and `to` parameters are mandatory and should -> contains the seek start & end times in seconds - -#### `pause(eventTime: Float = currentTime): Future` - -> method to call when the video is paused - -#### `destroy(eventTime: Float = currentTime): Future` - -> method to call when the video player is disposed (eg. when the use closes the navigation tab) - -#### `currentTime` - -> field to call each time the playback time changes (it should be called often, the accuracy of the -> collected data depends on it) if you don't know event time. - -## API documentation +### API documentation A complete [API documentation](https://apivideo.github.io/api.video-android-player-analytics/) is available. \ No newline at end of file diff --git a/templates/documentation/sdks/player/apivideo-android-player.md b/templates/documentation/sdks/player/apivideo-android-player.md index 1bffd52f..099bbbaa 100644 --- a/templates/documentation/sdks/player/apivideo-android-player.md +++ b/templates/documentation/sdks/player/apivideo-android-player.md @@ -6,37 +6,22 @@ metadata: description: "The official api.video Android Player component for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video Android Player -============== +# api.video Android Player [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. -# Table of contents - -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [Gradle](#gradle) - - [Permissions](#permissions) - - [Permissions](#permissions) - - [Retrieve your video Id](#retrieve-your-video-id) -- [Sample application](#sample-application) -- [Documentation](#documentation) -- [Dependencies](#dependencies) - -# Project description +## Project description Easily integrate a video player for videos from [api.video](https://api.video/) in your Android application. -# Getting started +## Getting started -## Installation +### Installation -### Gradle +#### Gradle In your module `build.gradle`, add the following code in `dependencies`: @@ -46,7 +31,7 @@ dependencies { } ``` -## Permissions +### Permissions In your `AndroidManifest.xml`, add the following code in ``: @@ -55,7 +40,7 @@ In your `AndroidManifest.xml`, add the following code in ``: ``` -## Retrieve your video Id +### Retrieve your video Id At this point, you must have uploaded a least one video to your account. If you haven't see [how to upload a video](https://docs.api.video/vod/upload-a-video-regular-upload/). You'll need @@ -73,7 +58,7 @@ a video Id to use this component and play a video from api.video. To get yours, Alternatively, you can find your video Id in the video details of your [dashboard](https://dashboard.api.video). -## Code sample +### Code sample 1. Add a `ApiVideoExoPlayerView` to your Activity/Fragment layout: @@ -121,7 +106,7 @@ val player = ApiVideoPlayerController( If you requires a fullscreen video. You will have to implement the `ApiVideoPlayerController.ViewListener` interface. Check out for the implementation in the [Sample application](#sample-application). -# Sample application +## Sample application A demo application demonstrates how to use player. See [`/example`](https://github.com/apivideo/api.video-android-player/tree/main/example) @@ -131,12 +116,12 @@ On the first run, you will have to set your video Id: 1. Click on the FloatingActionButton -> Settings 2. Replace "YOUR_VIDEO_ID" by your video Id -# Documentation +## Documentation * [API documentation](https://apivideo.github.io/api.video-android-player/) * [api.video documentation](https://docs.api.video/) -# Dependencies +## Dependencies We are using external library @@ -144,7 +129,7 @@ We are using external library |--------------------------------------------------|---------------------------------------------------------| | [Exoplayer](https://github.com/google/ExoPlayer) | [README.md](https://github.com/google/ExoPlayer#readme) | -# FAQ +## FAQ If you have any questions, ask us here: [https://community.api.video](https://community.api.video). Or use [Issues]. \ No newline at end of file diff --git a/templates/documentation/sdks/player/apivideo-flutter-player.md b/templates/documentation/sdks/player/apivideo-flutter-player.md index 91f13b24..cb91b85f 100644 --- a/templates/documentation/sdks/player/apivideo-flutter-player.md +++ b/templates/documentation/sdks/player/apivideo-flutter-player.md @@ -6,42 +6,20 @@ metadata: description: "The official api.video Flutter Player component for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video Flutter Player -============== +# api.video Flutter Player [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. -# Table of contents - -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [Web usage](#web-usage) -- [Documentation](#documentation) - - [Instantiation](#instantiation) - - [1. The ApiVideoPlayerController](#1-the-apivideoplayercontroller) - - [2. The ApiVideoPlayer](#2-the-apivideoplayer) - - [Methods](#methods) - - [Properties](#properties) - - [Events listener](#events-listener) - - [Add a new event listener: Method 1](#add-a-new-event-listener-method-1) - - [Add a new event listener: Method 2](#add-a-new-event-listener-method-2) - - [Remove an event listener](#remove-an-event-listener) -- [Dependencies](#dependencies) -- [Sample application](#sample-application) -- [FAQ](#faq) - -# Project description +## Project description Easily integrate a video player for videos from api.video in your Flutter application for iOS, Android and Web. -# Getting started +## Getting started -## Installation +### Installation Run the following command at the root of your project. @@ -49,7 +27,7 @@ Run the following command at the root of your project. flutter pub add apivideo_player ``` -### Web usage +#### Web usage If you want to use your application as a web app, you need to add the [api.video player SDK](https://github.com/apivideo/api.video-player-sdk) script in `web/index.html` from the root of your project. @@ -68,11 +46,11 @@ If you want to use your application as a web app, you need to add the [api.video ``` -# Documentation +## Documentation -## Instantiation +### Instantiation -### 1. The ApiVideoPlayerController +#### 1. The ApiVideoPlayerController To use a video player, you must instantiate a new controller. @@ -100,7 +78,7 @@ await controller.initialize(); See the sample application below for more details. -### 2. The ApiVideoPlayer +#### 2. The ApiVideoPlayer A Widget that displays the video and its controls. @@ -126,7 +104,7 @@ Widget build(BuildContext context) { } ``` -## Methods +### Methods Once the [ApiVideoPlayerController](https://github.com/apivideo/api.video-flutter-player/blob/main/lib/src/apivideo_player_controller.dart) has been instantiated, you can control the player it has been assigned to with its methods: @@ -154,7 +132,7 @@ await controller.initialize(); controller.play(); // Play the video ``` -## Properties +### Properties Once the [ApiVideoPlayerController](https://github.com/apivideo/api.video-flutter-player/blob/main/lib/src/apivideo_player_controller.dart) has been instantiated, you can access the video player's properties: @@ -183,9 +161,9 @@ await controller.initialize(); final bool isMuted = await controller.isMuted; ``` -## Events listener +### Events listener -### Add a new event listener: Method 1 +#### Add a new event listener: Method 1 When you instantiate a new [ApiVideoPlayerController](https://github.com/apivideo/api.video-flutter-player/blob/main/lib/src/apivideo_player_controller.dart), you can bind callbacks to some events: @@ -197,7 +175,7 @@ final ApiVideoPlayerController controller = ApiVideoPlayerController( ); ``` -### Add a new event listener: Method 2 +#### Add a new event listener: Method 2 Once the [ApiVideoPlayerController](https://github.com/apivideo/api.video-flutter-player/blob/main/lib/src/apivideo_player_controller.dart) has been instantiated, you can bind callbacks to some events: @@ -224,7 +202,7 @@ controller.addEventsListener(eventsListener); | onEnd | VoidCallback | A callback called when the video has ended | | onError | Function(Object) | A callback called when an error occured | -### Remove an event listener +#### Remove an event listener To remove an event listener, you need to call the controller's `removeEventsListener` method. @@ -243,7 +221,7 @@ final ApiVideoPlayerEventsListener eventsListener = controller.removeEventsListener(eventsListener); ``` -# Dependencies +## Dependencies We are using external library @@ -251,7 +229,7 @@ We are using external library |--------------------------------------------------|---------------------------------------------------------| | [Exoplayer](https://github.com/google/ExoPlayer) | [README.md](https://github.com/google/ExoPlayer#readme) | -# Sample application +## Sample application ```dart import 'package:apivideo_player/apivideo_player.dart'; @@ -334,7 +312,7 @@ class _MyAppState extends State { ``` -# FAQ +## FAQ If you have any questions, ask us in the [community](https://community.api.video). Or use [issues](https://github.com/apivideo/api.video-flutter-player/issues). \ No newline at end of file diff --git a/templates/documentation/sdks/player/apivideo-hlsjs-analytics.md b/templates/documentation/sdks/player/apivideo-hlsjs-analytics.md index f04a3994..c77eaba8 100644 --- a/templates/documentation/sdks/player/apivideo-hlsjs-analytics.md +++ b/templates/documentation/sdks/player/apivideo-hlsjs-analytics.md @@ -6,29 +6,17 @@ metadata: description: "The official api.video hls.js analytics plugin for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video hls.js analytics plugin -============== +# api.video hls.js analytics plugin [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. -# Table of contents - -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Setup](#setup) - - [Code sample](#code-sample) -- [Documentation](#documentation) - - [Module instanciation](#module-instanciation) - - [Instanciation example](#instanciation-example) - -# Project description +## Project description hls.js module to call the api.video analytics collector. -# Getting started +## Getting started -## Setup +### Setup Include `https://unpkg.com/@api.video/hlsjs-player-analytics` in your web page. @@ -36,7 +24,7 @@ Include `https://unpkg.com/@api.video/hlsjs-player-analytics` in your web page. ``` -## Code sample +### Code sample Include the module in your HTML file like so: @@ -65,11 +53,11 @@ Include the module in your HTML file like so: ``` -# Documentation +## Documentation -## Module instanciation +### Module instantiation -Then, before having instanciated `Hls`, instanciate a `HlsJsApiVideoAnalytics` object. +Then, before having instantiated `Hls`, instantiate a `HlsJsApiVideoAnalytics` object. The `HlsJsApiVideoAnalytics` constructor take the following parameters: @@ -86,7 +74,7 @@ Available options (`HlsJsApiVideoAnalyticsOptions`): | userMetadata | no | ```{ [name: string]: string }[]``` | object containing [metadata](https://api.video/blog/tutorials/dynamic-metadata/) (see **Full example** below) | | sequence | no | ```{start: number; end?: number;} ``` | if only a sequence of the video is going to be played | -## Instanciation example +### Instantiation example ```javascript var hls = new Hls(); diff --git a/templates/documentation/sdks/player/apivideo-player-analytics.md b/templates/documentation/sdks/player/apivideo-player-analytics.md index c45dc32f..cec41909 100644 --- a/templates/documentation/sdks/player/apivideo-player-analytics.md +++ b/templates/documentation/sdks/player/apivideo-player-analytics.md @@ -6,34 +6,11 @@ metadata: description: "The official api.video Player analytics plugin for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video Player analytics plugin -============== +# api.video Player analytics plugin [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. -# Table of contents - -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [Method #1: requirejs](#method-1-requirejs) - - [Method #2: typescript](#method-2-typescript) - - [Method #3: imple include in a javascript project](#method-3-imple-include-in-a-javascript-project) -- [Documentation](#documentation) - - [Instanciation options](#instanciation-options) - - [Module methods](#module-methods) - - [`play(): Promise`](#play-promisevoid) - - [`resume(): Promise`](#resume-promisevoid) - - [`ready(): Promise`](#ready-promisevoid) - - [`end(): Promise`](#end-promisevoid) - - [`seek(from: number, to: number): Promise`](#seekfrom-number-to-number-promisevoid) - - [`pause(): Promise`](#pause-promisevoid) - - [`destroy(): Promise`](#destroy-promisevoid) - - [`updateTime(time: number): Promise`](#updatetimetime-number-promisevoid) - - -# Project description +## Project description Javascript module to manually call the api.video analytics collector. @@ -49,11 +26,11 @@ If you use one of the following video player, you should rather use the associat This module is compatible with React Native. -# Getting started +## Getting started -## Installation +### Installation -### Method #1: requirejs +#### Method #1: requirejs If you use requirejs you can add the module as a dependency to your project with @@ -72,7 +49,7 @@ const playerAnalytics = new PlayerAnalytics({ }); ``` -### Method #2: typescript +#### Method #2: typescript If you use Typescript you can add the SDK as a dependency to your project with @@ -90,7 +67,7 @@ const playerAnalytics = new PlayerAnalytics({ }); ``` -### Method #3: imple include in a javascript project +#### Method #3: imple include in a javascript project Include the SDK in your HTML file like so: @@ -110,9 +87,9 @@ Then, once the `window.onload` event has been trigered, instanciate the module w ``` -# Documentation +## Documentation -## Instanciation options +### Instantiation options The analytics module constructor takes a `PlayerAnalyticsOptions` parameter that contains the following options: @@ -127,28 +104,15 @@ The analytics module constructor takes a `PlayerAnalyticsOptions` parameter that Once the module is instanciated, the following methods have to be called to monitor the playback events. -## Module methods - -#### `play(): Promise` -> method to call when the video starts playing for the first time (in the case of a resume after paused, use `resume()`) - -#### `resume(): Promise` -> method to call when the video playback is resumed after a pause - -#### `ready(): Promise` -> method to call once the player is ready to play the media - -#### `end(): Promise` -> method to call when the video is ended - -#### `seek(from: number, to: number): Promise` -> method to call when a seek event occurs, the `from` and `to` parameters are mandatory and should contains the seek start & end times in seconds - -#### `pause(): Promise` -> method to call when the video is paused - -#### `destroy(): Promise` -> method to call when the video player is disposed (eg. when the use closes the navigation tab) - -#### `updateTime(time: number): Promise` -> method to call each time the playback time changes (it should be called often, the accuracy of the collected data depends on it) \ No newline at end of file +### Module methods + +| Method | Description | +|----------|----------| +| `play(): Promise` | method to call when the video starts playing for the first time (in the case of a resume after paused, use `resume()`) | +| `resume(): Promise` | method to call when the video playback is resumed after a pause | +| `ready(): Promise` | method to call once the player is ready to play the media | +| `end(): Promise` | method to call when the video is ended | +| `seek(from: number, to: number): Promise` | method to call when a seek event occurs, the `from` and `to` parameters are mandatory and should contain the seek start & end times in seconds | +| `pause(): Promise` | method to call when the video is paused | +| `destroy(): Promise` | method to call when the video player is disposed (eg. when the use closes the navigation tab) | +| `updateTime(time: number): Promise` | method to call each time the playback time changes (it should be called often, the accuracy of the collected data depends on it) | \ No newline at end of file diff --git a/templates/documentation/sdks/player/apivideo-player-sdk.md b/templates/documentation/sdks/player/apivideo-player-sdk.md index 82cfd347..531ad036 100644 --- a/templates/documentation/sdks/player/apivideo-player-sdk.md +++ b/templates/documentation/sdks/player/apivideo-player-sdk.md @@ -6,75 +6,20 @@ metadata: description: "The official api.video Player SDK for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video Player SDK -============== +# api.video Player SDK [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. - -# Table of contents - -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [Method #1: requirejs](#method-1-requirejs) - - [Method #2: typescript](#method-2-typescript) - - [Method #2: simple include in a javascript project](#method-2-simple-include-in-a-javascript-project) -- [Documentation](#documentation) - - [Instanciation](#instanciation) - - [Ads](#ads) - - [Methods](#methods) - - [`loadConfig(options: SdkOptions)`](#loadconfigoptions-sdkoptions) - - [`play()`](#play) - - [`pause()`](#pause) - - [`mute()`](#mute) - - [`unmute()`](#unmute) - - [`hideControls(controls?: ControlName[])`](#hidecontrolscontrols-controlname) - - [`showControls(controls?: ControlName[])`](#showcontrolscontrols-controlname) - - [`setChromeless(chromeless: boolean)`](#setchromelesschromeless-boolean) - - [`hideSubtitles()`](#hidesubtitles) - - [`showSubtitles()`](#showsubtitles) - - [`hideTitles()`](#hidetitles) - - [`showTitles()`](#showtitles) - - [`setLoop(loop: boolean)`](#setlooploop-boolean) - - [`setAutoplay(autoplay: boolean)`](#setautoplayautoplay-boolean) - - [`seek(time: number)`](#seektime-number) - - [`setPlaybackRate(rate: number)`](#setplaybackraterate-number) - - [`setCurrentTime(time: number)`](#setcurrenttimetime-number) - - [`setVolume(volume: number)`](#setvolumevolume-number) - - [`setVideoStyleObjectFit(value: "contain" | "cover" | "fill" | "none" | "scale-down")`](#setvideostyleobjectfitvalue-contain--cover--fill--none--scale-down) - - [`setVideoStyleTransform(value: string)`](#setvideostyletransformvalue-string) - - [`setTheme(theme: PlayerTheme)`](#setthemetheme-playertheme) - - [`requestFullscreen()`](#requestfullscreen) - - [`exitFullscreen()`](#exitfullscreen) - - [`requestPictureInPicture()`](#requestpictureinpicture) - - [`exitPictureInPicture()`](#exitpictureinpicture) - - [`getPaused(callback?: (paused: boolean) => void): Promise`](#getpausedcallback-paused-boolean--void-promiseboolean) - - [`getPlaying(callback?: (playing: boolean) => void): Promise`](#getplayingcallback-playing-boolean--void-promiseboolean) - - [`getMuted(callback?: (muted: boolean) => void): Promise`](#getmutedcallback-muted-boolean--void-promiseboolean) - - [`getDuration(callback?: (duration: number) => void): Promise`](#getdurationcallback-duration-number--void-promisenumber) - - [`getCurrentTime(callback?: (currentTime: number) => void): Promise`](#getcurrenttimecallback-currenttime-number--void-promisenumber) - - [`getVolume(callback?: (volume: number) => void): Promise`](#getvolumecallback-volume-number--void-promisenumber) - - [`getLoop(callback?: (loop: boolean) => void): Promise`](#getloopcallback-loop-boolean--void-promiseboolean) - - [`getPlaybackRate(callback?: (rate: number) => void): Promise`](#getplaybackratecallback-rate-number--void-promisenumber) - - [`destroy()`](#destroy) - - [`addEventListener(event: string, callback: () => void)`](#addeventlistenerevent-string-callback---void) - - [Full example](#full-example) - - [Control an existing embedded player using the SDK](#control-an-existing-embedded-player-using-the-sdk) - - - -# Project description +## Project description SDK to control and interact with the api.video HTML5 Player -# Getting started +## Getting started -## Installation +### Installation -### Method #1: requirejs +#### Method #1: requirejs If you use requirejs you can add the SDK as a dependency to your project with @@ -93,7 +38,7 @@ var sdk = new PlayerSdk("#target", { }); ``` -### Method #2: typescript +#### Method #2: typescript If you use Typescript you can add the SDK as a dependency to your project with @@ -113,7 +58,7 @@ const sdk = new PlayerSdk("#target", { ``` -### Method #2: simple include in a javascript project +#### Method #2: simple include in a javascript project Include the SDK in your HTML file like so: @@ -134,9 +79,9 @@ Then, once the `window.onload` event has been triggered, create your player usin ``` -# Documentation +## Documentation -## Instanciation +### Instantiation The PlayerSdk constructor takes 2 parameters: - `targetSelector: string | Element` a CSS selector targeting the DOM element in which you want to create the player (eg. "#target"), or the DOM element itself @@ -172,228 +117,289 @@ Note: ads are displayed using the [Google IMA SDK](https://developers.google.com ## Methods -The sdk instance has the following methods: - -#### `loadConfig(options: SdkOptions)` -> Load a new video in the same instance of the player. Available options are the same as the ones passed to the SDK constructor (see available). -> -> Example: -> ```javascript -> player.loadConfig({ -> id: "", -> hideTitle: true, -> hideControls: true, -> }); -> ``` -#### `play()` -> Start playing the video. -#### `pause()` -> Pause the video playback. -#### `mute()` -> Mute the video. -#### `unmute()` -> Unmute the video. -#### `hideControls(controls?: ControlName[])` -> Hide the player controls. -> -> `controls` parameter type definition: -> ```typescript -> type ControlName = "play" | "seekBackward" | "seekForward" | "playbackRate" -> | "volume" | "fullscreen" | "subtitles" | "chapters" -> | "pictureInPicture" | "progressBar" | "chromecast" | "download" | "more"; -> ``` -> -> If no value is provided for the "controls" parameter, all controls will be hidden. -> -> **Note**: the only control that can still be visible is the unmute button if the video as started muted. To hide all controls, including this one, use the setChromeless() method -> -> Example: -> ```javascript -> player.hideControls(); -> ``` -> -> If a list of control names if provided, the associated controls will be hidden. -> -> Example: -> ```javascript -> player.showControls(); // display all controls ... -> player.hideControls(["download", "subtitles"]); // ... except "download" and "subtitles" -> ``` -> -#### `showControls(controls?: ControlName[])` -> Show the player controls. -> -> `controls` parameter type definition: -> ```typescript -> type ControlName = "play" | "seekBackward" | "seekForward" | "playbackRate" -> | "volume" | "fullscreen" | "subtitles" | "chapters" -> | "pictureInPicture" | "progressBar" | "chromecast" | "download" | "more"; -> ``` -> -> If no value is provided for the "controls" parameter, all controls will be displayed. -> -> Example: -> ```javascript -> player.showControls(); -> ``` -> -> If a list of control names if provided, the associated controls will be displayed. -> -> Example: -> ```javascript -> player.hideControls(); // hide all controls ... -> player.showControls(["download", "subtitles"]); // ... except "download" and "subtitles" ... -> // ... -> player.showControls(["progressBar"]); // ... and the progress bar -> ``` -> -#### `setChromeless(chromeless: boolean)` -> Define if the player should be in chromeless mode (all controls hidden). -#### `hideSubtitles()` -> Hide the player subtitles. -#### `showSubtitles()` -> Show the player subtitles. -#### `hideTitles()` -> Hide the video title at the top of the video. -#### `showTitles()` -> Show the video title at the top of the video. -#### `setLoop(loop: boolean)` -> Define if the video should be played in loop. -#### `setAutoplay(autoplay: boolean)` -> Define if the video should start playing as soon as it is loaded -#### `seek(time: number)` -> Add/substract the given number of seconds to/from the playback time. -#### `setPlaybackRate(rate: number)` -> Set the current playback rate. ->Example: ->```javascript -> player.setPlaybackRate(2); // Play at 2x rate ->``` -#### `setCurrentTime(time: number)` -> Set the current playback time (seconds). -> ->Example: ->```javascript -> player.setCurrentTime(24); // Go the 24th second ->``` -#### `setVolume(volume: number)` -> Change the audio volume to the given value. From 0 to 1 (0 = muted, 1 = 100%). -> -> Example: -> ```javascript -> player.setVolume(0.75); // Set the volume to 75% -> ``` -#### `setVideoStyleObjectFit(value: "contain" | "cover" | "fill" | "none" | "scale-down")` -> Change the [object-fit](https://developer.mozilla.org/fr/docs/Web/CSS/object-fit) CSS value of the video tag. - -> Example: -> ```javascript -> player.setVideoStyleObjectFit("cover"); // Set the object-fit to cover -> ``` - -#### `setVideoStyleTransform(value: string)` -> Change the [transform](https://developer.mozilla.org/fr/docs/Web/CSS/transform) CSS value of the video tag. - -> Example: -> ```javascript -> player.setVideoStyleTransform("rotateY(180deg)"); // Apply a 180deg rotation around the Y axis (mirroring) -> ``` - -#### `setTheme(theme: PlayerTheme)` -> Change the appearance of the player. -> -> `theme` parameter type definition: -> ```typescript -> type PlayerTheme = { -> text?: string; -> link?: string; -> linkHover?: string; -> trackPlayed?: string; -> trackUnplayed?: string; -> trackBackground?: string; -> backgroundTop?: string; -> backgroundBottom?: string; -> backgroundText?: string; -> linkActive?: string; -> } -> ``` -> -> Example: -> ```javascript -> player.setTheme({ -> link: "red", -> linkHover: "rgba(0, 255, 0, 1)", -> backgroundBottom: "#0000ff", -> }); -> ``` - -#### `requestFullscreen()` -> Request fullscreen mode (this may not work in some cases depending on browser restrictions) -#### `exitFullscreen()` -> Leave fullscreen mode -#### `requestPictureInPicture()` -> Request picture in picture mode (this may not work in some cases depending on browser restrictions) -#### `exitPictureInPicture()` -> Leave picture in picture mode -#### `getPaused(callback?: (paused: boolean) => void): Promise` -> Check weither the video is paused. -#### `getPlaying(callback?: (playing: boolean) => void): Promise` -> Check weither the video is playing. -#### `getMuted(callback?: (muted: boolean) => void): Promise` -> Check weither the video is muted. -#### `getDuration(callback?: (duration: number) => void): Promise` -> Retrieve the duration of the video. -#### `getCurrentTime(callback?: (currentTime: number) => void): Promise` -> Retrieve the current playback time of the video. -#### `getVolume(callback?: (volume: number) => void): Promise` -> Retrieve the current volume. -#### `getLoop(callback?: (loop: boolean) => void): Promise` -> Check whether the video is in loop mode. -#### `getPlaybackRate(callback?: (rate: number) => void): Promise` -> Retrieve the playback rate. -#### `destroy()` -> Destroy the player instance. -#### `addEventListener(event: string, callback: () => void)` -> Define a callback function that will be called when the given event is triggered by the player. -> -> Available events are the following: -> -> Event name | Description | Parameter -> ---: | --- | --- -> controlsdisabled | Controls are now disabled | - -> controlsenabled | Controls are now enabled | - -> ended | The playback as reached the ended of the video | - -> error | An error occured | - -> firstplay | The video started to play for the first time | - -> fullscreenchange | The player goes to (or goes back from) full screen | - -> mouseenter | The user's mouse entered the player area | - -> mouseleave | The user's mouse leaved the player area | - -> pause | The video has been paused | - -> play | The video started to play (for the first time or after having been paused) | - -> playerresize | The player size has changed | - -> qualitychange | The video quality has changed | `{ resolution: { height: number, width: number } }` -> ratechange | The playback rate has changed | - -> ready | The player is ready to play | - -> resize | The video size has changed -> seeking | The player is seeking | - -> timeupdate | The playback time has changed | `{ currentTime: number }` -> useractive | The user is active | - -> userinactive | The user is inactive | - -> volumechange | The volume has changed | `{ volume: number }` -> -> Examples: -> ```javascript -> // listen to the 'play' event -> player.addEventListener('play', function() { -> console.log('play event received'); -> }); -> -> player.addEventListener('qualitychange', function(ev) { -> console.log(`quality has changed: ${ev.resolution.width}x${ev.resolution.height}`); -> }); -> ``` - -## Full example +The SDK instance has the following methods: + +- `loadConfig(options: SdkOptions)` +Load a new video in the same instance of the player. Available options are the same as the ones passed to the SDK nstructor (see available). +Example: +```javascript + player.loadConfig({ + id: "", + hideTitle: true, + hideControls: true, + }); +``` +- `play()` + +Start playing the video. + +- `pause()` + +Pause the video playback. + +- `mute()` + +Mute the video. + +- `unmute()` + +Unmute the video. + +- `hideControls(controls?: ControlName[])` + +Hide the player controls. + +`controls` parameter type definition: +```typescript +type ControlName = "play" | "seekBackward" | "seekForward" | "playbackRate" + | "volume" | "fullscreen" | "subtitles" | "chapters" + | "pictureInPicture" | "progressBar" | "chromecast" | "download" | "more"; +``` + +If no value is provided for the "controls" parameter, all controls will be hidden. + +**Note**: the only control that can still be visible is the unmute button if the video as started muted. To hide all controls, including this one, use the setChromeless() method + +Example: +```javascript + player.hideControls(); +``` + +If a list of control names if provided, the associated controls will be hidden. + +Example: +```javascript + player.showControls(); // display all controls ... + player.hideControls(["download", "subtitles"]); // ... except "download" and "subtitles" +``` + +- `showControls(controls?: ControlName[])` + +Show the player controls. + +`controls` parameter type definition: +```typescript +type ControlName = "play" | "seekBackward" | "seekForward" | "playbackRate" + | "volume" | "fullscreen" | "subtitles" | "chapters" + | "pictureInPicture" | "progressBar" | "chromecast" | "download" | "more"; +``` + +If no value is provided for the "controls" parameter, all controls will be displayed. + +Example: +```javascript + player.showControls(); +``` + +If a list of control names if provided, the associated controls will be displayed. + +Example: +```javascript + player.hideControls(); // hide all controls ... + player.showControls(["download", "subtitles"]); // ... except "download" and "subtitles" ... + // ... + player.showControls(["progressBar"]); // ... and the progress bar +``` + +- `setChromeless(chromeless: boolean)` + +Define if the player should be in chromeless mode (all controls hidden). + +- `hideSubtitles()` + +Hide the player subtitles. + +- `showSubtitles()` + +Show the player subtitles. + +- `hideTitles()` + +Hide the video title at the top of the video. + +- `showTitles()` + +Show the video title at the top of the video. + +- `setLoop(loop: boolean)` + +Define if the video should be played in loop. + +- `setAutoplay(autoplay: boolean)` + +Define if the video should start playing as soon as it is loaded + +- `seek(time: number)` + +Add/substract the given number of seconds to/from the playback time. + +- `setPlaybackRate(rate: number)` + +Set the current playback rate. + +Example: +```javascript + player.setPlaybackRate(2); // Play at 2x rate +``` + +- `setCurrentTime(time: number)` + +Set the current playback time (seconds). + +Example: +```javascript + player.setCurrentTime(24); // Go the 24th second +``` + +- `setVolume(volume: number)` + +Change the audio volume to the given value. From 0 to 1 (0 = muted, 1 = 100%). + +Example: +```javascript + player.setVolume(0.75); // Set the volume to 75% +``` + +- `setVideoStyleObjectFit(value: "contain" | "cover" | "fill" | "none" | "scale-down")` + +Change the [object-fit](https://developer.mozilla.org/fr/docs/Web/CSS/object-fit) CSS value of the video tag. + +Example: +```javascript + player.setVideoStyleObjectFit("cover"); // Set the object-fit to cover +``` + +- `setVideoStyleTransform(value: string)` + +Change the [transform](https://developer.mozilla.org/fr/docs/Web/CSS/transform) CSS value of the video tag. + +Example: +```javascript + player.setVideoStyleTransform("rotateY(180deg)"); // Apply a 180deg rotation around the Y axis (mirroring) +``` + +- `setTheme(theme: PlayerTheme)` +Change the appearance of the player. + +`theme` parameter type definition: +```typescript +type PlayerTheme = { + text?: string; + link?: string; + linkHover?: string; + trackPlayed?: string; + trackUnplayed?: string; + trackBackground?: string; + backgroundTop?: string; + backgroundBottom?: string; + backgroundText?: string; + linkActive?: string; +} +``` + +Example: +```javascript + player.setTheme({ + link: "red", + linkHover: "rgba(0, 255, 0, 1)", + backgroundBottom: "#0000ff", + }); +``` + +- `requestFullscreen()` + +Request fullscreen mode (this may not work in some cases depending on browser restrictions) + +- `exitFullscreen()` + +Leave fullscreen mode + +- `requestPictureInPicture()` + +Request picture in picture mode (this may not work in some cases depending on browser restrictions) + +- `exitPictureInPicture()` + +Leave picture in picture mode + +- `getPaused(callback?: (paused: boolean) => void): Promise` + +Check weither the video is paused. + +- `getPlaying(callback?: (playing: boolean) => void): Promise` + +Check weither the video is playing. + +- `getMuted(callback?: (muted: boolean) => void): Promise` + +Check weither the video is muted. + +- `getDuration(callback?: (duration: number) => void): Promise` + +Retrieve the duration of the video. + +- `getCurrentTime(callback?: (currentTime: number) => void): Promise` + +Retrieve the current playback time of the video. + +- `getVolume(callback?: (volume: number) => void): Promise` + +Retrieve the current volume. + +- `getLoop(callback?: (loop: boolean) => void): Promise` + +Check whether the video is in loop mode. + +- `getPlaybackRate(callback?: (rate: number) => void): Promise` + +Retrieve the playback rate. + +- `destroy()` + +Destroy the player instance. + +- `addEventListener(event: string, callback: () => void)` + +Define a callback function that will be called when the given event is triggered by the player. + +Available events are the following: + +Event name | Description | Parameter +---: | --- | --- +controlsdisabled | Controls are now disabled | - +controlsenabled | Controls are now enabled | - +ended | The playback as reached the ended of the video | - +error | An error occured | - +firstplay | The video started to play for the first time | - +fullscreenchange | The player goes to (or goes back from) full screen | - +mouseenter | The user's mouse entered the player area | - +mouseleave | The user's mouse leaved the player area | - +pause | The video has been paused | - +play | The video started to play (for the first time or after having been paused) | - +playerresize | The player size has changed | - +qualitychange | The video quality has changed | `{ resolution: { height: number, width: number } }` +ratechange | The playback rate has changed | - +ready | The player is ready to play | - +resize | The video size has changed +seeking | The player is seeking | - +timeupdate | The playback time has changed | `{ currentTime: number }` +useractive | The user is active | - +userinactive | The user is inactive | - +volumechange | The volume has changed | `{ volume: number }` + +Examples: +```javascript + // listen to the 'play' event + player.addEventListener('play', function() { + console.log('play event received'); + }); + + player.addEventListener('qualitychange', function(ev) { + console.log(`quality has changed: ${ev.resolution.width}x${ev.resolution.height}`); + }); +``` + +### Full example ```html @@ -438,7 +444,7 @@ The sdk instance has the following methods: ``` -## Control an existing embedded player using the SDK +### Control an existing embedded player using the SDK It's also possible to integrate the SDK in a page that already contains an embedded player in order to control it and to listen to its events. Let's consider the following page : diff --git a/templates/documentation/sdks/player/apivideo-react-native-player.md b/templates/documentation/sdks/player/apivideo-react-native-player.md index 813823c0..fc236f97 100644 --- a/templates/documentation/sdks/player/apivideo-react-native-player.md +++ b/templates/documentation/sdks/player/apivideo-react-native-player.md @@ -6,32 +6,17 @@ metadata: description: "The official api.video React Native Player for api.video. [api.video](https://api./) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video React Native Player -============== - +# api.video React Native Player [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. -# Table of contents - -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [Limitations](#limitations) - - [Code sample](#code-sample) -- [Documentation](#documentation) - - [Props & Methods](#props--methods) - - [Using methods](#using-methods) -- [FAQ](#faq) - -# Project description +## Project description React Native video player to play vod and lives from api.video -# Getting started +## Getting started -## Installation +### Installation ```sh npm install @api.video/react-native-player @@ -46,13 +31,13 @@ Install the native dependencies with Cocoapods cd ios && pod install ``` -## Limitations +### Limitations For the moment, this player component is based on the api.video's javascript player (displayed in a [react-native-webview](https://github.com/react-native-webview/react-native-webview)), and therefore it suffers from the same limitation as every players displayed in browsers. We plan to base the player component on natives video players in a further release to avoid this kind of limitation. Stay tuned! -## Code sample +### Code sample ```jsx import React from 'react'; @@ -64,9 +49,9 @@ const App = () => export default App; ``` -# Documentation +## Documentation -## Props & Methods +### Props & Methods ```ts // props: @@ -122,7 +107,7 @@ setPlaybackRate(rate: number): void; setVolume(volume: number): void; ``` -## Using methods +### Using methods {% raw %} @@ -152,7 +137,7 @@ export default class App extends Component { {% endraw %} -# FAQ +## FAQ If you have any questions, ask us here: https://community.api.video . Or use [Issues]. diff --git a/templates/documentation/sdks/player/apivideo-react-player.md b/templates/documentation/sdks/player/apivideo-react-player.md index 3e978469..905e3f3b 100644 --- a/templates/documentation/sdks/player/apivideo-react-player.md +++ b/templates/documentation/sdks/player/apivideo-react-player.md @@ -6,47 +6,21 @@ metadata: description: "The official api.video React Player component for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video React Player component -============== - +# api.video React Player component [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. -# Table of contents - -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [Basic usage](#basic-usage) -- [Documentation](#documentation) - - [Properties](#properties) - - [Settings](#settings) - - [Controls](#controls) - - [Player theme](#player-theme) - - [Ads](#ads) - - [Responsiveness](#responsiveness) - - [Callbacks](#callbacks) - - [Methods](#methods) - - [Use cases](#use-cases) - - [Private videos](#private-videos) - - [Defining metadata](#defining-metadata) - - [Define your own controls](#define-your-own-controls) - -# Project description - - -# Getting started +## Getting started A React component for playing api.video videos. -## Installation +### Installation ```sh $ npm install --save @api.video/react-player ``` -## Basic usage +### Basic usage You can then use the component in your app: @@ -62,11 +36,11 @@ import ApiVideoPlayer from '@api.video/react-player' {% endraw %} -# Documentation +## Documentation -## Properties +### Properties -### Settings +#### Settings The following properties are used to configure the player. The value of each of these properties can be changed at any time during the playback. @@ -90,6 +64,7 @@ The following properties are used to configure the player. The value of each of | videoStyleObjectFit | no | "contain" \| "cover" \| "fill" \| "none" \| "scale-down" | The `object-fit` CSS value of the video tag | undefined | | videoStyleTransform | no | string | The `transform` CSS value of the video tag (examples: "rotateY(180deg)") | undefined | | ads | no | {adTagUrl: string} | see below [ads](#ads) | + #### Controls The `controls` property let you decide wich controls should be displayed on the player. Here is the list of all available controls: `play`, `seekBackward`, `seekForward`, `playbackRate`, `volume`, `fullscreen`, `subtitles`, `chapters`, `pictureInPicture`, `progressBar`, `chromecast`, `download`, `more`. diff --git a/templates/documentation/sdks/player/apivideo-swift-player-analytics.md b/templates/documentation/sdks/player/apivideo-swift-player-analytics.md index ba804532..d7b0f5a6 100644 --- a/templates/documentation/sdks/player/apivideo-swift-player-analytics.md +++ b/templates/documentation/sdks/player/apivideo-swift-player-analytics.md @@ -6,43 +6,19 @@ metadata: description: "The official api.video Swift Player analytics plugin for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video Swift Player analytics plugin -============== +# api.video Swift Player analytics plugin [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. -# Table of contents - -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [Swift Package Manager](#swift-package-manager) - - [Cocoapods](#cocoapods) -- [Sample application](#sample-application) -- [Documentation](#documentation) - - [Options](#options) - - [PlayerAnalytics API](#playeranalytics-api) - - [`play(completion: @escaping (Result) -> Void)`](#playcompletion-escaping-resultvoid-error---void) - - [`resume(completion: @escaping (Result) -> Void)`](#resumecompletion-escaping-resultvoid-error---void) - - [`ready(completion: @escaping (Result) -> Void)`](#readycompletion-escaping-resultvoid-error---void) - - [`end(completion: @escaping (Result) -> Void)`](#endcompletion-escaping-resultvoid-error---void) - - [`seek(from:Float, to: Float, completion : @escaping (Result) -> Void)`](#seekfromfloat-to-float-completion--escaping-resultvoid-error---void) - - [`pause(completion: @escaping (Result) -> Void)`](#pausecompletion-escaping-resultvoid-error---void) - - [`destroy(completion: @escaping (Result) -> Void)`](#destroycompletion-escaping-resultvoid-videoerror---void) - - [`currentTime`](#currenttime) - - - -# Project description +## Project description iOS library to manually call the api.video analytics collector. This is useful if you are using a video player for which we do not yet provide a ready-to-use monitoring module. -# Getting started +## Getting started -## Installation -### Swift Package Manager +### Installation +#### Swift Package Manager In the Project Navigator select your own project. Then select the project in the Project section and click on the Package Dependencies tab. Click on the "+" button at the bottom. Paste the below url on the search bar on the top right. Finaly click on "Add package" button. ``` https://github.com/apivideo/api.video-ios-player-analytics @@ -53,18 +29,18 @@ Or add this in your Package.swift .package(url: "https://github.com/apivideo/api.video-ios-player-analytics.git", from: "1.1.0"), ], ``` -### Cocoapods +#### Cocoapods Add `pod 'ApiVideoPlayerAnalytics', '1.1.0'` in your `Podfile` Run `pod install` -# Sample application +## Sample application A demo application demonstrates how to use player analytics library. See [`/Example`](https://github.com/apivideo/api.video-ios-player-analytics/tree/main/Example) folder. -# Documentation +## Documentation -## Options +### Options The analytics module constructor takes a `Options` parameter that contains the following options: @@ -80,28 +56,15 @@ Options instantiation is made with either mediaUrl or videoInfo. Once the module is instantiated, the following methods have to be called to monitor the playback events. -## PlayerAnalytics API - -#### `play(completion: @escaping (Result) -> Void)` -> method to call when the video starts playing for the first time (in the case of a resume after paused, use `resume()`) - -#### `resume(completion: @escaping (Result) -> Void)` -> method to call when the video playback is resumed after a pause - -#### `ready(completion: @escaping (Result) -> Void)` -> method to call once the player is ready to play the media - -#### `end(completion: @escaping (Result) -> Void)` -> method to call when the video is ended - -#### `seek(from:Float, to: Float, completion : @escaping (Result) -> Void)` -> method to call when a seek event occurs, the `from` and `to` parameters are mandatory and should contains the seek start & end times in seconds - -#### `pause(completion: @escaping (Result) -> Void)` -> method to call when the video is paused - -#### `destroy(completion: @escaping (Result) -> Void)` -> method to call when the video player is disposed (eg. when the use closes the navigation tab) - -#### `currentTime` -> field to call each time the playback time changes (it should be called often, the accuracy of the collected data depends on it) \ No newline at end of file +### PlayerAnalytics API + +| Method | Description | +| ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- | +| `play(completion: @escaping (Result) -> Void)` | Method to call when the video starts playing for the first time (in the case of a resume after paused, use `resume()`) | +| `resume(completion: @escaping (Result) -> Void)` | Method to call when the video playback is resumed after a pause | +| `ready(completion: @escaping (Result) -> Void)` | Method to call once the player is ready to play the media | +| `end(completion: @escaping (Result) -> Void)` | Method to call when the video is ended | +| `seek(from: Float, to: Float, completion : @escaping (Result) -> Void)` | Method to call when a seek event occurs, the `from` and `to` parameters are mandatory and should contain the seek start & end times in seconds | +| `pause(completion: @escaping (Result) -> Void)` | Method to call when the video is paused | +| `destroy(completion: @escaping (Result) -> Void)` | Method to call when the video player is disposed (e.g., when the user closes the navigation tab) | +| `currentTime` | Field to call each time the playback time changes (it should be called often, the accuracy of the collected data depends on it) | diff --git a/templates/documentation/sdks/player/apivideo-swift-player.md b/templates/documentation/sdks/player/apivideo-swift-player.md index 4ebce0fc..1f43e6df 100644 --- a/templates/documentation/sdks/player/apivideo-swift-player.md +++ b/templates/documentation/sdks/player/apivideo-swift-player.md @@ -6,38 +6,24 @@ metadata: description: "The official api.video Swift Player component for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video Swift Player -============== +# api.video Swift Player [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. -# Table of contents - -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [Swift Package Manager](#swift-package-manager) - - [Cocoapods](#cocoapods) - - [Retrieve your video Id](#retrieve-your-video-id) -- [Sample application](#sample-application) -- [Documentation](#documentation) -- [Dependencies](#dependencies) - -# Project description +## Project description Easily integrate a video player for videos from [api.video](https://api.video/) in your iOS application. ![](https://github.com/apivideo/api.video-swift-player/blob/main/Assets/player-preview.png) -# Getting started +## Getting started -## Installation +### Installation -### Swift Package Manager +#### Swift Package Manager In the Project Navigator select your own project. Then select the project in the Project section and click on the Package Dependencies tab. Click on the "+" button at the bottom. Paste the below url on the search bar on the top right. @@ -55,13 +41,13 @@ Or add this in your Package.swift ], ``` -### Cocoapods +#### Cocoapods Add `pod 'ApiVideoPlayer', '1.1.3'` in your `Podfile` Run `pod install` -## Retrieve your video Id +### Retrieve your video Id At this point, you must have uploaded a least one video to your account. If you haven't see [how to upload a video](https://docs.api.video/vod/upload-a-video-regular-upload/). You'll need @@ -80,7 +66,7 @@ Alternatively, you can find your video Id in the video details of your [dashboard](https://dashboard.api.video). -## Code sample +### Code sample 1. Imports the library @@ -181,7 +167,7 @@ override func viewDidAppear(_ animated: Bool) { } ``` -### Remote control +#### Remote control If you want to enable the remote control do the following: ```swift @@ -194,7 +180,7 @@ When you have to remove it set `enableRemoteControl` to false By default the remote control is hidden. -# Sample application +## Sample application A demo application demonstrates how to use player. See [`/example`](https://github.com/apivideo/api.video-swift-player/tree/main/Examples) @@ -204,12 +190,12 @@ On the first run, you will have to set your video Id: 1. Replace "YOUR_VIDEO_ID" by your video Id -# Documentation +## Documentation * [Player documentation](https://apivideo.github.io/api.video-swift-player/documentation/apivideoplayer/) * [api.video documentation](https://docs.api.video/) -# Dependencies +## Dependencies We are using external library @@ -217,7 +203,7 @@ We are using external library |---------------------------------------------------------------------------------------|--------------------------------------------------------------------------------| | [ApiVideoPlayerAnalytics](https://github.com/apivideo/api.video-ios-player-analytics) | [README.md](https://github.com/apivideo/api.video-ios-player-analytics#readme) | -# FAQ +## FAQ If you have any questions, ask us here: [https://community.api.video](https://community.api.video) or use [Issues](https://github.com/apivideo/api.video-swift-player/issues). \ No newline at end of file diff --git a/templates/documentation/sdks/player/apivideo-videojs-analytics.md b/templates/documentation/sdks/player/apivideo-videojs-analytics.md index 5a6e785c..47e3162b 100644 --- a/templates/documentation/sdks/player/apivideo-videojs-analytics.md +++ b/templates/documentation/sdks/player/apivideo-videojs-analytics.md @@ -6,31 +6,19 @@ metadata: description: "The official api.video video.js analytics plugin for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video video.js analytics plugin -============== +# api.video video.js analytics plugin [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. - -# Table of contents - -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [Method #1: requirejs](#method-1-requirejs) - - [Method #2: typescript](#method-2-typescript) - - [Method #3: simple include in a javascript project](#method-3-simple-include-in-a-javascript-project) - -# Project description +## Project description video.js plugin to call the api.video analytics collector. -# Getting started +## Getting started -## Installation +### Installation -### Method #1: requirejs +#### Method #1: requirejs If you use requirejs you can add the plugin as a dependency to your project with @@ -49,7 +37,7 @@ const player = videojs('my-video'); player.apiVideoAnalytics(); ``` -### Method #2: typescript +#### Method #2: typescript If you use Typescript you can add the plugin as a dependency to your project with @@ -70,7 +58,7 @@ player.apiVideoAnalytics(); ``` -### Method #3: simple include in a javascript project +#### Method #3: simple include in a javascript project Include the plugin in your HTML file like so: diff --git a/templates/documentation/sdks/vod/apivideo-android-uploader.md b/templates/documentation/sdks/vod/apivideo-android-uploader.md index bc309323..24f2f4c4 100644 --- a/templates/documentation/sdks/vod/apivideo-android-uploader.md +++ b/templates/documentation/sdks/vod/apivideo-android-uploader.md @@ -6,49 +6,25 @@ metadata: description: "The official api.video Android video uploader for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video Android video uploader -============== +# api.video Android video uploader [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. -# Table of contents - -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Requirements](#requirements) - - [Installation](#installation) - - [Maven users](#maven-users) - - [Gradle users](#gradle-users) - - [Others](#others) - - [Code sample](#code-sample) - - [Upload options](#upload-options) - - [Permissions](#permissions) -- [Documentation](#documentation) - - [API Endpoints](#api-endpoints) - - [VideosApi](#videosapi) - - [Models](#models) - - [Authorization](#documentation-for-authorization) - - [API key](#api-key) - - [Public endpoints](#public-endpoints) - - [Recommendation](#recommendation) -- [Have you gotten use from this API client?](#have-you-gotten-use-from-this-api-client-) -- [Contribution](#contribution) - -# Project description +## Project description api.video's Android streamlines the coding process. Chunking files is handled for you, as is pagination and refreshing your tokens. -# Getting started +## Getting started -## Requirements +### Requirements Building the API client library requires: 1. Java 1.8+ 2. Maven/Gradle -## Installation +### Installation -### Maven users +#### Maven users Add this dependency to your project's POM: @@ -61,7 +37,7 @@ Add this dependency to your project's POM: ``` -### Gradle users +#### Gradle users Add this dependency to your project's build file: @@ -69,7 +45,7 @@ Add this dependency to your project's build file: implementation "video.api:android-video-uploader:1.2.4" ``` -### Others +#### Others At first generate the JAR by executing: @@ -82,7 +58,7 @@ Then manually install the following JARs: * `target/android-video-uploader-1.2.4.jar` * `target/lib/*.jar` -## Code sample +### Code sample Please follow the [installation](#installation) instruction and execute the following Kotlin code: @@ -105,18 +81,18 @@ workManager.uploadWithUploadToken("MY_UPLOAD_TOKEN", myVideoFile) // Dispatch th // workManager.upload("MY_VIDEO_ID", myVideoFile) ``` -### Example +#### Example Examples that demonstrate how to use the API is provided in folder `examples/`. -## Upload methods +### Upload methods To upload a video, you have 3 differents methods: * `WorkManager`: preferred method: Upload with Android WorkManager API. It supports progress notifications. Directly use, WorkManager extensions. See [example](https://github.com/apivideo/api.video-android-uploader/tree/main/examples/workmanager) for more details. * `UploadService`: Upload with an Android Service. It supports progress notifications. You have to extend the `UploadService` and register it in your `AndroidManifest.xml`. See [example](https://github.com/apivideo/api.video-android-uploader/tree/main/examples/service) for more details. * Direct call with `ApiClient`: Do not call API from the main thread, otherwise you will get a android.os.NetworkOnMainThreadException. Dispatch API calls with Thread, Executors or Kotlin coroutine to avoid this. -## Permissions +### Permissions You have to add the following permissions in your `AndroidManifest.xml`: @@ -128,24 +104,24 @@ You have to add the following permissions in your `AndroidManifest.xml`: Your application also has to dynamically request the `android.permission.READ_EXTERNAL_STORAGE` permission to upload videos. -# Documentation +## Documentation -## API Endpoints +### API Endpoints All URIs are relative to *https://ws.api.video* -### VideosApi +#### VideosApi -#### Retrieve an instance of VideosApi: +##### Retrieve an instance of VideosApi: ```kotlin val videosApi = VideosApi("YOUR_API_KEY", Environment.PRODUCTION) ``` -#### Endpoints +##### Endpoints Method | HTTP request | Description ------------- | ------------- | ------------- @@ -154,7 +130,7 @@ Method | HTTP request | Description -## Documentation for Models +### Documentation for Models - [AccessToken](https://github.com/apivideo/api.video-android-uploader/blob/main/docs/AccessToken.md) - [AdditionalBadRequestErrors](https://github.com/apivideo/api.video-android-uploader/blob/main/docs/AdditionalBadRequestErrors.md) @@ -172,7 +148,7 @@ Method | HTTP request | Description ## Documentation for Authorization -### API key +#### API key Most endpoints required to be authenticated using the API key mechanism described in our [documentation](https://docs.api.video/reference#authentication). The access token generation mechanism is automatically handled by the client. All you have to do is provide an API key when instantiating the `ApiClient`: @@ -180,24 +156,24 @@ The access token generation mechanism is automatically handled by the client. Al val videosApi = VideosApi("YOUR_API_KEY", Environment.PRODUCTION) ``` -### Public endpoints +#### Public endpoints Some endpoints don't require authentication. These one can be called with a client instantiated without API key: ```kotlin val videosApi = VideosApi() ``` -## Recommendation +### Recommendation It's recommended to create an instance of `ApiClient` per thread in a multithreaded environment to avoid any potential issues. For direct call with `ApiClient`: Do not call API from the main thread, otherwise you will get a `android.os.NetworkOnMainThreadException`. Dispatch API calls with Thread, Executors or Kotlin coroutine to avoid this. Alternatively, APIs come with an asynchronous counterpart (`createAsync` for `create`) except for the upload endpoint. -## Have you gotten use from this API client? +### Have you gotten use from this API client? Please take a moment to leave a star on the client ⭐ This helps other users to find the clients and also helps us understand which clients are most popular. Thank you! -# Contribution +## Contribution Since this API client is generated from an OpenAPI description, we cannot accept pull requests made directly to the repository. If you want to contribute, you can open a pull request on the repository of our [client generator](https://github.com/apivideo/api-client-generator). Otherwise, you can also simply open an issue detailing your need on this repository. \ No newline at end of file diff --git a/templates/documentation/sdks/vod/apivideo-android-upstream.md b/templates/documentation/sdks/vod/apivideo-android-upstream.md index ed10cf87..41a8121a 100644 --- a/templates/documentation/sdks/vod/apivideo-android-upstream.md +++ b/templates/documentation/sdks/vod/apivideo-android-upstream.md @@ -6,37 +6,22 @@ metadata: description: "The official api.video Android Upstream package for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video Android Upstream: camera + progressive upload -============== +# api.video Android Upstream: camera + progressive upload [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. -# Table of contents - -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [Gradle](#gradle) - - [Permissions](#permissions) - - [Code sample](#code-sample) -- [Documentation](#documentation) -- [Sample application](#sample-application) -- [Dependencies](#dependencies) -- [FAQ](#faq) - -# Project description +## Project description This library is an easy way to capture your video and microphone and upload it to [api.video](https://api.video/) at the same time. -# Getting started +## Getting started -## Installation +### Installation -### Gradle +#### Gradle On build.gradle add the following code in dependencies: @@ -46,7 +31,7 @@ dependencies { } ``` -## Permissions +### Permissions ```xml @@ -60,7 +45,7 @@ dependencies { Your application must dynamically require `android.permission.CAMERA` and `android.permission.RECORD_AUDIO`. -## Code sample +### Code sample 1. Add [permissions](#permissions) to your `AndroidManifest.xml` and request them in your Activity/Fragment. @@ -130,22 +115,22 @@ upstream.startStreamingForToken("YOUR_UPLOAD_TOKEN") For detailed information on this upstream library API, refers to [API documentation](https://apivideo.github.io/api.video-android-upstream/). -# Tips +## Tips * If a part of the video is not uploaded, you can resume the upload by creating a new `MultiFileUploader` with `ApiVideoUpstream.loadExistingSession`. * You can check device supported configurations by using the helper: `Helper` -# Documentation +## Documentation * [API documentation](https://apivideo.github.io/api.video-android-upstream/) * [api.video documentation](https://docs.api.video/) -# Sample application +## Sample application A demo application demonstrates how to use this upstream library. See `/example` folder. -# Dependencies +## Dependencies We are using external library @@ -153,7 +138,7 @@ We are using external library |---------------------------------------------------------|------------------------------------------------------------------------------| | [StreamPack](https://github.com/ThibaultBee/StreamPack) | [README.md](https://github.com/ThibaultBee/StreamPack/blob/master/README.md) | -# FAQ +## FAQ If you have any questions, ask us in the [community](https://community.api.video) or use [issues](https://github.com/apivideo/api.video-android-upstream/issues). \ No newline at end of file diff --git a/templates/documentation/sdks/vod/apivideo-flutter-uploader.md b/templates/documentation/sdks/vod/apivideo-flutter-uploader.md index 18bf1789..7a7b19f2 100644 --- a/templates/documentation/sdks/vod/apivideo-flutter-uploader.md +++ b/templates/documentation/sdks/vod/apivideo-flutter-uploader.md @@ -6,24 +6,11 @@ metadata: description: "The official api.video Flutter video uploader for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video Flutter video uploader -============== +# api.video Flutter video uploader [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. -# Table of contents - -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [For web usage](#for-web-usage) - - [Code sample](#code-sample) -- [Dependencies](#dependencies) -- [FAQ](#faq) -- [Found this video uploader useful?](#found-this-video-uploader-useful) - -# Project description +## Project description api.video's Flutter uploader uploads videos to api.video using delegated upload token or API Key. @@ -32,7 +19,7 @@ It allows you to upload videos in two ways: - standard upload: to send a whole video file in one go - progressive upload: to send a video file by chunks, without needing to know the final size of the video file -# Getting started +## Getting started ### Installation @@ -74,7 +61,7 @@ import 'package:video_uploader/video_uploader.dart'; var video = await ApiVideoUploader.uploadWithUploadToken("MY_VIDEO_TOKEN", "path/to/my-video.mp4"); ``` -# Dependencies +## Dependencies This project is using external library @@ -83,11 +70,11 @@ This project is using external library | iOS-video-uploader | [iOS-video-uploader](https://github.com/apivideo/api.video-ios-uploader) | | android-video-uploader | [android-video-uploader](https://github.com/apivideo/api.video-android-uploader) | -# FAQ +## FAQ If you have any questions, ask us here: [https://community.api.video](https://community.api.video). Or use [Issues](https://github.com/apivideo/api.video-flutter-uploader/issues). -# Found this video uploader useful? +## Found this video uploader useful? Please star ⭐ the repo to help others find it. \ No newline at end of file diff --git a/templates/documentation/sdks/vod/apivideo-ios-uploader.md b/templates/documentation/sdks/vod/apivideo-ios-uploader.md index 65a66698..77cff8fc 100644 --- a/templates/documentation/sdks/vod/apivideo-ios-uploader.md +++ b/templates/documentation/sdks/vod/apivideo-ios-uploader.md @@ -6,30 +6,11 @@ metadata: description: "The official api.video iOS video uploader for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video iOS video uploader -============== +# api.video iOS video uploader [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. -# Table of contents - -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [Carthage](#carthage) - - [CocoaPods](#cocoaPods) - - [Code sample](#code-sample) -- [Documentation](#documentation) - - [API Endpoints](#api-endpoints) - - [VideosAPI](#VideosAPI) - - [Models](#models) - - [Authorization](#documentation-for-authorization) - - [API key](#api-key) - - [Public endpoints](#public-endpoints) -- [Have you gotten use from this API client?](#have-you-gotten-use-from-this-api-client) -- [Contribution](#contribution) - -# Project description +## Project description api.video's iOS uploads videos to api.video using delegated upload token or API Key. @@ -37,11 +18,11 @@ It allows you to upload videos in two ways: - standard upload: to send a whole video file in one go - progressive upload: to send a video file by chunks, without needing to know the final size of the video file -# Getting started +## Getting started -## Installation +### Installation -### Carthage +#### Carthage Specify it in your `Cartfile`: @@ -51,13 +32,13 @@ github "apivideo/api.video-ios-uploader" ~> 1.2.1 Run `carthage update` -### CocoaPods +#### CocoaPods Add `pod 'ApiVideoUploader', '1.2.1'` in your `Podfile` Run `pod install` -## Code sample +### Code sample Please follow the [installation](#installation) instruction and execute the following Swift code: ```swift @@ -80,9 +61,9 @@ import ApiVideoUploader ``` -# Documentation +## Documentation -## API Endpoints +### API Endpoints All URIs are relative to *https://ws.api.video* @@ -104,7 +85,7 @@ Method | HTTP request | Description -## Models +### Models - [AccessToken](https://github.com/apivideo/api.video-ios-uploader/blob/main/docs/AccessToken.md) - [AdditionalBadRequestErrors](https://github.com/apivideo/api.video-ios-uploader/blob/main/docs/AdditionalBadRequestErrors.md) @@ -140,6 +121,6 @@ Please take a moment to leave a star on the client ⭐ This helps other users to find the clients and also helps us understand which clients are most popular. Thank you! -# Contribution +## Contribution Since this API client is generated from an OpenAPI description, we cannot accept pull requests made directly to the repository. If you want to contribute, you can open a pull request on the repository of our [client generator](https://github.com/apivideo/api-client-generator). Otherwise, you can also simply open an issue detailing your need on this repository. \ No newline at end of file diff --git a/templates/documentation/sdks/vod/apivideo-react-native-uploader.md b/templates/documentation/sdks/vod/apivideo-react-native-uploader.md index 2b2bf713..00939f05 100644 --- a/templates/documentation/sdks/vod/apivideo-react-native-uploader.md +++ b/templates/documentation/sdks/vod/apivideo-react-native-uploader.md @@ -6,29 +6,17 @@ metadata: description: "The official api.video React Native video uploader for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video React Native video uploader -============== +# api.video React Native video uploader [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. -# Table of contents - -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [Code sample](#code-sample) -- [Example](#example) -- [Plugins](#plugins) -- [FAQ](#faq) - -# Project description +## Project description This module is an easy way to upload video with delegated token to api.video -# Getting started +## Getting started -## Installation +### Installation ```sh npm install @api.video/react-native-video-uploader @@ -50,7 +38,7 @@ cd ios && pod install 2. This project contains Swift code, and if it's your first dependency with Swift code, you need to create an empty Swift file in your project (with the bridging header) from XCode. [Find how to do that](https://github.com/apivideo/api.video-reactnative-uploader/blob/main/docss/install_swift_dependency.md) -## Code sample +### Code sample ```js import ApiVideoUploader from '@api.video/react-native-video-uploader'; @@ -64,11 +52,11 @@ ApiVideoUploader.uploadWithUploadToken('MY_VIDEO_TOKEN', 'my-video.mp4') }); ``` -# Example +## Example An example that demonstrates how to use the API is provided in folder [example/](https://github.com/apivideo/api.video-reactnative-uploader/tree/master/example). -# Plugins +## Plugins api.video-reactnative-uploader is using external native library for upload @@ -77,7 +65,7 @@ api.video-reactnative-uploader is using external native library for upload | iOS-video-uploader | [iOS-video-uploader] | | android-video-uploader | [android-video-uploader] | -# FAQ +## FAQ If you have any questions, ask [our community](https://community.api.video). Or use [Issues]. diff --git a/templates/documentation/sdks/vod/apivideo-typescript-media-recorder.md b/templates/documentation/sdks/vod/apivideo-typescript-media-recorder.md index a1b277ff..735c685e 100644 --- a/templates/documentation/sdks/vod/apivideo-typescript-media-recorder.md +++ b/templates/documentation/sdks/vod/apivideo-typescript-media-recorder.md @@ -6,46 +6,20 @@ metadata: description: "The official api.video TypeScript Media Recorder for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video TypeScript Media Recorder -============== +# api.video TypeScript Media Recorder [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. - -# Table of contents -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [Installation method #1: requirejs](#installation-method-1-requirejs) - - [Installation method #2: typescript](#installation-method-2-typescript) - - [Simple include in a javascript project](#simple-include-in-a-javascript-project) -- [Documentation](#documentation) - - [Instanciation](#instanciation) - - [Options](#options) - - [Using a delegated upload token (recommended):](#using-a-delegated-upload-token-recommended) - - [Using an access token (discouraged):](#using-an-access-token-discouraged) - - [Common options](#common-options) - - [Example](#example) - - [Methods](#methods) - - [`start(options?: { timeslice?: number })`](#startoptions--timeslice-number-) - - [Options](#options-1) - - [`stop(): Promise`](#stop-promisevideouploadresponse) - - [`addEventListener(event: string, listener: Function)`](#addeventlistenerevent-string-listener-function) - - [`getMediaRecorderState(): RecordingState`](#getmediarecorderstate-recordingstate) -- [Full example](#full-example) - -# Project description - +## Project description Typescript library to easily upload data from a [MediaStream](https://developer.mozilla.org/fr/docs/Web/API/MediaStream) to api.video. It can be used to upload a video to api.video from the user's webcam with ease, as well as from a screen recording. -# Getting started +## Getting started -## Installation +### Installation -### Installation method #1: requirejs +#### Installation method #1: requirejs If you use requirejs you can add the library as a dependency to your project with @@ -64,7 +38,7 @@ var recorder = new ApiVideoMediaRecorder(mediaStream, { }); ``` -### Installation method #2: typescript +#### Installation method #2: typescript If you use Typescript you can add the library as a dependency to your project with @@ -84,7 +58,7 @@ const recorder = new ApiVideoMediaRecorder(mediaStream, {file: files[0], ``` -### Simple include in a javascript project +#### Simple include in a javascript project Include the library in your HTML file like so: @@ -108,13 +82,13 @@ Then, once the `window.onload` event has been trigered, create your player using ``` -# Documentation +## Documentation -## Instanciation +### Instantiation -### Options +#### Options -The media recorder object is instanciated using a [MediaStream](https://developer.mozilla.org/fr/docs/Web/API/MediaStream) and an `options` object. Options to provide depend on the way you want to authenticate to the API: either using a delegated upload token (recommanded), or using a usual access token. +The media recorder object is instantiated using a [MediaStream](https://developer.mozilla.org/fr/docs/Web/API/MediaStream) and an `options` object. Options to provide depend on the way you want to authenticate to the API: either using a delegated upload token (recommanded), or using a usual access token. #### Using a delegated upload token (recommended): @@ -173,7 +147,7 @@ The start() method starts the upload of the content retrieved from the MediaStre **Example** ```javascript - // ... mediaRecorder instanciation + // ... mediaRecorder instantiation mediaRecorder.start(); // or, with a 2 seconds timeslice: @@ -194,7 +168,7 @@ Define an event listener for the media recorder. The following events are availa **Example** ```javascript - // ... mediaRecorder instanciation + // ... mediaRecorder instantiation mediaRecorder.addEventListener("error", (event) => { console.log(event.data); @@ -208,13 +182,13 @@ Return the state of the underlaying [MediaRecorder](https://developer.mozilla.or **Example** ```javascript - // ... mediaRecorder instanciation + // ... mediaRecorder instantiation mediaRecorder.stop() .then(video => console.log(video)); ``` -# Full example +## Full example ```html diff --git a/templates/documentation/sdks/vod/apivideo-typescript-media-stream-composer.md b/templates/documentation/sdks/vod/apivideo-typescript-media-stream-composer.md index e484ec46..eb078ad4 100644 --- a/templates/documentation/sdks/vod/apivideo-typescript-media-stream-composer.md +++ b/templates/documentation/sdks/vod/apivideo-typescript-media-stream-composer.md @@ -6,53 +6,11 @@ metadata: description: "The official api.video TypeScript Media Composer for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video TypeScript Media Composer -============== +# api.video TypeScript Media Composer [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. - -# Table of contents -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [Installation method #1: requirejs](#installation-method-1-requirejs) - - [Installation method #2: ES6 modules](#installation-method-2-es6-modules) - - [Simple include in a javascript project](#simple-include-in-a-javascript-project) -- [Documentation](#documentation) - - [Instantiation](#instantiation) - - [Options](#options) - - [Methods](#methods) - - [`addStream(mediaStream: MediaStream | HTMLImageElement, options: StreamOptions): string`](#addstreammediastream-mediastream--htmlimageelement-options-streamoptions-string) - - [Options](#options-1) - - [`updateStream(streamId: string, options: StreamOptions): void`](#updatestreamstreamid-string-options-streamoptions-void) - - [`removeStream(id: string): void`](#removestreamid-string-void) - - [`getStreams(): StreamDetails[]`](#getstreams-streamdetails) - - [`getStream(id: string): StreamDetails`](#getstreamid-string-streamdetails) - - [`addAudioSource(mediaStream: MediaStream): string`](#addaudiosourcemediastream-mediastream-string) - - [`removeAudioSource(id: string): void`](#removeaudiosourceid-string-void) - - [`getAudioSources(): AudioSourceDetails[]`](#getaudiosources-audiosourcedetails) - - [`getAudioSource(audioSourceId: string): AudioSourceDetails`](#getaudiosourceaudiosourceid-string-audiosourcedetails) - - [`moveUp(streamId: string): void`](#moveupstreamid-string-void) - - [`moveDown(streamId: string): void`](#movedownstreamid-string-void) - - [`startRecording(options: RecordingOptions): void`](#startrecordingoptions-recordingoptions-void) - - [Options](#options-2) - - [Using a delegated upload token (recommended):](#using-a-delegated-upload-token-recommended) - - [Using an access token (discouraged):](#using-an-access-token-discouraged) - - [Common options](#common-options) - - [`stopRecording(): Promise`](#stoprecording-promisevideouploadresponse) - - [`getCanvas(): HTMLCanvasElement | undefined`](#getcanvas-htmlcanvaselement--undefined) - - [`appendCanvasTo(containerQuerySelector: string): void`](#appendcanvastocontainerqueryselector-string-void) - - [`setMouseTool(tool: "draw" | "move-resize"): void`](#setmousetooltool-draw--move-resize-void) - - [`setDrawingSettings(settings: Partial): void`](#setdrawingsettingssettings-partialdrawingsettings-void) - - [`clearDrawing(): void`](#cleardrawing-void) - - [`addEventListener(event: string, listener: Function)`](#addeventlistenerevent-string-listener-function) - - [`destroy()`](#destroy) -- [Full examples](#full-examples) - - ["Loom-like"](#loom-like) - -# Project description +## Project description This library lets you easily record & upload videos to api.video from a composition of several media streams. The position and size of each stream can be set in a flexible and easy way. @@ -62,11 +20,11 @@ This allows for example, with only a few lines of code, to create a video compos The code of a small Next.js application demonstrating the different features offered by the library is available in the [examples/record.a.video](https://github.com/apivideo/api.video-typescript-media-stream-composer/tree/main/examples/record.a.video) folder. If you want to try it live, go here: [https://record.a.video](https://record.a.video/). -# Getting started +## Getting started -## Installation +### Installation -### Installation method #1: requirejs +#### Installation method #1: requirejs If you use requirejs you can add the library as a dependency to your project with @@ -87,7 +45,7 @@ var composer = new MediaStreamComposer({ }); ``` -### Installation method #2: ES6 modules +#### Installation method #2: ES6 modules You can add the library as a dependency to your project with @@ -109,7 +67,7 @@ const composer = new MediaStreamComposer({ ``` -### Simple include in a javascript project +#### Simple include in a javascript project Include the library in your HTML file like so: @@ -133,20 +91,20 @@ Then you can instantiate the composer using `new MediaStreamComposer()`: ``` -# Documentation +## Documentation -## Instantiation +### Instantiation -### Options +#### Options The media stream composer is instantiated using an `options` object. At the moment, it contains only one option: `resolution`. If provided, this option must contain a `width` and a `height` property. This resolution will be used to create the canvas element that will be used to draw the streams. It will also be used to set the resolution of the video when it is uploaded. If the `resolution` option is not provided, the canvas will be created with this resolution: 1280x720. -## Methods +### Methods -### `addStream(mediaStream: MediaStream | HTMLImageElement, options: StreamOptions): string` +#### `addStream(mediaStream: MediaStream | HTMLImageElement, options: StreamOptions): string` The addStream() method adds a stream to the composition. A stream can be either a `MediaStream` (for example, the webcam, the screen, or a window capture) or an `HTMLImageElement` (for example, a logo). @@ -156,7 +114,7 @@ It takes a `MediaStream | HTMLImageElement` and an `StreamOptions` parameter. When you load an image onto the composition, the origin of the image must be the same as the origin of the webpage in order for the image to be displayed correctly. This means that the image must be served from the same domain, or the server hosting the image must include the appropriate CORS (Cross-Origin Resource Sharing) headers to allow the image to be displayed on the canvas from a different origin. More details here: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image . -#### Options +##### Options | Option name | Type | Default value | Description | | ----------: | ------------------------------------------------------------ | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -216,7 +174,7 @@ const streamId = composer.addStream(image, { }); ``` -### `updateStream(streamId: string, options: StreamOptions): void` +#### `updateStream(streamId: string, options: StreamOptions): void` Update the options of an existing stream. It takes the id of the stream (the one returned by the addStream() method) and an `StreamOptions` parameter (same as for the addStream() method). @@ -228,7 +186,7 @@ composer.updateStream(streamId, { }); ``` -### `removeStream(id: string): void` +#### `removeStream(id: string): void` Remove a stream from the composition. The id is the same as the one returned by the addStream() method. @@ -238,7 +196,7 @@ Remove a stream from the composition. The id is the same as the one returned by composer.removeStream(streamId); ``` -### `getStreams(): StreamDetails[]` +#### `getStreams(): StreamDetails[]` Returns an array of objects containing the details of all the streams in the composition. @@ -281,7 +239,7 @@ const streams = composer.getStreams(); ``` -### `getStream(id: string): StreamDetails` +#### `getStream(id: string): StreamDetails` Get the details of a stream. It takes the id of the stream. The id is the same as the one returned by the addStream() method. @@ -297,7 +255,7 @@ const stream = composer.getStream(streamId); -### `addAudioSource(mediaStream: MediaStream): string` +#### `addAudioSource(mediaStream: MediaStream): string` The addAudioSource() method adds a stream as an audio source to the composition. It takes a `MediaStream` parameter. The display won't be impacted by the stream. Only the audio will be mixed. | @@ -312,7 +270,7 @@ navigator.mediaDevices.getDisplayMedia({ audio: { deviceId: selectedAudioSource ``` -### `removeAudioSource(id: string): void` +#### `removeAudioSource(id: string): void` Remove an audio source from the composition. The id is the same as the one returned by the addAudioSource() method. @@ -322,7 +280,7 @@ Remove an audio source from the composition. The id is the same as the one retur composer.removeAudioSource(audioSourceId); ``` -### `getAudioSources(): AudioSourceDetails[]` +#### `getAudioSources(): AudioSourceDetails[]` Returns an array of objects containing the details of all the streams in the composition. @@ -339,7 +297,7 @@ const audioSources = composer.getAudioSources(); ``` -### `getAudioSource(audioSourceId: string): AudioSourceDetails` +#### `getAudioSource(audioSourceId: string): AudioSourceDetails` Get the details of an audio source. It takes the id of the audio source. The id is the same as the one returned by the addAudioSource() method. @@ -351,7 +309,7 @@ const stream = composer.getAudioSource(audioSourceId); -### `moveUp(streamId: string): void` +#### `moveUp(streamId: string): void` Move a stream up in the composition (ie. move it above the stream that was above it). The id is the same as the one returned by the addStream() method. @@ -361,7 +319,7 @@ Move a stream up in the composition (ie. move it above the stream that was above composer.moveUp(streamId); ``` -### `moveDown(streamId: string): void` +#### `moveDown(streamId: string): void` Move a stream down in the composition (ie. move it below the stream that was below it). The id is the same as the one returned by the addStream() method. @@ -371,15 +329,15 @@ Move a stream down in the composition (ie. move it below the stream that was bel composer.moveDown(streamId); ``` -### `startRecording(options: RecordingOptions): void` +#### `startRecording(options: RecordingOptions): void` Start recording the composition & upload it to your api.video account. It takes an `RecordingOptions` parameter. -#### Options +##### Options Options to provide depend on the way you want to authenticate to the api.video API: either using a delegated upload token (recommanded), or using a usual access token. -##### Using a delegated upload token (recommended): +###### Using a delegated upload token (recommended): Using delegated upload tokens for authentication is best options when uploading from the client side. To know more about delegated upload token, read the dedicated article on api.video's blog: [Delegated Uploads](https://api.video/blog/tutorials/delegated-uploads/). @@ -390,7 +348,7 @@ Using delegated upload tokens for authentication is best options when uploading | videoId | no | string | id of an existing video | | _common options (see bellow)_ | | | | -##### Using an access token (discouraged): +###### Using an access token (discouraged): **Warning**: be aware that exposing your access token client-side can lead to huge security issues. Use this method only if you know what you're doing :). @@ -402,7 +360,7 @@ Using delegated upload tokens for authentication is best options when uploading | _common options (see bellow)_ | | | | -##### Common options +###### Common options | Option name | Mandatory | Type | Description | | ----------: | --------- | ------ | ------------------------------------------------------------------- | @@ -420,7 +378,7 @@ composer.startRecording({ }); ``` -### `stopRecording(): Promise` +#### `stopRecording(): Promise` The stopRecording() method stops the recording of the composition. It takes no parameter. It returns a Promise that resolves with the newly created video. @@ -430,7 +388,7 @@ The stopRecording() method stops the recording of the composition. It takes no p composer.stopRecording().then(e => console.log(`player url: ${e.assets.player}`)); ``` -### `getCanvas(): HTMLCanvasElement | undefined` +#### `getCanvas(): HTMLCanvasElement | undefined` Returns the canvas used to draw the composition. It takes no parameter. @@ -440,7 +398,7 @@ Returns the canvas used to draw the composition. It takes no parameter. const canvas = composer.getCanvas(); ``` -### `appendCanvasTo(containerQuerySelector: string): void` +#### `appendCanvasTo(containerQuerySelector: string): void` Append the canvas used to draw the composition to an HTML container. It takes a string containing the query selector of the container. @@ -460,7 +418,7 @@ Additionally, it's mandatory is you want to use mouse-based features like draggi ``` -### `setMouseTool(tool: "draw" | "move-resize"): void` +#### `setMouseTool(tool: "draw" | "move-resize"): void` Define the kind of action that will be performed when the user interact with the canvas using the mouse. It takes a string containing the name of the tool. @@ -475,7 +433,7 @@ composer.setMouseTool("draw"); ``` -### `setDrawingSettings(settings: Partial): void` +#### `setDrawingSettings(settings: Partial): void` Set the drawing settings for the `draw` tool. It takes a `DrawingSettings` parameter that contains the following attributes: - `color`: the color of the drawing @@ -492,7 +450,7 @@ composer.setDrawingSettings({ }); ``` -### `clearDrawing(): void` +#### `clearDrawing(): void` Clear all the drawings on the canvas. It takes no parameter. @@ -502,7 +460,7 @@ Clear all the drawings on the canvas. It takes no parameter. composer.clearDrawing(); ``` -### `addEventListener(event: string, listener: Function)` +#### `addEventListener(event: string, listener: Function)` Define an event listener for the media recorder. The following events are available: - `"error"`: when an error occurs @@ -516,13 +474,13 @@ Define an event listener for the media recorder. The following events are availa }); ``` -### `destroy()` +#### `destroy()` Destroys all streams and releases all resources in use. -# Full examples +## Full examples -## "Loom-like" +### "Loom-like" This samples shows how to use the composer to create a screencast with a webcam stream in the corner. diff --git a/templates/documentation/sdks/vod/apivideo-typescript-uploader.md b/templates/documentation/sdks/vod/apivideo-typescript-uploader.md index 11f1ea41..8d57ffa1 100644 --- a/templates/documentation/sdks/vod/apivideo-typescript-uploader.md +++ b/templates/documentation/sdks/vod/apivideo-typescript-uploader.md @@ -6,46 +6,11 @@ metadata: description: "The official api.video TypeScript video uploader for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app." --- -api.video TypeScript video uploader -============== +# api.video TypeScript video uploader [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app. -# Table of contents - -- [Table of contents](#table-of-contents) -- [Project description](#project-description) -- [Getting started](#getting-started) - - [Installation](#installation) - - [Installation method #1: requirejs](#installation-method-1-requirejs) - - [Installation method #2: typescript](#installation-method-2-typescript) - - [Simple include in a javascript project](#simple-include-in-a-javascript-project) -- [Documentation - Standard upload](#documentation---standard-upload) - - [Instanciation](#instanciation) - - [Options](#options) - - [Using a delegated upload token (recommended):](#using-a-delegated-upload-token-recommended) - - [Using an access token (discouraged):](#using-an-access-token-discouraged) - - [Using an API key (**strongly** discouraged):](#using-an-api-key-strongly-discouraged) - - [Common options](#common-options) - - [Example](#example) - - [Methods](#methods) - - [`upload()`](#upload) - - [`onProgress()`](#onprogress) - - [`onPlayable()`](#onplayable) -- [Documentation - Progressive upload](#documentation---progressive-upload) - - [Instanciation](#instanciation-1) - - [Options](#options-1) - - [Using a delegated upload token (recommended):](#using-a-delegated-upload-token-recommended-1) - - [Using an access token (discouraged):](#using-an-access-token-discouraged-1) - - [Common options](#common-options-1) - - [Example](#example-1) - - [Methods](#methods-1) - - [`uploadPart(file: Blob)`](#uploadpartfile-blob) - - [`uploadLastPart(file: Blob)`](#uploadlastpartfile-blob) - - [`onProgress()`](#onprogress-1) - - [`onPlayable()`](#onplayable-1) - -# Project description +## Project description Typescript library to upload videos to api.video using delegated upload token (or usual access token) from the front-end. @@ -53,11 +18,11 @@ It allows you to upload videos in two ways: - standard upload: to send a whole video file in one go - progressive upload: to send a video file by chunks, without needing to know the final size of the video file -# Getting started +## Getting started -## Installation +### Installation -### Installation method #1: requirejs +#### Installation method #1: requirejs If you use requirejs you can add the library as a dependency to your project with @@ -83,7 +48,7 @@ var uploader = new ProgressiveUploader({ }); ``` -### Installation method #2: typescript +#### Installation method #2: typescript If you use Typescript you can add the library as a dependency to your project with @@ -110,7 +75,7 @@ const uploader = new ProgressiveUploader({ ``` -### Simple include in a javascript project +#### Simple include in a javascript project Include the library in your HTML file like so: @@ -137,15 +102,15 @@ Then, once the `window.onload` event has been trigered, create your player using ``` -# Documentation - Standard upload +## Documentation - Standard upload -## Instanciation +### Instantiation -### Options +#### Options -The upload library is instanciated using an `options` object. Options to provide depend on the way you want to authenticate to the API: either using a delegated upload token (recommanded), or using a usual access token. +The upload library is instantiated using an `options` object. Options to provide depend on the way you want to authenticate to the API: either using a delegated upload token (recommanded), or using a usual access token. -#### Using a delegated upload token (recommended): +##### Using a delegated upload token (recommended): Using delegated upload tokens for authentication is best options when uploading from the client side. To know more about delegated upload token, read the dedicated article on api.video's blog: [Delegated Uploads](https://api.video/blog/tutorials/delegated-uploads/). @@ -156,7 +121,7 @@ Using delegated upload tokens for authentication is best options when uploading | videoId | no | string | id of an existing video | | _common options (see bellow)_ | | | | -#### Using an access token (discouraged): +##### Using an access token (discouraged): **Warning**: be aware that exposing your access token client-side can lead to huge security issues. Use this method only if you know what you're doing :). @@ -169,7 +134,7 @@ Using delegated upload tokens for authentication is best options when uploading | _common options (see bellow)_ | | | | -#### Using an API key (**strongly** discouraged): +##### Using an API key (**strongly** discouraged): **Warning**: be aware that exposing your API key client-side can lead to huge security issues. Use this method only if you know what you're doing :). @@ -181,7 +146,7 @@ Using delegated upload tokens for authentication is best options when uploading | _common options (see bellow)_ | | | | -#### Common options +##### Common options | Option name | Mandatory | Type | Description | @@ -195,7 +160,7 @@ Using delegated upload tokens for authentication is best options when uploading | maxVideoDuration | no | number | maximum duration allowed for the file (in seconds) | -### Example +#### Example ```javascript const uploader = new VideoUploader({ @@ -206,9 +171,9 @@ Using delegated upload tokens for authentication is best options when uploading }); ``` -## Methods +### Methods -### `upload()` +#### `upload()` The upload() method starts the upload. It takes no parameter. It returns a Promise that resolves once the file is uploaded. If an API call fails more than the specified number of retries, then the promise is rejected. On success, the promise embeds the `video` object returned by the API. @@ -217,14 +182,14 @@ On fail, the promise embeds the status code & error message returned by the API. **Example** ```javascript - // ... uploader instanciation + // ... uploader instantiation uploader.upload() .then((video) => console.log(video)) .catch((error) => console.log(error.status, error.message)); ``` -### `onProgress()` +#### `onProgress()` The onProgress() method let you defined an upload progress listener. It takes a callback function with one parameter: the onProgress events. An onProgress event contains the following attributes: @@ -238,7 +203,7 @@ An onProgress event contains the following attributes: **Example** ```javascript - // ... uploader instanciation + // ... uploader instantiation uploader.onProgress((event) => { console.log(`total number of bytes uploaded for this upload: ${event.uploadedBytes}.`); @@ -251,7 +216,7 @@ An onProgress event contains the following attributes: ``` -### `onPlayable()` +#### `onPlayable()` The onPlayable() method let you defined a listener that will be called when the video is playable. It takes a callback function with one parameter: the `video` object returned by the API. @@ -261,7 +226,7 @@ The onPlayable() method let you defined a listener that will be called when the
``` -# Documentation - Progressive upload +## Documentation - Progressive upload -## Instanciation +### Instantiation -### Options +#### Options -The progressive upload object is instanciated using an `options` object. Options to provide depend on the way you want to authenticate to the API: either using a delegated upload token (recommanded), or using a usual access token. +The progressive upload object is instantiated using an `options` object. Options to provide depend on the way you want to authenticate to the API: either using a delegated upload token (recommanded), or using a usual access token. -#### Using a delegated upload token (recommended): +##### Using a delegated upload token (recommended): Using delegated upload tokens for authentication is best options when uploading from the client side. To know more about delegated upload token, read the dedicated article on api.video's blog: [Delegated Uploads](https://api.video/blog/tutorials/delegated-uploads/). @@ -290,7 +255,7 @@ Using delegated upload tokens for authentication is best options when uploading | videoId | no | string | id of an existing video | | _common options (see bellow)_ | | | | -#### Using an access token (discouraged): +##### Using an access token (discouraged): **Warning**: be aware that exposing your access token client-side can lead to huge security issues. Use this method only if you know what you're doing :). @@ -302,7 +267,7 @@ Using delegated upload tokens for authentication is best options when uploading | _common options (see bellow)_ | | | | -#### Common options +##### Common options | Option name | Mandatory | Type | Description | @@ -314,7 +279,7 @@ Using delegated upload tokens for authentication is best options when uploading | mergeSmallPartsBeforeUpload | no | boolean | if false, parts smaller than 5MB will not be merged before upload, resulting in an error (default: true) | -### Example +#### Example ```javascript const uploader = new ProgressiveUploader({ @@ -323,9 +288,9 @@ Using delegated upload tokens for authentication is best options when uploading }); ``` -## Methods +### Methods -### `uploadPart(file: Blob)` +#### `uploadPart(file: Blob)` The upload() method starts the upload. It takes no parameter. It returns a Promise that resolves once the file is uploaded. If an API call fails more than the specified number of retries, then the promise is rejected. On success, the promise embeds the `video` object returned by the API. @@ -334,13 +299,13 @@ On fail, the promise embeds the status code & error message returned by the API. **Example** ```javascript - // ... uploader instanciation + // ... uploader instantiation uploader.uploadPart(blob) .catch((error) => console.log(error.status, error.message)); ``` -### `uploadLastPart(file: Blob)` +#### `uploadLastPart(file: Blob)` The upload() method starts the upload. It takes no parameter. It returns a Promise that resolves once the file is uploaded. If an API call fails more than the specified number of retries, then the promise is rejected. On success, the promise embeds the `video` object returned by the API. @@ -349,14 +314,14 @@ On fail, the promise embeds the status code & error message returned by the API. **Example** ```javascript - // ... uploader instanciation + // ... uploader instantiation uploader.uploadLastPart(blob) .then((video) => console.log(video)) .catch((error) => console.log(error.status, error.message)); ``` -### `onProgress()` +#### `onProgress()` The onProgress() method let you defined an upload progress listener. It takes a callback function with one parameter: the onProgress events. An onProgress event contains the following attributes: @@ -366,7 +331,7 @@ An onProgress event contains the following attributes: **Example** ```javascript - // ... uploader instanciation + // ... uploader instantiation uploader.onProgress((event) => { console.log(`total number of bytes uploaded for this upload: ${event.uploadedBytes}.`); @@ -374,7 +339,7 @@ An onProgress event contains the following attributes: }); ``` -### `onPlayable()` +#### `onPlayable()` The onPlayable() method let you defined a listener that will be called when the video is playable. It takes a callback function with one parameter: the `video` object returned by the API. @@ -384,7 +349,7 @@ The onPlayable() method let you defined a listener that will be called when the