punktde/cloudflare-stream

Last activity 08 Dec 2022 3 11335
composer require punktde/cloudflare-stream

Adaptive video streaming using the cloudflare stream service

1.2.2

Version
1.2.2
Type
neos-package
Release Date
Dec 08, 2022 08:02
Source
git
Distribution
zip
Requires
MIT d0b98f20057f2a273f0a33b4026d0c9974c8b37c

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 33 package(s).