playease.js 2.1

[domain] http://studease.cn
[source] https://github.com/studease/playease
[中文] http://blog.csdn.net/icysky1989/article/details/75094205
公众号：STUDEASE
QQ群：528109813
Skype: live:670292548
Email: [email protected]

This is not only an HTML5 FLV Player, which supports HTTP/WS-FLV live streaming, but also supports HTTP/WS-fMP4, MPEG-DASH, HLS and Original HTML5 Media Resources (eg. Ogg, Mpeg4, WebM), with an independent UI framework.

Note:

The open-sourced version (v1.2) is no longer being maintained. You can still find the source under branch "v1.2.xx". But it is outdated and not recommended to use in productions.

Instead, we've started a new version (v2) for business usage, which is much more professional, high-performance and stable, and compatiable with all of the browsers that supports MSE, including iPad Safari and Android Chrome. In this build, an UI framework is developed separately from the core SDK (known as API), and is much easier to understand and extend. In the meantime, the UI framework is open-sourced since v2.1.49 to help building customized UI, plugins and components.

The new core SDK provides more professional configurations, interfaces and events. In allusion to entertainment, monitoring, education and VR scenes, it is able to run in multi-instance mode and destroy dynamically, detect tracks automatically, synchronize audio and video while missing frames. In addition, configurable time range collector makes it functional 24/7. Tying in with reducing latency due to the cumulative ack of tcp, the latency of live broadcast can remain low. Besides, it also supports frame capture, progressive fMP4 recording at any time, real-time fetching and event reporting of media info, log feedback and so on.

The UI framework is built independently from the core SDK, driven by the interfaces and events. It is designed with multiple scalable and registering plugins, each instance supports simple skin switching. Among these plugins, Display and Controlbar provide a flexible way to setup components, such as customization, deleting or re-sorting.

If you are interested in this player, and or solutions about live media streaming, please contact us for details.

Roadmap

Core Modules

• [x] SRC (original html5 media resources, eg. Ogg, Mpeg4, WebM, etc.)
• [x] FLV (http[s]/ws[s])
• [x] FMP4 (http[s]/ws[s])
• [ ] DASH (ll-cmaf)
• [ ] HLS (ll-cmaf)
• [ ] RTC
• [ ] Flash

UI Plugins

• [x] Poster
• [x] v2.1.00 - Danmu
• [x] Display
• [ ] AD
• [ ] Share
• [x] Logo
• [x] Controlbar
• [x] ContextMenu
• [ ] Playlist

Features

• [x] v2.0.89 - Synchronize video with audio while some frames are missing.
• [x] v2.1.07 - Carry api.id while dispatching events.
• [x] v2.1.10 - Remove media segments within a specific time range to release memory usage.
• [x] v2.1.20 - Capture the current frame, and save as a picture.
  • [x] v2.1.45 - New event for screenshot, and capture() will no longer auto download, but return the image data.
• [x] v2.1.27 - Reduce latency by simply seeking.
  • [x] v2.1.77 - Reduce latency smoothly, due to the cumulative ack of tcp.
• [x] v2.1.33 - Ignore track depending on flv flags, to optimize audio only or video only streaming.
• [x] v2.1.36 - Optimize track data into interleaved mode.
• [x] v2.1.37 - Fix audio time issue.
• [x] v2.1.38 - Fix incorrect ui display when exiting fullscreen by pressing esc.
• [x] v2.1.43 - Buffer before starting to play.
• [x] v2.1.50 - New interface[s]: create, destroy.
• [x] v2.1.54 - New interface[s]: record.
  • [x] v2.1.59 - StreamSaver using ServiceWorker.
  • [x] v2.1.69 - StreamWriter starts while the first keyframe is detected.
• [x] v2.1.67 - Implemented Logger class. New interface[s]: getProperty.
  • [ ] Log feedback.
• [x] v2.1.73 - New module[s]: FMP4.
• [ ] Breakpoint download for http-flv playback (Send a HEAD request at first).
• [ ] Experience statistics and analysis.

Solutions

• [x] Live Broadcast Solution.
• [x] Live Broadcast Solution on Mobile.
• [x] Monitoring Example.

