AVideo

https://github.com/wwbn/avideo
Admin
AVideo is a versatile and advanced video streaming platform that enables users to host, manage, and...
Tokens:950,433
Snippets:12,698
Trust Score:8.6
Update:4 months ago
Show doc for...
Tokens:
Raw
### Run Example Server

Source: https://github.com/wwbn/avideo/blob/master/vendor/google/apiclient/README.md

Start the PHP built-in web server to view examples in your browser. Ensure you are in the directory containing the examples.

```bash
$ php -S localhost:8000 -t examples/
```

--------------------------------

### Example Output: Start Socket Server

Source: https://github.com/wwbn/avideo/wiki/Socket-Plugin

This example shows the typical output when starting the socket server, including debug information, port details, and SSL certificate parameters.

```text
root@youphptube2:~# php /var/www/html/demo.avideo.com/plugin/YPTSocket/server.php     
[2022-01-26 12:17:39] AVideoLog::DEBUG: getStart language: got from config  SCRIPT_NAME: /var/www/html/demo.avideo.com/plugin/YPTSocket/server.php
[2022-01-26 17:17:39] AVideoLog::DEBUG: Starting Socket server at port 2053 SCRIPT_NAME: /var/www/html/demo.avideo.com/plugin/YPTSocket/server.php
Starting AVideo Socket server version 2.8 on port 2053
Your socket server uses a secure connection
Parameter [local_cert]: /etc/letsencrypt/live/demo.avideo.com/fullchain.pem 
Parameter [local_pk]: /etc/letsencrypt/live/demo.avideo.com/privkey.pem 
Parameter [allow_self_signed]: 1 
Parameter [verify_peer]:  
Parameter [verify_peer_name]:  
Parameter [security_level]: 0 
2022-01-26 17:17:39 Construct

```

--------------------------------

### Setup and Run Tests

Source: https://github.com/wwbn/avideo/blob/master/node_modules/promise-polyfill/README.md

Install project dependencies and run the test suite for the promise-polyfill.

```bash
npm install
npm test
```

--------------------------------

### Install Dependencies and Run Dev Server

Source: https://github.com/wwbn/avideo/blob/master/node_modules/hls.js/README.md

Clone the repository, install dependencies, and start the development server for testing and development.

```bash
git clone https://github.com/video-dev/hls.js.git
cd hls.js
# After cloning or pulling from the repository, make sure all dependencies are up-to-date
npm install ci
# Run dev-server for demo page (recompiles on file-watch, but doesn't write to actual dist fs artifacts)
npm run dev
# After making changes run the sanity-check task to verify all checks before committing changes
npm run sanity-check
```

--------------------------------

### Development Installation and Watch Command

Source: https://github.com/wwbn/avideo/blob/master/node_modules/glightbox/README.md

Commands to install project dependencies and start a development server that watches for file changes.

```bash
$ npm install
$ npm run watch
```

--------------------------------

### Async HTTP Server Example

Source: https://github.com/wwbn/avideo/blob/master/vendor/react/event-loop/README.md

A quickstart example demonstrating an asynchronous HTTP server built using the event loop. It handles incoming connections, sends a response, and includes a periodic timer to report memory usage.

```php
<?php

use React\EventLoop\Loop;

require __DIR__ . '/vendor/autoload.php';

$server = stream_socket_server('tcp://127.0.0.1:8080');
stream_set_blocking($server, false);

Loop::addReadStream($server, function ($server) {
    $conn = stream_socket_accept($server);
    $data = "HTTP/1.1 200 OK\r\nContent-Length: 3\r\n\r\nHi\n";
    Loop::addWriteStream($conn, function ($conn) use (&$data) {
        $written = fwrite($conn, $data);
        if ($written === strlen($data)) {
            fclose($conn);
            Loop::removeWriteStream($conn);
        } else {
            $data = substr($data, $written);
        }
    });
});

Loop::addPeriodicTimer(5, function () {
    $memory = memory_get_usage() / 1024;
    $formatted = number_format($memory, 3).'K';
    echo "Current memory usage: {$formatted}\n";
});

```

--------------------------------

### Development Environment Setup

Source: https://github.com/wwbn/avideo/blob/master/node_modules/infinite-scroll/README.md

Manage Node.js and npm versions using nvm, then install project dependencies.

```sh
nvm use
npm install
```

--------------------------------

### Install videojs-ima via npm

Source: https://github.com/wwbn/avideo/blob/master/node_modules/videojs-ima/README.md

Install the videojs-ima plugin using npm. This is the recommended way to get started.

```bash
npm install videojs-ima
```

--------------------------------

### Demo Initialization and Player Setup

