RTMP Support for video and audio

[moinmail]

I tryied to use your example for RTMP but i am unable to make it work for me. below is the code i was using:-

Please help me out to make it work if possible.

if you have any example to work with RTMP with mediaelement the please share it with me.

thanks in advance.
Moin

[jmrkll]

Try it with a source tag like this:
<source src="rtmp://your.server.com/vod/subfolder/mp4:streamname.m4v" type="video/mp4" />

This works for me using a Wowza 2 server.

Good Luck!
Johannes

[leolucas]

The current code cannot play a RTMP video file when the video file is in a subfolder on the server. For example, the URL rtmp://your.server.com/vod/subfolder/flv:subfolder/streamname.flv will not be played. But, rtmp://your.server.com/vod/subfolder/flv:streamname.flv will be played.

[jeremyharris]

I confirmed that it won't play if within a subfolder. The problem lies in all of the url manipulation not passing proper urls when creating the connection and playing in src/flash/htmlelements/VideoElement.as (I'd link to line numbers but github isn't parsing the code right).

For example:

_currentUrl = 'rtmp://some.cloudfront.net/cfx/st/mp4:path/to/movie.mp4';
// when connecting in `load()`
if (_isRTMP) {
    _connection.connect(_currentUrl.replace(/\/[^\/]+$/,"/"));
    // yields: rtmp://some.cloudfront.net/cfx/st/mp4:path/to/
    // should be: rtmp://some.cloudfront.net/cfx/st
} else {
    _connection.connect(null);
}

// Then, in `play()`
if (_isRTMP) {
    _stream.play(_currentUrl.split("/").pop());
    // yields: movie.mp4
    // should be: mp4:path/to/movie.mp4
} else {
    _stream.play(_currentUrl);
}

Both of these problems cause the video not to load, because first the connection isn't valid and even if it was, movie.mp4 isn't the filename to be played.

The url I used in the example is pretty common but very hard to parse what the streamer is as opposed to what the actual filepath is. If the mp4: prefix was ever left out then there's virtually no way to parse it. I imagine that's why many players require you to define the streamer (passed as a flashvar) yourself. It would take some <source> tag magic away though.

I'd help out but I don't have Flash available :/

[cgrube]

I am dealing with this problem as well and it may indeed be a showstopper for us. Basically we are streaming RTMP via FMS. We are dynamically generating MP4 videos on the server and storing them in dynamically generated sub directories of the FMS application instance.

We are then dynamically generating the RTMP URLs of the proper format . . .

rtmp://someserver/video/definst/mp4:/data/some_vid.mp4

We have two separate web applications each using different players. Our custom flash player plays back the RTMP URL above no problem. The Media Elements flash fallback player chokes on this URL. I can see the request in the FMS access logs and the application instance name is all wrong (it is "definst/mp4:/data").

This appears to corroborate the parsing problem that jeremyharris points out above. If I move the video to the "root" directory of the application instance, Media Elements plays it back fine, for example,

rtmp://someserver/video/definst/mp4:some_vid.mp4

Anyone know if a fix has been release or if there is a known workaround? I really don't want to hack into VideoElement.as like Jeremy is suggesting.

[jeremyharris]

@cgrube I'm not sure the author knew that this was a problem based on other threads. I just discovered that this was the cause today, so we'll probably have to wait until John has some time to work on it. That is unless you want to fork and submit a PR which I'm sure @johndyer would love.

The real question is how to implement a fix.

If you added a streamer key to the JS options when you set it up, you could then strip the streamer from the source url and you'd end up with a valid url:

jQuery('video').mediaelementplayer({
    streamer: 'some.cloudfront.net/cfx/st'
});

Then the AS class would use that key to create the connection, then strip it out when it goes to play. Something like this:

// in `load()`
_connection.connect(_streamer);
// in `play()`
_stream.play(_currentUrl.replace('rtmp://'+_streamer, ''));

Another option would be to support a data-mediaelement-streamer attribute on the <source> tags so it could be a little more "magical" and entirely remain in the markup. Just some thoughts.