Example

Use the SDK directly

var utils = playease.utils,
    events = playease.events,
    Event = events.Event,
    IOEvent = events.IOEvent,
    MediaEvent = events.MediaEvent,
    SaverEvent = events.SaverEvent,
    index = 0;

var api = playease();
api.addEventListener(Event.READY, onReady);
api.addEventListener(Event.PLAY, console.log);
api.addEventListener(IOEvent.LOADSTART, console.log);
api.addEventListener(Event.WAITING, console.log);
api.addEventListener(IOEvent.STALLED, console.log);
api.addEventListener(IOEvent.ABORT, console.log);
api.addEventListener(IOEvent.TIMEOUT, console.log);
api.addEventListener(Event.DURATIONCHANGE, console.log);
api.addEventListener(Event.LOADEDMETADATA, console.log);
api.addEventListener(Event.LOADEDDATA, console.log);
api.addEventListener(IOEvent.PROGRESS, console.log);
api.addEventListener(Event.CANPLAY, console.log);
api.addEventListener(Event.PLAYING, console.log);
api.addEventListener(Event.CANPLAYTHROUGH, console.log);
api.addEventListener(IOEvent.SUSPEND, console.log);
api.addEventListener(Event.PAUSE, console.log);
api.addEventListener(Event.SEEKING, console.log);
api.addEventListener(Event.SEEKED, console.log);
api.addEventListener(Event.SWITCHING, console.log);
api.addEventListener(Event.SWITCHED, console.log);
api.addEventListener(Event.RATECHANGE, console.log);
api.addEventListener(Event.TIMEUPDATE, console.log);
api.addEventListener(Event.VOLUMECHANGE, console.log);
api.addEventListener(IOEvent.LOAD, console.log);
api.addEventListener(MediaEvent.INFOCHANGE, console.log);
api.addEventListener(MediaEvent.STATSUPDATE, console.log);
api.addEventListener(MediaEvent.SEI, console.log);
api.addEventListener(MediaEvent.SCREENSHOT, onScreenshot);
api.addEventListener(SaverEvent.WRITERSTART, console.log);
api.addEventListener(SaverEvent.WRITEREND, console.log);
api.addEventListener(Event.ENDED, console.log);
api.addEventListener(Event.ERROR, console.error);
api.setup(container, {
    file: 'http://127.0.0.1/vod/sample.flv',
});

function onReady(e) {
    // ui.record('fragmented.mp4');
}

function onScreenshot(e) {
    var arr = e.data.image.split(',');
    var ret = arr[0].match(/^data:(image\/(.+));base64$/);
    if (ret === null) {
        console.error('The string did not match the expected pattern.');
        return;
    }

    var link = document.createElement('a');
    link.href = e.data.image;
    link.download = 'screenshot-' + utils.padStart(index++, 3, '0') + '.' + ret[2];
    link.click();
}

Use the built-in extendible UI framework

var events = playease.events,
    Event = events.Event,
    UIEvent = events.UIEvent,
    MouseEvent = events.MouseEvent;

var ui = playease.ui(0, { mode: 'file' });
ui.addEventListener(Event.READY, onReady);
ui.addEventListener(MouseEvent.CLICK, onClick);
ui.addEventListener(UIEvent.SHOOTING, console.log);
ui.addEventListener(UIEvent.FULLPAGE, console.log);
ui.addEventListener(UIEvent.FULLSCREEN, console.log);
ui.addEventListener(UIEvent.RESIZE, console.log);
ui.setup(container, {
    ...
    service: {
        script: 'js/sw.js',
        scope: 'js/',
        enable: false,
    },
});

function onReady(e) {
    // ui.record('fragmented.mp4');
}

function onClick(e) {
    switch (e.data.name) {
        case 'report':
            ui.logger.flush();
            break;
    }
}

Add Callback

api.onready = function(e) {
    // do something
};

Or:

api.addEventListener('ready', onReady);

function onReady(e) {
    // do something
}

Configuration

Properties for SDK