Source: https://github.com/wwbn/avideo/blob/master/node_modules/@videojs/http-streaming/index.html

This snippet shows how to start the demo and access the player instance for further manipulation. It's typically used to perform actions after the player has been set up.

```javascript
var unitTestLink = document.getElementById('unit-test-link');
// removal test run link on netlify, as we cannot run tests there.
if ((/netlify.app/).test(window.location.host)) {
  unitTestLink.remove();
}

window.startDemo(function(player) {
  // do something with setup player
});
```

--------------------------------

### Getting Started with videojs-playlist-ui

Source: https://github.com/wwbn/avideo/blob/master/node_modules/videojs-playlist-ui/README.md

Include the plugin's CSS and JavaScript files, set up a video player, and a div for the playlist menu. Initialize the player and the playlist UI plugin.

```html
<link href="videojs-playlist-ui.css" rel="stylesheet">

<!-- Your player will be created here: -->
<video-js data-setup='{}' controls></video-js>

<!-- The playlist menu will be built automatically in here -->
<div class="vjs-playlist"></div>

<!-- Include video.js, the videojs-playlist plugin and this plugin -->
<script src="video.js"></script>
<script src="videojs-playlist.js"></script>
<script src="videojs-playlist-ui.js"></script>

<script>
  // Initialize the player
  const player = videojs(document.querySelector('video-js'));

  // Initialize the plugin and render the playlist
  player.playlistUi();
</script>
```

--------------------------------

### Start WebSocket Server

Source: https://github.com/wwbn/avideo/wiki/Socket-Plugin

Starts the WebSocket server. This command is used after stopping the server or during initial setup.

```bash
sudo php /var/www/html/AVideo/plugin/YPTSocket/server.php
```

--------------------------------

### Installation

Source: https://github.com/wwbn/avideo/blob/master/node_modules/@videojs/xhr/README.md

Install the @videojs/xhr package using npm.

```bash
npm install @videojs/xhr
```

--------------------------------

### Install queue-microtask

Source: https://github.com/wwbn/avideo/blob/master/node_modules/queue-microtask/README.md

Install the package using npm.

```bash
npm install queue-microtask
```

--------------------------------

### Install Video.js via CDN (Fastly)

Source: https://github.com/wwbn/avideo/blob/master/node_modules/video.js/README.md

Include Video.js using the Fastly CDN by adding these tags to your document's head. This is a quick way to get started.

```html
<link href="//vjs.zencdn.net/8.23.7/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/8.23.7/video.min.js"></script>
```

--------------------------------

### Build Intro.js

Source: https://github.com/wwbn/avideo/blob/master/node_modules/intro.js/README.md

Install dependencies and run the build script to minify static resources for Intro.js.

```bash
npm install
npm run build
```

--------------------------------

### Serve Swagger UI Assets with Express

Source: https://github.com/wwbn/avideo/blob/master/plugin/API/docs/usage/installation.md

Use the 'swagger-ui-dist' package with Express to serve Swagger UI assets. This example demonstrates how to get the absolute path to the installed module.

```javascript
const express = require('express')
const pathToSwaggerUi = require('swagger-ui-dist').absolutePath()

const app = express()

app.use(express.static(pathToSwaggerUi))

app.listen(3000)
```

--------------------------------

### Hybridauth Twitter Provider Example

Source: https://github.com/wwbn/avideo/blob/master/vendor/hybridauth/hybridauth/README.md

This snippet demonstrates how to authenticate with Twitter using Hybridauth, retrieve an access token, get the user profile, and make an API request. Ensure PHP 5.4+ and cURL are installed.

```php
$config = [
    'callback' => 'https://example.com/path/to/script.php',
    'keys' => [
        'key' => 'your-twitter-consumer-key',
        'secret' => 'your-twitter-consumer-secret',
    ],
];

try {
    $twitter = new Hybridauth\Provider\Twitter($config);

    $twitter->authenticate();

    $accessToken = $twitter->getAccessToken();
    $userProfile = $twitter->getUserProfile();
    $apiResponse = $twitter->apiRequest('statuses/home_timeline.json');
}
catch (\Exception $e) {
    echo 'Oops, we ran into an issue! ' . $e->getMessage();
}
```

--------------------------------

### Serve Documentation Locally

Source: https://github.com/wwbn/avideo/blob/master/node_modules/bootstrap/README.md

Starts a local server to view the Bootstrap documentation in a browser.

```bash
npm run docs-serve
```

--------------------------------

### Basic three.js Scene Setup and Animation

Source: https://github.com/wwbn/avideo/blob/master/node_modules/three/README.md

This snippet demonstrates how to initialize a three.js scene, camera, and renderer, add a cube, and set up an animation loop. It's useful for getting started with 3D graphics in the browser.