[johndyer]

Sounds like a good change to me. It could definitely be an option and then the URL would be in the <source> element. Any one have some URLs I can test? Or, better yet a fork I can just integrate?

[jeremyharris]

Sure do! The videos contain religious content. I'm not sure why I feel I have to note this, but we live in a sensitive world :)

This one doesn't work with the current code:
rtmp://s3etkigca2rtc6.cloudfront.net/cfx/st/mp4:huntingtonbeach/files/2012/09/20120909_huntingtonbeach_message.mp4
This one does:
rtmp://s3etkigca2rtc6.cloudfront.net/cfx/st/mp4:20120909_huntingtonbeach_message.mp4

Excluding the mp4: prefix should still work, but I suppose that'll be completely up to the user by the time this change makes it in.

Thanks for your help John! If you can't get to it by Monday I should have access to Flash by then and will be able to fork and PR. Are you thinking the data- attribute or the streamer key in the options?

[johndyer]

Does this update solve your issue: #574

[jeremyharris]

Hmm I can't tell just by looking because the diff is has so many whitespace/line ending changes. From the looks of it though he expects a file extension prefix (https://github.com/pansapien/mediaelement/commit/a4154854a780ae2dcc611816984c873206895f2b#L1R449) and also still assumes the file name is just everything following the last / which will still break with subfolders.

I'll apply it on Monday and check it out. If it doesn't work I'll fork and submit a patch sometime Monday. I'll have access to Flash by then so I'll be able to properly test.

There's unfortunately no way to "parse" an RTMP url because it doesn't have to have the extension prefix (mp4:). This is why I think it's necessary to define a streamer, which I'll add in my patch.

[cgrube]

Thanks John, Jeremy and pansapien, it looks like, at least in initial testing, the pull request does address my specific issue with MP4s in subdirs.

I hope to do some additional and more thorough testing over the next couple of days and I will try to report back here when I am done.

[jeremyharris]

How about a url without the prefix, like: rtmp://s3etkigca2rtc6.cloudfront.net/cfx/st/huntingtonbeach/files/2012/09/20120909_huntingtonbeach_message.mp4

Both are acceptable AFAIK though the prefix is preferred.

[areichman]

While people are digging in to RTMP support, I'm trying to connect to live streams (as opposed to archived files) and haven't had any luck. Has anyone else had success with these types of streams?

All of the examples I've seen require the 'streamer' and 'file' flashvars to be set, and I haven't found a way to make MEJS add those correctly. Example traffic camera from Maryland's website:

streamer:
rtmp://170.93.143.150/rtplive/000109f6004b00a6004af03676235daa

file:
000109f6004b00a6004af03676235daa

If you want to view this wrapped in a webpage:
http://www.chart.state.md.us/video/video.asp?feed=000109f6004b00a6004af03676235daa

[jeremyharris]

Okay, so I take back my previous comment. The prefix is indeed required except for flv files. I figure using FLVs with mediaelement.js is an edge case (could be wrong), so guessing the streamer based on the mp4: prefix would work.

@johndyer I think #574 will work for everything except for non-prefixed flv files. Please merge when you have a moment :D

[chrismjones]

We are having the same subfolder issue, but with audio. Using pansapien's patch mp4's work fine. I don't know a thing about flash, so does anyone know of any patches designed to get rtmp audio with subfolders to work? Or does pansapien's patch account for those and I have something screwed up on my end?

[jeremyharris]

@chrismjones Unfortunately @Pansapien's patch only applies to video. Some copying and pasting (or some class extending putting parseRTMP on a class to be extended by both the video and audio elements) would fix this. The classes could probably benefit from a bit of abstraction but that could take some work.

I wish I still owned a copy of Flash so that I could contribute. Le sigh.

[sapientpants]

@jeremyharris I really just hacked a slight improvement onto the existing code to meet my immediate needs. I think you're right though, there needs to be a better structure to handle RTMP properly.

