punktde/cloudflare-stream

Last activity on 1 January 2021
  • 2
  • 1699
composer require punktde/cloudflare-stream

Adaptive video streaming using the cloudflare stream service

1.2.1

Adaptive video streaming using the cloudflare stream service

Version
1.2.1
Type
neos-package
Release Date
08.01.2021 09:18:15
Source
git
Distribution
zip
Requires
Requires (dev)
None
Suggest
None
Provides
None
Conflicts
None
Replaces
None
MIT c202f1b41d9bbe0bf0fa5016ee4e6c0ced90a866

PunktDe.Cloudflare.Stream

Latest Stable Version Total Downloads License

When videos are uploaded to Neos, this package automatically uploads these videos to the cloudflare stream service and stores the provided DASH and HLS URIs, as well as the thumbnail URL for rendering them in the frontend. An Eel helper is provided, to retrieve this meta data by a given video to use it in the video player of your choice.

Installation

Install the package via composer

$ composer require punktde/cloudflare-stream

Configuration

Just configure you cloudflare credentials:

PunktDe:
  Cloudflare:
    Stream:
      cloudflare:
        authentication:
          accountIdentifier: '<AccountIdentifier>'
          token: '<Bearer Token>'
      transfer:
        # Proxy to reach the cloudflare API
        proxyUrl: ''

Get Stream meta data using the provided eelHelper

In your custome project code, add a node type with a video ptoperty to select or upload a local video asset. Access the cloudflare stream meta data using the Stream.getVideoMetaData(videoObject) eelHelper method.

Example Fusion code

prototype(Vendor.Project:Content.Video) < prototype(Neos.Fusion:Component) {

    video = ${q(node).property('video')}
    streamMetaData = ${Stream.getVideoMetaData(this.video)}

    @if.videoSelected = ${Type.isObject(this.video)}

    renderer = afx`
    <table>
        <tr><td>CloudflareUid</td><td><b>{props.streamMetaData.cloudflareUid}</b></td></tr>
        <tr><td>Thumbnail</td><td><img src={props.streamMetaData.thumbnailUri} /></td></tr>
        <tr><td>HLS</td><td><a href={props.streamMetaData.hlsUri}>{props.streamMetaData.hlsUri}</a></td></tr>
        <tr><td>DASH</td><td><a href={props.streamMetaData.dashUri}>{props.streamMetaData.dashUri}</a></td></tr>
    </table>
    `
}

Provided Commands

Command Description
cloudflare:listvideos List all uploaded videos for that account
cloudflare:deletevideo Delete a video from cloudflare
cloudflare:uploadAll Upload all existing videos to cloudflare
The content of the readme is provided by Github
The same vendor provides 32 package(s).