```javascript
import * as THREE from './js/three.module.js';

let camera, scene, renderer;
let geometry, material, mesh;

init();

function init() {

	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
	camera.position.z = 1;

	scene = new THREE.Scene();

	geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
	material = new THREE.MeshNormalMaterial();

	mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setAnimationLoop( animation );
	document.body.appendChild( renderer.domElement );

}

function animation( time ) {

	mesh.rotation.x = time / 2000;
	mesh.rotation.y = time / 1000;

	renderer.render( scene, camera );

}
```

--------------------------------

### GET Request with Options Example

Source: https://github.com/wwbn/avideo/blob/master/node_modules/videojs-vr/node_modules/@videojs/xhr/README.md

Make a GET request with additional options.

```javascript
var req = xhr(url, options, callback)
```

--------------------------------

### Basic GET Request Example

Source: https://github.com/wwbn/avideo/blob/master/node_modules/videojs-vr/node_modules/@videojs/xhr/README.md

Make a simple GET request to a URL.

```javascript
var req = xhr(url, callback)
```

--------------------------------

### Install Intro.js with npm

Source: https://github.com/wwbn/avideo/blob/master/node_modules/intro.js/README.md

Use npm to install Intro.js as a dependency for your project.

```bash
npm install intro.js --save
```

--------------------------------

### Start Intro.js Tour

Source: https://github.com/wwbn/avideo/blob/master/node_modules/intro.js/README.md

Initialize and start the Intro.js tour with a simple JavaScript call.

```javascript
introJs().start();
```

--------------------------------

### Install immediate.js

Source: https://github.com/wwbn/avideo/blob/master/node_modules/immediate/README.md

Install the immediate.js library using npm.

```bash
npm install immediate --save
```

--------------------------------

### Install LevelUp and LevelDown

Source: https://github.com/wwbn/avideo/blob/master/node_modules/levelup/README.md

Install LevelUp and a compatible store like LevelDown to begin using LevelUp.

```sh
$ npm install levelup leveldown
```

--------------------------------

### ltgt.start

Source: https://github.com/wwbn/avideo/blob/master/node_modules/ltgt/README.md

Gets the starting point of the range, considering the direction specified by 'reverse'. If 'start' is not provided in the range, a default value is used.

```APIDOC
## ltgt.start(range, default)

### Description
The start of the range. This takes into account direction (reverse). If a `start` is not provided, `default` is used.

### Parameters
#### Path Parameters
- **range** (object) - Required - The range object.
- **default** (any) - Optional - The default value to use if 'start' is not specified in the range.
```

--------------------------------

### Fallback Get and Set with Cache

Source: https://github.com/wwbn/avideo/blob/master/vendor/react/cache/README.md

Expands on fallback get by caching the value after fetching it from the database if it was not initially in the cache. This example uses chained promises for asynchronous operations.

```php
$cache
    ->get('foo')
    ->then(function ($result) {
        if ($result === null) {
            return $this->getAndCacheFooFromDb();
        }
        
        return $result;
    })
    ->then('var_dump');

public function getAndCacheFooFromDb()
{
    return $this->db
        ->get('foo')
        ->then(array($this, 'cacheFooFromDb'));
}

public function cacheFooFromDb($foo)
{
    $this->cache->set('foo', $foo);

    return $foo;
}
```

--------------------------------

### Example of Chaining getMock() for Mock Setup

Source: https://github.com/wwbn/avideo/blob/master/vendor/mockery/mockery/docs/reference/expectations.md

Demonstrates how to use getMock() to keep mock setup as a single, fluent statement, improving readability for simple mock configurations.

```php
$mock = \Mockery::mock('foo')->shouldReceive('foo')->andReturn(1)->getMock();
```

--------------------------------

### Basic Video.js Player Setup with data-setup

Source: https://github.com/wwbn/avideo/blob/master/node_modules/video.js/README.md

Create a standard HTML5 video element with the 'video-js' class and a 'data-setup' attribute for automatic player initialization. The 'data-setup' attribute must contain valid JSON.

```html
<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>
```

--------------------------------

### SSL Certificate Paths Example

Source: https://github.com/wwbn/avideo/wiki/WebRTC-Server-(Deprecated)

Example paths for SSL certificates required for secure communication. Ensure these paths are correct for your server's Let's Encrypt setup.

```php
'CertPath'=>'/etc/letsencrypt/live/'.$ServerHost.'/cert.pem'
'KeyPath'=>'/etc/letsencrypt/live/'.$ServerHost.'/privkey.pem'
'ChainCertPath'=>'/etc/letsencrypt/live/'.$ServerHost.'/chain.pem'
```

