Sur d’autres sites (5392)

• Rtsp streaming on nodejs - Blank screen

  17 juillet 2024, par theplaceofburak

  I am currently working on a Node.js project where I need to implement streaming using ffmpeg. However, I am facing an issue with the streaming process, as I am getting an empty blank screen instead of the expected video stream.

  


  Here's a brief overview of what I have done so far on the server-side :

  


  Installed ffmpeg and made sure it is accessible in the environment.
Configured the server-side code for the streaming process.
However, despite these efforts, the stream is not working correctly, and I am unable to see the video stream on the client-side.

  


  Server-side code :
app.js

  


  const express = require('express');
const Stream = require('node-rtsp-stream');

const app = express();
const port = 4000;

// Start the RTSP stream
const stream = new Stream({
  name: 'rtsp_server_name',
  streamUrl: 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4',
  wsPort: 3000,
  ffmpegOptions: {
    '-stats': '', // an option with no necessary value uses a blank string
    '-r': 30, // options with required values specify the value after the key
  },
});

stream.on('data', data => {
  console.log(data);
});

app.get('/', (req, res) => {
  res.send('Hello World');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});


  


  index.html

  


  &#xA;  &#xA;    <canvas></canvas>&#xA;  &#xA;  <h1>Test rtsp video</h1>&#xA;  <code class="echappe-js">&lt;script type=&quot;text/javascript&quot; src='http://stackoverflow.com/feeds/tag/js/jsmpeg.min.js'&gt;&lt;/script&gt;&#xA;  &lt;script type=&quot;text/javascript&quot;&gt;&amp;#xA;    player = new JSMpeg.Player(&amp;#x27;ws://localhost:3000&amp;#x27;, {&amp;#xA;      canvas: document.getElementById(&amp;#x27;canvas&amp;#x27;), // Canvas should be a canvas DOM element&amp;#xA;    });&amp;#xA;  &lt;/script&gt;&#xA;&#xA;

  


  I got no console error when I open index.html but only get blank black screen
  


  


• error of streaming video using fluent-ffmpeg node.js module

  23 mai 2013, par user824624

  I am running the fluent-ffmpeg sample to stream the video, which works well. Now in contract show the video in flashe version based flowplayer, I am now using html5 version flowplayer, but it said the video file not found.

  app.get('/video2/abc', function(req, res) {
  
  
  
    console.log('/video/:filename');
  
    res.contentType('mp4');
  
    var pathToMovie = 'public/flowplayer/470x250.mp4' ; 
  
    var proc = new ffmpeg({ source: pathToMovie, nolog: true })
  
      .writeToStream(res, function(retcode, error){
  
        if(error) console.error('error',error); 
  
        else console.log('file has been converted succesfully');
  
      });
  
  });

  here is my html template.

      
  
          
  
          <code class="echappe-js">&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js&quot;&gt; &lt;/script&gt;
          
  &lt;script src=&quot;http://releases.flowplayer.org/5.4.0/flowplayer.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;<br />
  
     // global configuration (optional)<br />
  
     flowplayer.conf = {<br />
  
        rtmp: &quot;rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st&quot;,<br />
  
        swf: &quot;http://releases.flowplayer.org/5.4.0/flowplayer.swf&quot;<br />
  
     };<br />
  
  <br />
  
     // force flash with query - only for testing, do not use this switch in production!<br />
  
     if (/flash/.test(location.search)) flowplayer.conf.engine = &quot;flash&quot;;<br />
  
  <br />
  
     // install player manually<br />
  
     $(function() {<br />
  
        $(&quot;.player&quot;).flowplayer({<br />
  
           // reverse fraction of video aspect ratio<br />
  
           // video dimensions: 470px / 250px<br />
  
           ratio: 25/47<br />
  
        });<br />
  
     });<br />
  
  &lt;/script&gt;
      
  
          
      
  

• Building a livestream page where the user will input an rtsp streaming source through an ip address

  7 décembre 2020, par Antax Md

  I am building a livestream page where the streaming source is streamed through rtsp. Currently, I am using ffmpeg to convert the incoming rtsp stream to a .m3u8 file and it is played back on the webpage through HLS.

  


  The problem i am trying to solve now, is loading an rtsp stream based on the user's input. How do i go about solving this ? It is a requirement to able to view the stream on iOS and android.
The ffmpeg command :

  


  ffmpeg -i "rtsp://10.193.79.185:5554" -hls_time 3 -hls_wrap 10 "C:\wamp64\www\hls\output.m3u8"


  


  Code of what I have at the moment that loads a hard coded rtsp stream

  


  &#xA;&#xA;  &#xA;      <code class="echappe-js">&lt;script src=&quot;https://cdn.jsdelivr.net/npm/hls.js@latest&quot;&gt;&lt;/script&gt;&#xA;      &#xA;          
  RTSP Stream
  &#xA;                &#xA;                &#xA;
  Start
  &#xA;                &#xA;
  
  &#xA;      &#xA;&#xA;      &lt;script&gt;&amp;#xA;        if(Hls.isSupported()) &amp;#xA;        {&amp;#xA;            var video = document.getElementById(&amp;#x27;video&amp;#x27;);&amp;#xA;            var mystring = &quot;http://192.168.43.79/hls/output.m3u8&quot;;&amp;#xA;            var hls = new Hls({&amp;#xA;              debug: true&amp;#xA;            });&amp;#xA;            hls.loadSource(mystring);&amp;#xA;            hls.attachMedia(video);&amp;#xA;            hls.on(Hls.Events.MEDIA_ATTACHED, function() {&amp;#xA;            video.muted = true;&amp;#xA;            video.play();&amp;#xA;        });&amp;#xA;        }&amp;#xA;        // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.&amp;#xA;        // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.&amp;#xA;        // This is using the built-in support of the plain video element, without using hls.js.&amp;#xA;        else if (video.canPlayType(&amp;#x27;application/vnd.apple.mpegurl&amp;#x27;)) {&amp;#xA;            video.src = &amp;#x27;http://192.168.43.79/hls/output.m3u8&amp;#x27;;&amp;#xA;            video.addEventListener(&amp;#x27;canplay&amp;#x27;,function() {&amp;#xA;            video.play();&amp;#xA;          });&amp;#xA;        }&amp;#xA;      &lt;/script&gt;&#xA;  &#xA;&#xA;