video-dev / clappr-rtmp-plugin Goto Github PK

View Code? Open in Web Editor NEW

104.0 17.0 47.0 7.93 MB

📺 RTMP support for Clappr player.

Home Page: http://clappr.io

License: Apache License 2.0

JavaScript 29.89% HTML 6.67% ActionScript 61.74% Shell 1.20% CSS 0.50%

rtmp player clappr-player rtmp-support actionscript video javascript

clappr-rtmp-plugin's Introduction

clappr-rtmp-plugin

RTMP support for Clappr player. Supports both RTMP direct and SMIL (dynamic streaming).

How to use

Import rtmp.min.js

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/video-dev/clappr-rtmp-plugin@latest/dist/rtmp.min.js">
</script>

and create Clappr Player adding the external plugin:

var player = new Clappr.Player({
    source: "rtmp://source_here",
    parentId: "#player-wrapper",
    plugins: {'playback': [RTMP]},
    rtmpConfig: {
        swfPath: 'dist/assets/RTMP.swf',
        scaling:'stretch',
        playbackType: 'live',
        bufferTime: 1,
        startLevel: 0,
        switchRules: {
            "SufficientBandwidthRule": {
                "bandwidthSafetyMultiple": 1.15,
                "minDroppedFps": 2
            },
            "InsufficientBufferRule": {
                "minBufferLength": 2
            },
            "DroppedFramesRule": {
                "downSwitchByOne": 10,
                "downSwitchByTwo": 20,
                "downSwitchToZero": 24
            },
            "InsufficientBandwidthRule": {
                "bitrateMultiplier": 1.15
            }
        }
    },
});

Configuration

The plugin accepts several optional configuration options, such as:

swfPath (default //cdn.jsdelivr.net/clappr.rtmp/latest/assets/RTMP.swf) - Path to the SWF responsible for the playback.
scaling (default letterbox) - Scaling behavior.
playbackType (default live if the source contains live on its URL, vod otherwise).
bufferTime (default 0.1) - How long to buffer before start playing the media.
startLevel (default -1) - Initial quality level index.
autoSwitch (default false) - Whether video should autoSwitch quality
useAppInstance (default false) - Set it to true if your source url contains the app instance (not required if the app instance is _definst_).
proxyType (default none) - Determines which fallback methods are tried if an initial connection attempt to Flash Media Server fails.
switchRules (default system defined) - Rules defined to autoSwitch video quality based in some conditions.

Building

Requirements

Compile SWF

cd src
sh build_player.sh

Download JS dependencies

npm install

Build the final dist

webpack

clappr-rtmp-plugin's People

Contributors

Stargazers

Watchers

Forkers

7040210 cuijinquan aathi vidibus jxp4531 euanmcleod tarkanlar safercities dayvson p385579058 eventials yuyilin chenset tjenkinson hmica san-jeevan yuriyulantsev read125 sangkyunyoon mdrx-io hexray-newbee penggy wangwenchao lukasdrgon yocontra tobiasneidig petrix bikegriffith allpereira vgrid mvpleung thinklib visorgg gocode2016 virgil-n kelier biswaranjanp towerz kbaumgart shuxiaokai myjeffxie surfndez

clappr-rtmp-plugin's Issues

On firefox and IE problem scale video size to player size

When video stream size is more then 640x360 (live encoder)
on player (web page) video stream don't fill player size, video stream is like "overscan" bottom right.
Example:
stream 1280x720
player 854x480
In firefox and IE overscan bottom right.
But in Chrome fill OK?
Problem occur with rtmp plugin (hls OK)

Fix play/pause button

no controls and inifite loader on live rtmp

When i stream a rtmp live , video and audio works but in the player i have no control and its show a infinite loader : http://i.imgur.com/e9IaAgz.png

any plan to upgrade to be compatible with clappr 2.x versions?

is there any plan to update this plugin so it can work with the latest 2.x Clappr?
I'm implementing something that can toggle between rtmp and other supported feeds. so I'd like to just use one version of Clappr instead of having to default back to 1.3.x clappr when toggling to RTMP feeds.

Implement volume handling

Cannot find module 'flash' + RTMP is not defined

Hello,

everytime i load the rtmp-plugin and trying to show rtmp stream, firebug console shows me an error and JS fails to load clappr player:

Error:

Error: Cannot find module 'flash'
...eturn h(a,!0);if(i)return i(a,!0);var l=new Error("Cannot find module '"+a+"'");...
rtmp.min.js (Row 1, Column 147)

ReferenceError: RTMP is not defined
plugins: {'playback': [RTMP]}

in <head>:

<script type="text/javascript" src="http://cdn.clappr.io/latest/clappr.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/clappr.rtmp/latest/rtmp.min.js"></script>

in Clappr Player config:

    var player = new Clappr.Player({
        source: 'rtmp://127.0.0.1/live/channel_1.stream',
        parentId: "#player",
        loop: true,
        autoPlay: false,
        width: w,
        height: h,
        hideMediaControl: false,
        chromeless: true,
        plugins: {'playback': [RTMP]}
    });

do i something wrong?

Player live stream work only browser Chrome

Hello,

my player live stream work only in google chrome, is possible I mistake?

Another question: is possible add current time and google analytics for this player ?

Thanks for any help!

Passing Parameters to RTMP.swf

Hello,

Flash newbie here.
I am trying to load a the RTMP.swf file in a browser and pass some parameters.
It is posible to play a RTMP video like this?
http://domain.tld/dist/assets/RTMP.swf?source=rtmp://domain.tld/live/livestream&bgcolor=#ff6600

Thank you!

need help

need help my code is here and show screen loding

error during loading the clappr rtmp plugin

while loading the plugin in chrome, the rtmp-plugin throws an error as below:

Uncaught Error: Cannot find module 'underscore' clappr.min.js:1a clappr.min.js:1i rtmp.min.js:1(anonymous function) rtmp.min.js:1underscore rtmp.min.js:1i rtmp.min.js:1(anonymous function) rtmp.min.js:1../jst rtmp.min.js:2i rtmp.min.js:1(anonymous function) rtmp.min.js:1./src/main rtmp.min.js:1i rtmp.min.js:1t rtmp.min.js:1(anonymous function) rtmp.min.js:1

Window resize issue. Player stopped working

when window is resized video stops streaming and the console shows the following error when trying to access play/pause controls.

Uncaught Error: Error: An invalid exception was thrown.
at RTMP.pause (clappr.js:12997)
at Container.pause (clappr.js:5386)
at MediaControl.togglePlayPause (clappr.js:6142)
at HTMLDivElement.l (clappr.js:3532)
at HTMLDivElement.s.proxy (clappr.js:3532)

Thanks

Display poster after playback is finished

Is there any way to display the poster when the playback ends? As it is now, when the playback finishes either the image video gets frozen (as there's no more video to play) or I get the 'buffering' animation. I do have an open websocket and receive a signal when the live-stream finishes, maybe expose a stop() / poster() / whatever to stop playback and display the poster again?

Also the readme.md says "scaling (default letterbox) - Path to the SWF responsible for the playback."

Restart rtmp player on an interval

Hi,
I'm trying to create a listener function for a RTMP live stream, so when it identifies CONTAINER_ENDED (or any drop event in stream) state, it will automatically try to reconnect to the stream and play it every 5 seconds.

Any ideas on how to achieve this efficiently?

BR, Yaron

Add support for Adaptive Streaming

http://refcardz.dzone.com/refcardz/getting-started-web-video

autoPlay is not working

Uncaught Error: Cannot find module 'flash'

Error in rtmp.min.js
Browser: Chrome 44
Pepper Flash is disabled (built-in 'click to flash'), but is installed. In other players I see gray block with text "Press Ctrl+Click to enable Flash module", but in this case Clappr with RTMP-module crashes. Native Clappr (w/out RTMP plugin) works fine.

need help for setup simple pre-roll ads ,with Clappr video player

Hi!, I am trying to setup simple pre-roll video or vast feed pre roll before the video start using clappr video player.i have tried,many times..but any of attempts not succeed.so,i am looking help from you.
Kindly regards!,
Sam

some thing similar to this:

<script>
Clappr('example_video_1', {}, function(){ 
  var player = this;
  player.preroll({
    src:"advertisement.mp4"
  });
});
</script>

sample link: https://github.com/dirkjanm/videojs-preroll

Volume mute

Muting volume by tapping speaker doesn't change anything.

HLS fallback when RTMP is blocked

Hi, I'm trying to setup an HLS fallback in case where RTMP session is blocked by FW.
here is my code:
var options = {
sources: ["rtmp://live.you.tv/live/3","http://live.you.tv/live/3/index.m3u8"],
parentId: "#playerrtmp",
autoPlay: true,
width: "100%",
height: "100%",
rtmpConfig: {
swfPath: 'dist/assets/RTMP.swf',
scaling:'stretch',
playbackType: 'live',
bufferTime: 1,
startLevel: 0
},
plugins: [RTMP]
};
var player = new Clappr.Player(options);

When RTMP identifies a blocked session, it prompts:

Sun Nov 27 2016 02:27:59 PM.486 [INFO] [RTMP] MediaPlayer error: [Event type="mediaError" bubbles=false cancelable=false eventPhase=2]

but doesn't switch to the HLS path, which is also avaliable.

Any ideas how to address this issue?
BR, Yaron

Letterbox+pillarbox on IE10

media controls don't work.

Following the example on the README, my RTMP video source loads fine with no issues. However the controls don't work. Play button, volume mute, click/drag volume sections, or tracking are affected. Full screen toggle works.

Any idea what could be causing this issue? Thanks.

Live stream displayed in right end and getting cut off

Here is a screenshot:
http://i.imgur.com/gZMd0WO.png

The top one is a live stream using video.js, the bottom one is using clappr - rtmp plugin from here: http://flv.io/rtmp-plugin.html

RTMP logging error

Clapper player : 0.2.58
rtmp version : 0.13

log.js:67[error][t] error on event o13:progress trigger - TypeError: this.el.getBytesLoaded is not a function(…)
log.js:67[error][t] error on event o13:progress trigger - TypeError: this.el.getBytesLoaded is not a function(…)
log.js:67[error][t] error on event o13:progress trigger - TypeError: this.el.getBytesLoaded is not a function(…)
log.js:67[error][t] error on event o13:progress trigger - TypeError: this.el.getBytesLoaded is not a function(…)
log.js:67[error][t] error on event o13:progress trigger - TypeError: this.el.getBytesLoaded is not a function(…)
log.js:67[error][t] error on event o13:progress trigger - TypeError: this.el.getBytesLoaded is not a function(…)
...

The video is playing fine but i keep getting these logs

Scaling incorrectly

x/post clappr/clappr#446

How to use the rtmp-plugin

I am a little confused. I try like this

Add support for HDS

Plugin is not working with latest Clappr version

cc @vix-simplex

getting error when using `jspm`

Uncaught Error: Cannot find module 'flash'

I installed it with jspm install github:clappr/clappr-plugin-rtmp

and I import it with import 'clappr/clappr-plugin-rtmp'; which seems to work but the chrome console is saying it can't find flash. Mostly likely its var flash = require('flash') causing the issue

import 'clappr';
import 'clappr/clappr-rtmp-plugin';

error with the latest version of Clappr

I got this error with the latest version of Clappr. Older version working properly
[error][t] error on event o5:progress trigger - TypeError: this.el.getBytesLoaded is not a function at t.n.progress.value (http://localhost:3333/dist/clappr.min.js:3:15261) at h (http://localhost:3333/dist/clappr.min.js:5:28729) at t.n.trigger.value (http://localhost:3333/dist/clappr.min.js:5:28003) at Function.o.trigger (http://localhost:3333/dist/clappr.min.js:6:5518) at <anonymous>:1:38

Discover if source is VoD or Live

Plugin is dispatching buffering event when it ends the playback of VoD video

autoPlay is not working

Handling offline stream

Is it possible (if not, can it be made possible) to attach an event to clappr that fires when the RTMP stream starts sending and another event when the stream stops streaming.

I want to hide Clappr when the stream is offline and show a "Please Stand By" graphic/video loop. I've seen sample code that uses ajax to determine if the feed is active, but that only works when the stream is on the same domain and I'm not sure I can do that in this instance.

setupFirefox error on firefox browser.

this.setupFirefox is not a function

please check,thanks.

Buffering lenght

Hi guys, thank you for nice plugin for nice player. Could you please explain how could I set buffering size or rtmp stream.

Thank you

Black screen, I need a help.

My player is black screen. My adobe flash player is activated on browser.

I try my stream live on: IE, Mozilla, Crome, don't work.

<head>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/clappr.rtmp/0.0.6/rtmp.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="http://cdn.clappr.io/latest/clappr.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="probe/clappr/dist/rtmp.js"></script>
    <title>RTMP Test Page</title>
</head>
<body>
<div id="player"></div>
  <script>
    window.onload = function() {
      var player = new Clappr.Player({
        source: 'rtmp://tviza.com:1935/live', 
        parentId: "#player",
        autoPlay: true,
        plugins: {'playback': [RTMP]},
        gaTrackerName: 'MyPlayerInstance',
    mediacontrol: {seekbar: "#E113D3", buttons: "#66B2FF"}
      });
    }
  </script>
</body>

What I'm wrong?

Thanks in advance for any help!

Set bufferTime on live streams

on ready event not firing when playing RTMP

How to fix this? Is there any hotfix or patch?

player[parentId] = new Clappr.Player({
   source: videoURL,
   parentId: '#'+parentId,
   plugins: {'playback': [RTMP]},
   rtmpConfig: {
        swfPath: 'RTMP.swf',
        scaling:'stretch',
        playbackType: 'live',
        bufferTime: 1,
        startLevel: 0,
   },
   autoPlay: true,
   events: {
      onReady: onReady
   },
   width: '100%',
   height: '10%'
});

function onReady(){
    console.log('ready');
}

Facebook live streams not working

I've found two issues while trying to view Fabecook live streams.
The first one is that rtmps streams are not being recognised as supported because the code just looks for rtmp:// (easy one to solve).

The second issue is the real one: Facebook rtmps streams are not playing. The source is correctly sent to Flash but then nothing shows up (just black screen). Have a look with this stream (available for another 3 hours.):

rtmps://edgetee.xx.fbcdn.net:443/live-md/1282731655104706?api=1&s_p=1&o=lla2&a=AfDrx0WuwBQbFnDh

The stream works with both rtmpdump and this test player.

Be compatible with ClapprLevelSelector

We just need to follow https://github.com/clappr/clappr-level-selector-plugin#compatibility

Problem switching quality

The problem occurs with the switching version , the first time a change is made ,
another has not only changes the label , but the quality is not affected.

I use clappr-rtmp-plugin and clappr-level-selector-plugin.

Calling pause on a live video means we can't resume the video

Although pause can't be called when in live mode through clappr, I need to be able to do this with the rtmp-hls-plugin. However the issue seems to be that it doesn't actually resume when called. I've dug up a few issues around the internet explaining this but none of them seem to have a resolution :-)

Anyone have any ideas?
Thanks

Plugin is not working with any clappr release

I was using release 13 which was compatible with clappr 2.58.
It stopped working from one day.
I tried with the latest version also its not working.
Here is the code


<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="player"></div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/clappr/latest/clappr.min.js"></script>
        <script type="text/javascript" src="rtmp.min.js"></script>
        <script>
            var player = new Clappr.Player({
                source: "rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov",
                parentId: "#player",
                autoPlay: true,
                plugins: {'playback': [RTMP]},
                rtmpConfig: {
                    swfPath: 'assets/RTMP.swf',
                    scaling:'stretch',
                    playbackType: 'live',
                    bufferTime: 1,
                    startLevel: 0,
                }
            })
        </script>
    </body>
</html>

Adds isReady property

Clappr just released a new version which adds isReady property to all playbacks.

Timestamp for live broadcast

It will be great to show the timestamp [duration since the broadcast started] for live broadcasts

How to fallback to another plugin?

I want to have playback primarily with rtmp, and in case of failure (mobiles) play hls. This is because live hls at this moment sucks for multiple reasons, so I'd rather use flash and only use hls when strictly necessary

Volume display not being initialized

OnClick event not firing when using rtmp plugin

Clappr version : 0.2.58
RTMP version : 0.13
The click event works for HLS, normal video playbacks, but when using RTMP, it is not firing.

player.listenTo(
    player[parentId].core.getCurrentContainer(),
    Clappr.Events.CONTAINER_CLICK,
    function(ev, data) {
        console.log('clicked on '+ parentId);
    }
)

Not able to play rtmp from AWS Cloudfront RTMP distribution

I can reproduce with no problem here on the their debug player: http://d1k5ny0m6d4zlj.cloudfront.net/diag/CFStreamingDiag.html

My setup is ok, cause it works fine when playing rtmp from nginx server.
I also can play the RTMP vod file from wowza flash player:
https://www.wowza.com/testplayers

host: rtmp://rtmp.conanewborn.com.br:1935/cfx/st
file/stream: entrada

My player setup:

Does anybody knows if that is a limitation or bug? Any tip?
Thanks

video-dev / clappr-rtmp-plugin Goto Github PK

clappr-rtmp-plugin's Introduction

clappr-rtmp-plugin

How to use

Configuration

Building

Requirements

Compile SWF

Download JS dependencies

Build the final dist

clappr-rtmp-plugin's People

Contributors

Stargazers

Watchers

Forkers

clappr-rtmp-plugin's Issues

Recommend Projects

Recommend Topics

Recommend Org