--------------------------------

### Basic CodeMirror Setup with Standard Keymap

Source: https://github.com/wwbn/avideo/blob/master/node_modules/@codemirror/commands/README.md

Demonstrates how to set up a CodeMirror editor view and integrate the standard keymap along with a custom key binding for selecting a line.

```javascript
import {EditorView, keymap} from "@codemirror/view"
import {standardKeymap, selectLine} from "@codemirror/commands"

const view = new EditorView({
  parent: document.body,
  extensions: [
    keymap.of([
      ...standardKeymap,
      {key: "Alt-l", mac: "Ctrl-l", run: selectLine}
    ])
  ]
})
```

--------------------------------

### Start Development Server

Source: https://github.com/wwbn/avideo/blob/master/node_modules/m3u8-parser/CONTRIBUTING.md

Starts a local development server for running the application.

```bash
npm start
```

--------------------------------

### Install LAMP, FFmpeg, and Git on Ubuntu 16.x

Source: https://github.com/wwbn/avideo/wiki/How-to-install-LAMP,--FFMPEG-and-Git-on-a-fresh-Ubuntu-16.x---For-AVideo-Platform-version-3.x-or-older

Installs Apache, PHP 7 with necessary modules, MySQL, FFmpeg, Git, and libimage-exiftool-perl for handling portrait videos. This command is essential for setting up the AVideo Platform environment.

```bash
sudo apt-get install apache2 php7.0 libapache2-mod-php7.0 php7.0-mysql php7.0-curl php7.0-gd php7.0-intl mysql-server mysql-client ffmpeg git libimage-exiftool-perl
```

--------------------------------

### Basic Usage with Composer

Source: https://github.com/wwbn/avideo/blob/master/vendor/nesbot/carbon/readme.md

A minimal example demonstrating how to include and use Carbon after installation with Composer.

```php
<?php
require 'vendor/autoload.php';

use Carbon\Carbon;

printf("Now: %s", Carbon::now());

```

--------------------------------

### Example Sign-In API Calls

Source: https://github.com/wwbn/avideo/wiki/AVideo-Platform-API

Provides example HTTP GET requests for signing into the AVideo API using both raw and encoded passwords. The encoded password method requires the 'encodedPass=true' parameter.

```http
# Raw password
GET https://demo.avideo.com/api/signIn?user=admin&pass=123

# Encoded password
GET https://demo.avideo.com/api/signIn?user=admin&pass=f321d14cdeeb7cded7489f504fa8862b&encodedPass=true
```

--------------------------------

### HTML Structure for Alternative Setup (No npm)

Source: https://github.com/wwbn/avideo/blob/master/node_modules/videojs-ima/README.md

Include Video.js, IMA SDK, videojs-contrib-ads, and videojs-ima scripts and stylesheets directly in your HTML if not using npm.

```html
<html>
  <head>
    <!-- Load dependent stylesheets. -->
    <link href="path/to/video-js.css" rel="stylesheet">
    <link rel="stylesheet" href="path/to/videojs-contrib-ads.css" />
    <link rel="stylesheet" href="path/to/videojs.ima.css" />
  </head>

  <body>
    <video id="content_video" class="video-js vjs-default-skin"
        controls preload="auto" width="YOUR_VIDEO_WIDTH" height="YOUR_VIDEO_HEIGHT">
      <source src="PATH_TO_YOUR_CONTENT_VIDEO" type="YOUR_CONTENT_VIDEO_TYPE" />
    </video>
    <!-- Load dependent scripts -->
    <script src="/path/to/video.js"></script>
    <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
    <script src="/path/to/videojs-contrib-ads.js"></script>
    <script src="/path/to/videojs.ima.js"></script>
    <script src="player.js"></script>
  </body>
</html>
```

--------------------------------

### Install Nginx and Nginx RTMP Module Dependencies

Source: https://github.com/wwbn/avideo/wiki/Set-up-my-own-Stream-Server

Installs necessary build tools, libraries, and downloads Nginx and the RTMP module source code. This is the initial setup for compiling Nginx with RTMP support.

```bash
sudo apt-get update -y && sudo apt-get upgrade -y
sudo apt-get install -y build-essential libpcre3 libpcre3-dev zlib1g zlib1g-dev libssl-dev
sudo mkdir ~/build && cd ~/build
sudo git clone https://github.com/arut/nginx-rtmp-module.git
sudo wget http://nginx.org/download/nginx-1.16.1.tar.gz && sudo tar xzf nginx-1.16.1.tar.gz
cd nginx-1.16.1
sudo ./configure --with-http_ssl_module --with-http_stub_status_module --with-http_auth_request_module --add-module=../nginx-rtmp-module
sudo make && sudo make install
```

