The last time Hackerfall tried to access this page, it returned a not found error. A cached version of the page is below, or clickhereto continue anyway

GretaScript

Generate your unique script

Generate your Greta script with your unique access token by creating an account. The token is connected to your account and dashboard.

Create an account

Implementation

Paste the script provided found on your account page into the pages you want Greta to work on. Paste the script immediately before the closing head-tag. Greta will then automatically work for images on those pages.

If you host your content on a different domain you need to enable CORS.

Have a special case not covered by the documentation? Let us know via support or join our Slack channel.

Image Default Option

The default behaviour of Greta is to hook in as early as possible and change the src attribute of images to data-greta and then load the images using Greta. This works best if you put the script in your /head> tag.

The browser will load some of your images from your native solution and then start using Greta when the script is loaded.

For more specific ways of using Greta, like making sure a certain image is always loaded with Greta, using Greta on background images, or only using Greta on some of your images, see the sections below.

Manually choosing content

If you only want Greta to load some of your images but not all of them, change the src to data-greta and add data-lazy="true" to the script tag. See example below. With this option, Greta will only work for content that has the data-greta attribute.

If you want to use the default mode, but still be absolutely sure that a certain image is loaded with Greta, only change the src to data-greta for img> tags.

If you want to use the default mode, but have one or more images that you don't want to use Greta on, just add data-not-greta to the img> tag.

This is very useful for tracking pixels and adds as it makes sure every requests for this content continues to hit the server.

Fork this on GitHub

Background images

To use Greta on a background image, remove background-image from the CSS class and set the url in the data-greta> attribute on the element that should have a background image.

We support background images on the following elements:
Fork this on GitHub

Change attribute

You might, for different reasons, want to change the attribute used by Greta. It is possible to do so by setting Greta_Data_Attribute and Greta_Not_Attribute before you load the Greta script.

If the reason you are chaning the attribute is that you are using a lazy loading library, you also need to remove the current lazy loading library.

Video

We support dash, hls and mp4 encoded videos. The players we support are dash.js, video.js, hls.js, shaka player, JW Player, Flowplayer 6 and mp4 with our own player.

We recommend that you only use one type of player on the same page. Multiple players of the same types is fine!

Fork this on GitHub

Dash with a dash.js player

Follow below steps to use a dash.js player.

When using the dash.js player we have chosen to fallback to dash.as

Fork this on GitHub

Dash with a video.js player

Follow below steps to use a video.js player for dash.

Fork this on GitHub

Dash with a Shaka player

Follow below steps to use a Shaka player for dash.

Fork this on GitHub

Dash with a JW Player

Follow below steps to use a JW Player for dash.

Fork this on GitHub

Hls with a video.js player using Hls.js

Follow below steps to use a hls stream with video.js player using hls.js

Fork this on GitHub

Hls with a hls.js player

Follow below steps to use a hls.js player for hls. One important note on hls.js is that it currently doesn't work in Firefox 41, but from 42+. This is because Firefox have restricted the media source extensions api to only be available for a limited group of sites in versions prior to 42.

Fork this on GitHub

Hls with a JW Player

Follow below steps to use JW Player player for hls.

Fork this on GitHub

Hls with a Flowplayer

Follow below steps to use Flowplayer 6 player for hls.

Fork this on GitHub

Mp4 player

Follow below steps to play an mp4 file.

Most new browsers have support for playing mp4's, but please note that it doesn't work for all browsers. Mozilla Developer Network (MDN) provides good documentation on the state of different codecs, have a look here to learn more.

Audio

We support dash and hls encoded audio. The players we support are dash.js, video.js and hls.js.

We recommend that you only use one type of player on the same page. Multiple players of the same types is fine!

The greta.play function takes an object that contains options. Below are the properties:

Fork this on GitHub

Dash with a dash.js player

Follow below steps to use a dash.js player.

When using the dash.js player we have chosen to fallback to dash.as.

Fork this on GitHub

Dash with a video.js player

Follow below steps to use a video.js player for dash.

Fork this on GitHub

Hls with a video.js player

Follow below steps to use a video.js player for hls.

Fork this on GitHub

Hls with a hls.js player

Follow below steps to use a hls.js player for hls.

One importent note on hls.js is that it do not currently work in Firefox 41 it will work from 42+. This is because Firefox have limited the media source extensions api to a number of pages before 42.

Cache

There are currently two things you can do with Greta's cache functionality:

Should you want to use Greta for the cache functionality only, without the P2P part, that's possible too! We'll explain how to do that in a section further down.

Clear cache

You can clear the cache by using the clear cache button on app.greta.io. If you like to use the API, have a look at the example below. Don't forget to update YOUR_API_TOKEN, you'll find it on your account page

Fork this on GitHub

Set cache time

You can decide how long content should be cached, in memory and on disk.

To do so, add Greta_TTL_Disk and/or Greta_TTL_Memory before you load the Greta script.

The time should be set in milliseconds.

Have a special case not covered by the documentation? Drop us a note or join our Slack channel.
Fork this on GitHub

Cache functionality without using P2P

To only use Greta for the cache functionality, without the P2P part, you add data-only-cache="true" to the script tag. See example below. With this option, Greta will only load data from the local cache and the server, never P2P.

Fork this on GitHub

API/JS

We have a bunch of APIs you can use to get maximum use of Greta! We'd love your ideas on what APIs to add, drop us a note or join our Slack channel.

Download

Use this API to download a file to the users download folder using Greta

Options:
Fork this on GitHub

Observer

Use this API to stop Greta from continuously looking for changes in the DOM using a MutationObserver or a timer, depending on the browser. You can use this function directly after loading Greta.

If you have used the Observer API and want to start continusly looking for changes in the DOM again, call this function.

Fork this on GitHub

Update

If you want to trigger the process of looking for new content, call this function.

Fork this on GitHub

getEl

If you want to load the content of a specific element, you can use this function.

Fork this on GitHub

get

If you like to use Greta to load any binary data you can use the this API. It takes an options object as input.

Options:
Fork this on GitHub

getText

If you like to use Greta to load any text data you can use the this API. It takes an options object as input.

Options:
Fork this on GitHub

Signaling

We have developed a signaling system that is geographically distributed across the world and used to send offers and answers when setting up peer connections. You can use this system to send signaling messages between users in the same geographical cluster as eachother. At the moment the different clusters are EU, Asia and the US. If you need more exact info or have needs in other parts of the world, please drop us a note or join our Slack channel.

Connect, subscribe & publish

Follow below steps to get started with this API:

Fork this on GitHub

Gossip protocol

This is our implementation of Bimodal Multicast over webRTC, which we use to broadcast information in our peer-to-peer networks. The Gossip Protocol allows for a message to be broadcasted from one peer to the rest of the peers that it is connected to, after which those peers start to gossip. This makes it possible for one peer to broadcast a message that will be spread as far as the network reaches from this user, and without any ACKs we can be confident that every user has got the message.

Setup and use the gossip protocol:

Fork this on GitHub

CORS

If you are serving your content from a differnt domain than the page you have added Greta on, you need to enable CORS.

CORS is a way to tell the browser that it's OK to load this content.

To enable CORS, you need to add the Access-Control-Allow-Origin header to the response.

This is an awesome page where you can get examples and instructions on how to do it: http://enable-cors.org/

Some popular servers:

Continue reading on greta.io