How to play rtmp live stream using videojs？

Question

I'm using OBS to push live stream to my local rtmp server(node-rtsp-rtmp-server), and it works well with VLC media player. I just want to put it into a webpage and i found videojs. It didnt work and returns Specified “type”-attribute “rtmp/mp4” is not supported. it seems my rtmp server didnt reveive any requests from this webpage. So what i missed? here is my code:

<head>
    <meta charset="utf-8">
    <link href="./video-js-6.0.0/video-js.css" rel="stylesheet">
    <script src="./video-js-6.0.0/video.js"></script>
    <script src="./video-js-6.0.0/videojs-flash.min.js"></script>
    <script>
        videojs.options.flash.swf = "./video-js-6.0.0/video-js.swf"
    </script>
</head>
<body>
   <video  id='vid' class='video-js' controls height=300 width=600>
      <source src="rtmp://127.0.0.1:1935/live/pokemon" type="rtmp/mp4"/>
    </video>
    <script>
        var player = videojs('vid');
    </script>
</body>

I'm stuck with the same issue. Apparently videojs does not have a flash player anymore from version 6.0, and this means it can't play RTMP (because there is no way to open a RTMP without sockets, and there are no sockets without plugins) — pqnet, Jul 17 '17 at 15:50

score 6 · Answer 1 · answered Apr 10 '17 at 13:27

6

To publish a stream from a RTMP server to a web page, you have 2 options:

embed RTMP stream in a Flash player (Strobe, JwPlayer, FlowPlayer)
deliver stream in a HTML5 format (HLS or MPEG DASH) using a streaming server that supports that like Wowza Streaming Engine; this may also require transcoding if your stream is not already encoded with H264 and AAC

answered Apr 10 '17 at 13:27

TopReseller

623
4
6

1

A new option is not available in HTML5 browsers (including mobile): WebRTC. Try it live on https://videonow.live or deploy https://broadcastlivevideo.com solution (free to download). RTMP to WebRTC involves some transcoding, at least for audio (WebRTC requires Opus) and Wowza SE to handle the multiple stream types. – TopReseller Sep 20 '19 at 16:41

SuiriuS · Answer 2 · 2018-06-06T18:29:26.440

<html>
<head>
  <title> Stream Player </title>
  <link href="video-js.css" rel="stylesheet" type="text/css">
  <script src="video.js"></script>
  <script>videojs.options.flash.swf = "video-js.swf";</script>
</head>
<body>
 <center>
   <video 
     id="livestream" 
     class="video-js vjs-default-skin vjs-big-play-centered"
     controls 
     autoplay
     preload="auto" 
     data-setup='{"techorder" : ["flash","html5] }'>
     <source src="rtmp://127.0.0.1:1935/live/test" type="rtmp/mp4">
   </video>
 </center>
</body>
</html>

The data-setup techorder parameter seems to be necessary for videojs to use flash.

If that doesn't work then make sure that your javascript files are all good. As of version 6 of video.js it no longer supports flash by default. https://docs.videojs.com/tutorial-faq.html#q-how-can-i-play-rtmp-video-in-videojs

I am using nginx for my server.

https://obsproject.com/forum/resources/how-to-set-up-your-own-private-rtmp-server-using-nginx.50/

https://github.com/arut/nginx-rtmp-module

If you would rather use a CDN for the video.js and video-js.css files replace the head with

<!--The latest versions of video.js no longer support flash or rtmp-->
<link href="https://vjs.zencdn.net/5.19/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/5.19/video.js"></script>

Note: Your time is better spent learning HLS or DASH rather than flash

But iOS Safari browser does not have Flash, how can we play rtmp on iOS device? — Zhang Buzz, Dec 27 '19 at 02:24

score 3 · Answer 3 · answered Apr 09 '17 at 22:27

3

Browsers don't support RTMP. The only way to connect to RTMP streams in-browser is to use Flash.

Consider using a more compatible distribution protocol, such as DASH, which is supported with Media Source Extensions.

answered Apr 09 '17 at 22:27

Brad

159,648
54
349
530

1

@Finesse Please note the part of the answer that mentions MediaSource Extensions. https://caniuse.com/#feat=mediasource https://dashif.org/dash.js/ – Brad Apr 16 '19 at 14:16

score 0 · Answer 4 · answered Sep 22 '17 at 04:12

0

If it works when using vlc media player, it means your rtmp server is ok. You have to check whether the browser support flash or not. Since we realized that latest versions of chrome and Firefox automatically block flash by default. We were able to fix the issue by simply allowing flash on website. There was nothing wrong with video.js and videojs-flash. Plz refer to the attached screenshot.

answered Sep 22 '17 at 04:12

Qijin

307
2
13

While this answer doesn't actually help site owners (because users aren't expected to know that they're supposed to grant special permissions to your site -- and asking for such special permission is skeevy), this is a somewhat helpful answer, in that the root of the problem being faced here is that modern browsers simply don't trust Flash content (with good reason). – Ghedipunk Mar 07 '18 at 04:51
Not only that, but I have noted that even enabling flash on Chrome doesn't make it actually work. Chrome actually acts like the flash plugin isn't installed even if it is (I installed it twice and verified the install using chrome://components). Worse, enabling flash just adds an annoying message about it not being supported after 2020, which is irrelevant since anything needing flash keeps requesting the install of the plugin. Only Firefox seems to run flash correctly. – Factor Three Sep 15 '19 at 13:36

How to play rtmp live stream using videojs？

4 Answers4

Linked