--------------------------------

### Initialize CardboardVRDisplay with Options

Source: https://github.com/wwbn/avideo/blob/master/node_modules/cardboard-vr-display/README.md

Demonstrates how to import and instantiate CardboardVRDisplay with a comprehensive set of configuration options. Includes default values and explanations for each option.

```javascript
import CardboardVRDisplay from 'cardboard-vr-display';

// Default options
const options = {
  // Optionally inject custom Viewer parameters as an option. Each item
  // in the array must be an object with the following properties; here is
  // an example of the built in CardboardV2 viewer:
  //
  // {
  //   id: 'CardboardV2',
  //   label: 'Cardboard I/O 2015',
  //   fov: 60,
  //   interLensDistance: 0.064,
  //   baselineLensDistance: 0.035,
  //   screenLensDistance: 0.039,
  //   distortionCoefficients: [0.34, 0.55],
  //   inverseCoefficients: [-0.33836704, -0.18162185, 0.862655, -1.2462051,
  //     1.0560602, -0.58208317, 0.21609078, -0.05444823, 0.009177956,
  //     -9.904169E-4, 6.183535E-5, -1.6981803E-6]
  // }
  // Added in 1.0.12.
  ADDITIONAL_VIEWERS: [],

  // Select the viewer by ID. If unspecified, defaults to 'CardboardV1'.
  // Added in 1.0.12.
  DEFAULT_VIEWER: '',

  // By default, on mobile, a wakelock is necessary to prevent the device's screen
  // from turning off without user input. Disable if you're keeping the screen awake through
  // other means on mobile. A wakelock is never used on desktop.
  // Added in 1.0.3.
  MOBILE_WAKE_LOCK: true,

  // Whether or not CardboardVRDisplay is in debug mode. Logs extra
  // messages. Added in 1.0.2.
  DEBUG: false,

  // The URL to JSON of DPDB information. By default, uses the data
  // from https://github.com/WebVRRocks/webvr-polyfill-dpdb; if left
  // falsy, then no attempt is made.
  // Added in 1.0.1
  DPDB_URL: 'https://dpdb.webvr.rocks/dpdb.json',

  // Complementary filter coefficient. 0 for accelerometer, 1 for gyro.
  K_FILTER: 0.98,

  // How far into the future to predict during fast motion (in seconds).
  PREDICTION_TIME_S: 0.040,

  // Flag to disabled the UI in VR Mode.
  CARDBOARD_UI_DISABLED: false,

  // Flag to disable the instructions to rotate your device.
  ROTATE_INSTRUCTIONS_DISABLED: false,

  // Enable yaw panning only, disabling roll and pitch. This can be useful
  // for panoramas with nothing interesting above or below.
  YAW_ONLY: false,

  // Scales the recommended buffer size reported by WebVR, which can improve
  // performance.
  // UPDATE(2016-05-03): Setting this to 0.5 by default since 1.0 does not
  // perform well on many mobile devices.
  BUFFER_SCALE: 0.5,

  // Allow VRDisplay.submitFrame to change gl bindings, which is more
  // efficient if the application code will re-bind its resources on the
  // next frame anyway. This has been seen to cause rendering glitches with
  // THREE.js.
  // Dirty bindings include: gl.FRAMEBUFFER_BINDING, gl.CURRENT_PROGRAM,
  // gl.ARRAY_BUFFER_BINDING, gl.ELEMENT_ARRAY_BUFFER_BINDING,
  // and gl.TEXTURE_BINDING_2D for texture unit 0.
  DIRTY_SUBMIT_FRAME_BINDINGS: false,
};

const display = new CardboardVRDisplay(options);

function MockVRFrameData () {
  this.leftViewMatrix = new Float32Array(16);
  this.rightViewMatrix = new Float32Array(16);
  this.leftProjectionMatrix = new Float32Array(16);
  this.rightProjectionMatrix = new Float32Array(16);
  this.pose = null;
};

const frame = new (window.VRFrameData || MockVRFrameData)();

display.isConnected; // true
display.getFrameData(frame);

frame.rightViewMatrix; // Float32Array
frame.pose; // { orientation, position }

```

--------------------------------

### Promise Support Example

Source: https://github.com/wwbn/avideo/blob/master/node_modules/levelup/README.md

Demonstrates using LevelUp's promise-based API for put, get, and error handling.

```javascript
var db = levelup(leveldown('./my-db'))

db.put('foo', 'bar')
  .then(function () { return db.get('foo') })
  .then(function (value) { console.log(value) })
  .catch(function (err) { console.error(err) })
```

--------------------------------

### Initialize GLightbox with Basic Options

