web-dev-qa-db-fra.com

Comment jouer au flux en direct rtmp en utilisant videojs?

J'utilise OBS pour diffuser le flux en direct sur mon serveur rtmp local (node-rtsp-rtmp-server), .__ et il fonctionne bien avec le lecteur multimédia VLC . videojs trouvé . Il n'a pas fonctionné et renvoie Le type "attribut" spécifié "rtmp/mp4" n'est pas pris en charge. il semble que mon serveur rtmp n’ait reçu aucune requête de cette page Web ... donc ce que j’ai manqué? voici mon 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>
video.jslive-streaming
7
Natsu
<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>

Le paramètre techorder de configuration des données semble être nécessaire pour que videojs utilise Flash. 

Si cela ne fonctionne pas, assurez-vous que vos fichiers javascript sont corrects. A partir de la version 6 de video.js, il ne supporte plus le flash par défaut. https://docs.videojs.com/tutorial-faq.html#q-how-can-i-play-rtmp-video-in-videojs

J'utilise nginx pour mon serveur. 

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

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

Si vous préférez utiliser un CDN pour les fichiers video.js et video-js.css, remplacez la tête par

<!--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>

Remarque: Il est préférable de passer plus de temps à apprendre HLS ou DASH qu'à flash

4
SuiriuS

Pour publier un flux depuis un serveur RTMP sur une page Web, vous avez 2 options:

  1. intégrer le flux RTMP dans un lecteur Flash (Strobe, JwPlayer, FlowPlayer)
  2. diffuser le flux au format HTML5 (HLS ou MPEG DASH) à l'aide d'un serveur de diffusion prenant en charge ce type de moteur comme Wowza Streaming Engine; cela peut aussi nécessiter un transcodage si votre flux n’est pas déjà encodé avec H264 et AAC
1
TopReseller

Les navigateurs ne supportent pas RTMP. La seule façon de se connecter aux flux RTMP dans le navigateur consiste à utiliser Flash.

Pensez à utiliser un protocole de distribution plus compatible, tel que DASH, pris en charge par Media Source Extensions.

0
Brad