Introduction

This demonstrates manually capturing a video frame to a jpeg or png image and saving to a backend service either as file uploads or base64 encoded images.

Enabling capturing features requires the is-snapshot style added to the player containers.

The dimensions config can produce multiple sizes including thumbnails. Browsers do not do a good job resizing so a new system has been implemented to provide higher quality downsizing and resampling that should match Photoshop.

Web Workers is used for fast processing and non blocking. Web Workers is available in most modern browsers including on Windows 7. A WebGL option for faster resizing will be made available.

Work around solution for non-inline player support like on Iphone.

Support for Mpeg Dash and HLSJS based stream captures.

Example backends provided have been upgraded to provide both multiple file upload support and saving directly to Amazon S3.

When used in conjuction with the VR Video plugin. VR capture of the rendering view is possible not normally possible.

 

Features

• Capture of video frame from any http streaming source with Cross Origin Resource Sharing enabled and a browser that supports the canvas element, a fallback for IE is supplied.
• Jpeg and PNG encoding on the fly with a quality setting for jpeg encoding.
• High quality and fast browser based resizing solution that can provide multiple sizes including thumbnails.
• Javascript api service to automate the capture.
• Returning the canvas to display in a preview window.
• Example backend included to demonstrate saving the image sent as multiple image uploads of as base64 encoded images.
• Example backend included to demonstrate generating an authentication signature and post data options for uploading files directly to S3.
• Csrf token security support for authentating the upload service.
• Includes a Notification plugin to display user feedback.
• Now works with Cloudfront video. Cloudfront now supports the OPTIONS request method which is sent via the browser to validate the cross origin request. see http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.htm.
• Cors support for browsers lacking crossOrigin video tag specs like Safari and IE11 using a proxy player work around solution.
• Local downloads support for Chrome and Firefox. Safari lacks special file download features and therefore requires to be opened in a new tab.
• Support and tested in Chrome,Firefox,Safari, IE 11, Edge Browser, IOS, Android. (Safari and IE11 both need the CORS proxy). Possibly support for IE9-IE10 with canvas and blob support fallbacks included.
• Playlist configuration support.
• Work around solution for non-inline player support like on Iphone. A notification will be provided when exiting fullscreen to start the capture at that current time.
• Support for Flowplayer 6 HLSJS and Mpeg Dash based stream captures.
• Capture VR Video rendering with the VR Video plugin.