Source: https://github.com/wwbn/avideo/blob/master/node_modules/glightbox/README.md

Demonstrates initializing GLightbox with common options like touch navigation, looping, and autoplay for videos.

```javascript
const lightbox = GLightbox({
    touchNavigation: true,
    loop: true,
    autoplayVideos: true
});
```

--------------------------------

### Installer File

Source: https://github.com/wwbn/avideo/wiki/Command-lines-on-install-directory

The main installer file. Must be run from a browser and requires the absence of the videos/configuration.php file.

```bash
php index.php
```

--------------------------------

### EmojioneArea Method Usage Examples

Source: https://github.com/wwbn/avideo/blob/master/vendor/mervick/emojionearea/README.md

Illustrates various ways to interact with an EmojioneArea instance using its methods. Examples include attaching event listeners, getting text content, and controlling the emoji picker's visibility.

```javascript
  var el = $("selector").emojioneArea();
  el[0].emojioneArea.on("emojibtn.click", function(btn, event) {
    console.log(btn.html());
  });
  
  // OR
  $("selector2").emojioneArea();
  $("selector2")[0].emojioneArea.getText();
  
  // OR
  $("selector3").emojioneArea();
  $("selector3").data("emojioneArea").showPicker();
```

--------------------------------

### Build on Windows

Source: https://github.com/wwbn/avideo/blob/master/vendor/aws/aws-crt-php/README.md

Clones the repository, sets up the PHP SDK, configures the build with specific options, and builds the extension using nmake.

```bat
> git clone --recursive https://github.com/awslabs/aws-crt-php.git
> git clone https://github.com/microsoft/php-sdk-binary-tools.git C:\php-sdk
> C:\php-sdk\phpsdk-vs16-x64.bat

C:\php-sdk\
$ cd <your-path-to-aws-crt-php>

<your-path-to-aws-crt-php>\
$ phpize

# --with-prefix only required when your php runtime in system path is different than the runtime you wish to use.
<your-path-to-aws-crt-php>\
$ configure --enable-awscrt=shared --with-prefix=<your-path-to-php-prefix>

<your-path-to-aws-crt-php>\
$ nmake

<your-path-to-aws-crt-php>\
$ nmake generate-php-ini
```

--------------------------------

### Basic LevelDB Usage

Source: https://github.com/wwbn/avideo/blob/master/node_modules/level/README.md

Demonstrates how to create, put, and get data in a LevelDB database. Requires the 'level' package to be installed.

```javascript
var level = require('level')

// 1) Create our database, supply location and options.
//    This will create or open the underlying store.
var db = level('my-db')

// 2) Put a key & value
db.put('name', 'Level', function (err) {
  if (err) return console.log('Ooops!', err)

  // 3) Fetch by key
  db.get('name', function (err, value) {
    if (err) return console.log('Ooops!', err)

    // Ta da!
    console.log('name=' + value)
  })
})
```

--------------------------------

### Full Plugin Example

Source: https://github.com/wwbn/avideo/blob/master/plugin/API/docs/customization/add-plugin.md

A comprehensive example demonstrating state plugins (actions, wrapActions, reducers, selectors), components, and utility functions within a plugin.

```javascript
// A contrived, but quite full example....

export function SomePlugin(toolbox) {

  const UPDATE_SOMETHING = "some_namespace_update_something" // strings just need to be uniuqe... see below

  // Tools
  const fromJS = toolbox.Im.fromJS // needed below
  const createSelector = toolbox.createSelector // same, needed below

  return {
    statePlugins: {

      someNamespace: {
        actions: {
          actionName: (args)=> ({type: UPDATE_SOMETHING, payload: args}), // Synchronous action must return an object for the reducer to handle
          anotherAction: (a,b,c) => (system) => system.someNamespaceActions.actionName(a || b) // Asynchronous actions must return a function. The function gets the whole system, and can call other actions (based on state if needed)
        },
        wrapActions: {
          anotherAction: (oriAction, system) => (...args) => {
            oriAction(...args) // Usually we at least call the original action
            system.someNamespace.actionName(...args) // why not call this?
            console.log("args", args) // Log the args
            // anotherAction in the someNamespace has now been replaced with the this function
          }
        },
        reducers: {
          [UPDATE_SOMETHING]: (state, action) => { // Take a state (which is immutable) and an action (see synchronous actions) and return a new state
            return state.set("something", fromJS(action.payload)) // we're updating the Immutable state object... we need to convert vanilla objects into an immutable type (fromJS)
            // See immutable about how to modify the state
            // PS: you're only working with the state under the namespace, in this case "someNamespace". So you can do what you want, without worrying about /other/ namespaces
          }
        },
        selectors: {
          // creatSelector takes a list of fn's and passes all the results to the last fn.
          // eg: createSelector(a => a, a => a+1, (a,a2) => a + a2)(1) // = 3
          something: createSelector( // see [reselect#createSelector](https://github.com/reactjs/reselect#createselectorinputselectors--inputselectors-resultfunc)
            getState => getState(), // This is a requirement... because we `bind` selectors, we don't want to bind to any particular state (which is an immutable value) so we bind to a function, which returns the current state
            state => state.get("something") // return the whatever "something" points to
          ),
          foo: getState => "bar" // In the end selectors are just functions that we pass getState to
        }
      }

      ... // you can include as many namespaces as you want. They just get merged into the 'system'

    },

    components: {
      foo: ()=> <h1> Hello </h1> // just a map of names to react components, naturally you'd want to import a fuller react component
    },

    fn: {
      addOne: (a) => a + 1 // just any extra functions you want to include
    }
  }
}
```