{
    airplay: 'allow',
    autoplay: false,
    dynamic: false,          // dynamic streaming
    bufferLength: 0.3,       // sec.
    file: '',
    lowlatency: true,        // ll-dash, ll-hls, ll-flv/fmp4 (auto reduce latency due to cumulative ack of tcp)
    maxBufferLength: 1.2,    // sec.
    maxPlaybackLength: 10,   // sec. for live mode only
    maxRetries: 0,           // maximum number of retries while some types of error occurs. -1 means always
    mode: 'live',            // live, vod
    module: '',              // SRC, FLV, FMP4, DASH, HLS, RTC, Flash
    muted: false,
    objectfit: 'contain',    // fill, contain, cover, none, scale-down
    playsinline: true,
    preload: 'none',         // none, metadata, auto
    retrying: 0,             // ms. retrying interval
    smoothing: false,        // smooth switching
    volume: 0.8,
    loader: {
        name: 'auto',
        mode: 'cors',        // cors, no-cors, same-origin
        credentials: 'omit', // omit, include, same-origin
    },
    service: {
        script: 'js/sw.js',
        scope: 'js/',
        enable: false,
    },
    sources: [{              // ignored if "file" is presented
        file: '',
        module: '',
        label: '',
        default: false,
    }],
}

Extension for UI

{
    aspectratio: '',         // deprecated! 16:9 etc.
    skin: 'classic',
    plugins: [{
        kind: 'Poster',
        file: 'images/poster.png',
        cors: 'anonymous',   // anonymous, use-credentials
        objectfit: 'fill',   // fill, contain, cover, none, scale-down
        visibility: true,
    }, {
        kind: 'Danmu',
        speed: 100,
        lineHeight: 32,
        enable: true,
        visibility: true,
    }, {
        kind: 'Display',
        layout: '[Button:play=][Button:waiting=][Label:error=][Panel:info=][Panel:stats=]',
        ondoubleclick: 'fullscreen', // fullpage, fullscreen
        visibility: true,
    }, {
        kind: 'AD',
        visibility: true,
    }, {
        kind: 'Share',
        visibility: true,
    }, {
        kind: 'Logo',
        file: 'image/logo.png',
        link: 'http://studease.cn/playease',
        cors: 'anonymous',   // anonymous, use-credentials
        target: '_blank',
        style: 'margin: 3% 5%; width: 36px; height: 36px; top: 0px; right: 0px;',
        visibility: true,
    }, {
        kind: 'Controlbar',
        layout: '[Slider:timebar=Preview]|[Button:play=Play][Button:pause=Pause][Button:reload=Reload][Button:stop=Stop][Label:quote=Live broadcast][Label:time=00:00/00:00]||[Button:report=Report][Button:capture=Capture][Button:download=Download][Button:mute=Mute][Button:unmute=Unmute][Slider:volumebar=80][Select:definition=Definition][Button:danmuoff=Danmu Off][Button:danmuon=Danmu On][Button:fullpage=Fullpage][Button:exitfullpage=Exit Fullpage][Button:fullscreen=Fullscreen][Button:exitfullscreen=Exit Fullscreen]',
        autohide: false,
        visibility: true,
    }, {
        kind: 'ContextMenu',
        visibility: true,
        items: [{
            mode: '',        // '', featured, disable
            icon: 'image/github.png',
            text: 'github.com',
            shortcut: '',
            handler: function () { window.open('https://github.com/studease/playease'); },
        }],
    }]
};

Config of Logger

{
    level: 'log',    // debug, log, warn, error
    mode: 'console', // console, file, feedback
    maxLines: 60,
}

API

Statics of SDK

Note:

playease(id, option) is short for playease.API.get(id, option).
playease.create(option) is short for playease.API.create(option).

API of SDK Instance

Statics of UI

Note:

playease.ui(id, option) is short for playease.UI.get(id, option).
playease.ui.create(option) is short for playease.UI.create(option).

API of UI Instance

Note: All of the SDK methods are also supported by UI.

Events

The SDK supports Event and IOEvent. All of the SDK events will be forward to UI.

Event

IOEvent

MediaEvent

UIEvent

GlobalEvent

MouseEvent

KeyboardEvent

TimerEvent

License

BSD 3-Clause License (NOTICE)