If it makes sense to refactor this, one other useful feature would be to try to fallback from rtmp -> rtmpt (and rtmpe -> rtmpte) for good performance by default, but not breaking when the viewer isn't able to connect on the default RTMP port (e.g. the viewer is behind a corporate firewall).

[cgrube]

@Pansapien You seemed to indicate in the pull request that your change supports MP3 over RTMP. Is that right? I am not able to get that working at all (regardless of location of MP3) while progressive download of the same physical file works. (See my longer post at #574)

[jeremyharris]

@cgrube It does not, as per my comment before this one.

[sapientpants]

@cgrube It doesn't currently work with MP3s. It's likely I overlooked something in the case of MP3s as I didn't have a need for them at the time.

[ghost]

I have been reading this long discussion about RTMP w subfolder, as I was using video.js until then and I need to have RTMP support ... so at this point what is the current code to be used ? ( giving I download it to day and start using tomorrow) is it already modified or do I need to patch it ?
my RTMP urls look like thsi :
rtmp://mywowzaserver:1935/vod/definst/myfolder/mp4:my_video.mp4

thanks for feedback

[johndyer]

I've added a flashStreamer option so you can do something like

<video class="mejs-player" data-mejsoptions='{flashStreamer:"rtmp://170.93.143.150/rtplive/000109f6004b00a6004af03676235daa"}'>
     <source src="000109f6004b00a6004af03676235daa" type="video/rtmp">
</video>

or

<video>
     <source src="000109f6004b00a6004af03676235daa" type="video/rtmp">
</video>
<script>
$('video').mediaelementplayer({flashStreamer:"rtmp://170.93.143.150/rtplive/000109f6004b00a6004af03676235daa"});
</script>

[ghost]

thanks a lot ... got it

[areichman]

Is there a reason the flashStreamer option is a data-attribute on the video element itself, as opposed to just on the source element that defines the video/rtmp option?

[johndyer]

I agree that makes more sense, but it would have required a lot more
rearchitecting to parse attributes on the <source> tag.

[jeremyharris]

Awesome, thanks for the hard work John and everyone :D

[simahawk]

Hi @johndyer, I'm trying to have a rtmp streaming working. I have almost the same code you pointed out:

<html>
  <head>
    <script src="me/build/jquery.js"></script>
    <script src="me/build/mediaelement-and-player.js"></script>
    <link rel="stylesheet" href="me/build/mediaelementplayer.min.css" /></code>
  </head>
  <body>

<video>
     <source src="000109f6004b00a6004af03676235daa" type="video/rtmp">
</video>
<script>
$('video').mediaelementplayer({flashStreamer:"rtmp://thinkbuntu:1935/flvplayback/000109f6004b00a6004af03676235daa"});
</script>

  </body>
</html>

Whereas 'rtmp://thinkbuntu:1935/flvplayback' is the URL of a local rtmpserver and '000109f6004b00a6004af03676235daa' is a mp4 video. I know that the local server is working because using jwplayer I can play the video properly. Using flv, webm, ogv do not work neither.

I get this error in Firefox (no error at all in Chrome):
Specified "type" attribute of "video/rtmp" is not supported. Load of media resource 000109f6004b00a6004af03676235daa failed.

Configuring it via json attribute fails in the same way.

I also tried this approach http://stackoverflow.com/questions/9113633/replacing-media-source-http-with-rtmp-in-mediaelementsjs-based-on-browser-capa but it fails too.

Am I doing something wrong?

[gregfr]

From what I've tested the "flashStreamer" of "data-mejsoptions" is simply ignored.

#1186

[cristiboariu]

@johndyer Do you have an updated example of playing audio with rtmp flash streaming? I am not able to make it work in any way....

[ronakprogrammer]

I also tried live rtmp streaming with mediaelement but not working any way.Getting this error message "Specified "type" attribute of "video/rtmp" is not supported. Load of media resource test failed".

[campones]

in my case I could easily connect to my rtmp server, and seek through the video, but only audio was being played.. weird. Had to give up with mediaelement