--------------------------------

### Install sebastian/type as a Development Dependency

Source: https://github.com/wwbn/avideo/blob/master/vendor/sebastian/type/README.md

Use this command to add the library as a development-time dependency, for example, for running test suites.

```bash
composer require --dev sebastian/type
```

--------------------------------

### Install with Composer

Source: https://github.com/wwbn/avideo/blob/master/vendor/paragonie/constant_time_encoding/README.md

Use Composer to add the library to your project.

```sh
composer require paragonie/constant_time_encoding
```

--------------------------------

### Basic Flickity Carousel Setup

Source: https://github.com/wwbn/avideo/blob/master/node_modules/flickity/sandbox/tricky-drag.html

Sets up a basic Flickity carousel with CSS for styling cells. This is the foundational structure for the examples.

```html
.carousel {
  background: #EEE;
  margin-bottom: 40px;
}

.carousel-cell {
  height: 200px;
  width: 25%;
  margin: 0 10px;
  background: #6C6;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.carousel-cell b {
  display: block;
  font-size: 80px;
  color: white;
}
```

--------------------------------

### Running PHP Development Server

Source: https://github.com/wwbn/avideo/blob/master/vendor/paypal/rest-api-sdk-php/sample/README.md

Starts a local PHP development server to host the sample application. Access the samples via a web browser.

```bash
php -f PayPal-PHP-SDK/paypal/rest-api-sdk-php/sample/index.php
```

--------------------------------

### Integrate Mockery with PHPUnit using MockeryTestCase

Source: https://github.com/wwbn/avideo/blob/master/vendor/mockery/mockery/docs/getting_started/quick_reference.md

Extend MockeryTestCase to integrate Mockery with PHPUnit. This is the simplest way to get started.

```php
use \Mockery\Adapter\Phpunit\MockeryTestCase;

class MyTest extends MockeryTestCase
{
}
```

--------------------------------

### Install ws

Source: https://github.com/wwbn/avideo/blob/master/node_modules/ws/README.md

Install the ws library using npm.

```bash
npm install ws
```

--------------------------------

### Update System Repositories

Source: https://github.com/wwbn/avideo/wiki/Install-yt‐dlp

Before installing new software, update your system's package lists to ensure you get the latest versions.

```bash
sudo apt update
```

--------------------------------

### Initialize DnsConnector and Connect

Source: https://github.com/wwbn/avideo/blob/master/vendor/react/socket/README.md

Sets up a DNS resolver and a DnsConnector to establish a plaintext TCP/IP connection to a hostname. Make sure to have a TcpConnector and a DNS resolver instance ready.

```php
$dnsResolverFactory = new React\Dns\Resolver\Factory();
$dns = $dnsResolverFactory->createCached('8.8.8.8');

$dnsConnector = new React\Socket\DnsConnector($tcpConnector, $dns);

$dnsConnector->connect('www.google.com:80')->then(function (React\Socket\ConnectionInterface $connection) {
    $connection->write('...');
    $connection->end();
});
```

--------------------------------

### Run Dev Server for Docs

Source: https://github.com/wwbn/avideo/blob/master/vendor/zircote/swagger-php/CONTRIBUTING.md

Starts a local development server for the documentation website.

```shell
composer docs:dev
```

--------------------------------

### PHP Development Server Output

Source: https://github.com/wwbn/avideo/blob/master/vendor/paypal/rest-api-sdk-php/sample/README.md

Example output when the PHP development server starts, indicating the listening address and document root.

```text
<!-- Welcome to PayPal REST SDK -- >
PHP 5.5.14 Development Server started at Sat Jan 10 14:04:35 2015
Listening on http://localhost:5000
Document root is /Users/japatel/Desktop/project/PayPal-PHP-SDK/paypal/rest-api-sdk-php/sample
Press Ctrl-C to quit.
```

