punktde / cloudflare-stream
Adaptive video streaming using the cloudflare stream service
Installs: 12 834
Dependents: 0
Suggesters: 0
Security: 0
Stars: 4
Watchers: 6
Forks: 0
Open Issues: 0
Type:neos-package
Requires
- ankitpokhrel/tus-php: ^2.1
- neos/neos: ^5.0 || ^7.0 || ^8.0
README
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>
`
}