--------------------------------

### JavaScript Setup without npm

Source: https://github.com/wwbn/avideo/blob/master/node_modules/videojs-ima/README.md

Initialize Video.js and the IMA plugin by loading scripts directly. Configure player options and the ad tag URL.

```javascript
var player = videojs('content_video');

var options = {
  adTagUrl: 'YOUR_AD_TAG'
};

player.ima(options);
// On mobile devices, you must call initializeAdDisplayContainer as the result
// of a user action (e.g. button click). If you do not make this call, the SDK
// will make it for you, but not as the result of a user action. For more info
// see our examples, all of which are set up to work on mobile devices.
// player.ima.initializeAdDisplayContainer();
```

--------------------------------

### Include mpd-parser with Browserify (CommonJS)

Source: https://github.com/wwbn/avideo/blob/master/node_modules/mpd-parser/README.md

When using Browserify, install the package via npm and require the parser. This example demonstrates the CommonJS module syntax.

```js
var mpdParser = require('mpd-parser');

var parsedManifest = mpdParser.parse(manifest, { manifestUri });
```

--------------------------------

### Install LAMP, FFMPEG, Git, and AVideo

Source: https://github.com/wwbn/avideo/wiki/How-to-install-LAMP,-FFMPEG-and-Git-on-a-fresh-Debian-10.x-for-AVideo-Platform-version-10.8-or-newer

Installs all necessary packages and clones AVideo and AVideo-Encoder repositories. Restarts Apache and installs youtube-dl. Enables Apache rewrite and headers modules.

```bash
sudo apt-get install -y apache2 php libapache2-mod-php php-mysql php-curl php-gd php-intl php-mbstring php-gettext php-xml php-zip default-mysql-server default-mysql-client ffmpeg git libimage-exiftool-perl nano iputils-ping && cd /var/www/html && sudo git clone https://github.com/WWBN/AVideo.git && cd /var/www/html && sudo git clone https://github.com/WWBN/AVideo-Encoder.git && sudo echo "ServerName localhost" >> /etc/apache2/apache2.conf && sudo service apache2 restart && sudo apt-get install -y python curl && sudo curl -L https://yt-dl.org/downloads/latest/youtube-dl -o /usr/local/bin/youtube-dl && sudo chmod a+rx /usr/local/bin/youtube-dl && sudo a2enmod rewrite && sudo a2enmod headers && sudo service apache2 restart && sudo service mysql start
```

--------------------------------

### React Native / Expo Setup

Source: https://github.com/wwbn/avideo/blob/master/node_modules/uuid/README.md

For React Native and Expo projects, install and import 'react-native-get-random-values' before 'uuid'. Ensure you are using compatible versions of the libraries.

```javascript
import 'react-native-get-random-values';
import { v4 as uuidv4 } from 'uuid';
```

--------------------------------

### Install vtt.js with Bower

Source: https://github.com/wwbn/avideo/blob/master/node_modules/videojs-vtt.js/README.md

Demonstrates how to install the vtt.js library using Bower for browser projects.

```bash
$ bower install vtt.js
```

--------------------------------

### Running Tests for Level.js

Source: https://github.com/wwbn/avideo/blob/master/node_modules/level-js/README.md

Clone the repository, install dependencies, and run tests to verify the project setup. This process will output a URL for browser-based testing.

```sh
git clone git@github.com:Level/level-js.git
cd level-js
npm install
npm test
```

--------------------------------

### Install Dependencies and Build

Source: https://github.com/wwbn/avideo/blob/master/node_modules/webvr-polyfill/README.md

Install project dependencies using npm and build the uncompressed JavaScript file.

```bash
# Install dependencies
$ npm install

# Build uncompressed JS file
$ npm run build
```

--------------------------------

### Parse Non-String Mapping Keys (After)

Source: https://github.com/wwbn/avideo/blob/master/vendor/symfony/yaml/CHANGELOG.md

Example showing how to explicitly quote non-string mapping keys to ensure they are parsed as strings, starting from Symfony 4.0.

```php
$yaml = <<<YAML
"null": null key
"true": boolean true
"2.0": float key
YAML;

Yaml::parse($yaml);
```

--------------------------------

### Basic Usage of WebVR Polyfill

Source: https://github.com/wwbn/avideo/blob/master/node_modules/webvr-polyfill/README.md

Include the WebVR Polyfill script in your HTML file to enable WebVR support. This is the most basic way to get started.

```html
<script src="node_modules/webvr-polyfill/build/webvr-polyfill.js"></script>
```
Tokens:
Raw