Recherche avancée

Sur d’autres sites (6547)

• ffmpeg + socket.io -> MediaSource video stops after few seconds

  25 avril 2015, par Dmitry S.

  I am trying to transcode a video using ffmpeg and pipe the output through socket.io to client page which appends the data to MediaSource buffer to play. Video starts playing but suddenly stops after a few seconds.
  I assume that ffmpeg throughput is less than real-time which cause the issue. What might be a better way of handling slow streams to play the video ? Some pre-loading could happen, but is it possible to use along with MediaSource ?

  var app = require('http').createServer(handler)
  
  var io = require('socket.io')(app);
  
  var fs = require('fs');
  
  var child = require('child_process');
  
  var util = require('util');
  
  
  
  var args = ['-i', 'pipe:0', '-c:v', 'libvpx', '-b:v', '300k', '-quality', 'good', '-vf', 'scale=640:-2',
  
    '-c:a', 'libvorbis', '-b:a', '128000', '-threads', '0', '-r', '25', '-rc_lookahead', '25', '-f', 'webm',
  
    '-me_method', 'zero', '-flags2', 'fast', '-preset', 'ultrafast', '-analyzeduration', '1000', 'pipe:1'
  
  ];
  
  
  
  app.listen(8080);
  
  
  
  function handler(req, res) {
  
    fs.readFile(__dirname + '/video.html',
  
      function(err, data) {
  
        if (err) {
  
          res.writeHead(500);
  
          return res.end('Error loading video.html');
  
        }
  
  
  
        res.writeHead(200);
  
        res.end(data);
  
        console.log('html sent');
  
      });
  
  }
  
  
  
  io.on('connection', function(socket) {
  
  
  
    console.log('Connected...');
  
  
  
    var in_file = fs.createReadStream("oceans.mp4");
  
    var trans_proc = child.spawn('ffmpeg', args, null);
  
    in_file.pipe(trans_proc.stdin);
  
  
  
    trans_proc.stderr.on('data', function(data) {
  
      console.log(data.toString());
  
    });
  
  
  
    socket.on('VIDEO_STREAM_REQ', function(req) {
  
      console.log(req);
  
  
  
      trans_proc.stdout.addListener('data', function(data) {
  
        console.log(data.length);
  
        socket.emit('VS', data);
  
      });
  
  
  
    });
  
  });

    <video autoplay="autoplay"></video>
  
  
  
    <code class="echappe-js">&lt;script src=&quot;https://cdn.socket.io/socket.io-1.3.5.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;<br />
  
      window.URL = window.URL || window.webkitURL;<br />
  
  <br />
  
      window.MediaSource = window.MediaSource || window.WebKitMediaSource;<br />
  
      if (!!!window.MediaSource) {<br />
  
        alert('MediaSource API is not available');<br />
  
      }<br />
  
      console.log('MediaSource API' + window.MediaSource);<br />
  
  <br />
  
      var mediaSource = new MediaSource();<br />
  
      var video = document.getElementById('v');<br />
  
      var i = 0;<br />
  
  <br />
  
      video.src = window.URL.createObjectURL(mediaSource);<br />
  
  <br />
  
      mediaSource.addEventListener('webkitsourceopen', function(e) {<br />
  
        console.log('mediaSource readyState: ' + this.readyState);<br />
  
      }, false);<br />
  
  <br />
  
      mediaSource.addEventListener('webkitsourceended', function(e) {<br />
  
        console.log('mediaSource readyState: ' + this.readyState);<br />
  
      }, false);<br />
  
  <br />
  
      var queue = [];<br />
  
  <br />
  
      mediaSource.addEventListener('sourceopen', function(e) {<br />
  
        console.log('mediaSource readyState: ' + this.readyState);<br />
  
  <br />
  
        console.log('listener fired');<br />
  
        var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs=&quot;vorbis,vp8&quot;');<br />
  
  <br />
  
        var socket = io.connect('http://localhost:8080');<br />
  
  <br />
  
        socket.emit('VIDEO_STREAM_REQ', 'REQUEST');<br />
  
  <br />
  
        socket.on('VS', function(data) {<br />
  
          queue.push(new Uint8Array(data));<br />
  
  <br />
  
          if (queue.length &gt; 3 &amp;amp;&amp;amp; !sourceBuffer.updating)<br />
  
            sourceBuffer.appendBuffer(queue.shift());<br />
  
  <br />
  
  <br />
  
          i = i + 1;<br />
  
          console.log(queue.length);<br />
  
        });<br />
  
  <br />
  
        sourceBuffer.addEventListener('updateend', function() {<br />
  
          console.log(queue.length);<br />
  
          if (queue.length) {<br />
  
            sourceBuffer.appendBuffer(queue.shift());<br />
  
          }<br />
  
        }, false);<br />
  
  <br />
  
      });<br />
  
    &lt;/script&gt;
  

• Tesselation effect on decoded H.264 video from h264_v4l2m2m on Raspberry Pi 4

  5 août 2022, par Javier Lancha Vázquez

  Problem Summary

  


  I am trying to live-stream video from my Raspberry Pi 4 using the h264_v4l2m2m codec (HWA). At the receiving end, I am using the Broadway decoder. For lower resolutions (320x320 @ 60fps) the decoded video quality is fine. However, when I increase the resolution I start to notice a strange tessellation effect as in the following captures :

  


  Tessellation effect on higher resolution (960x960)

  


  I tried other codecs and players (mpeg1video and jsmpeg as a decoder), but at higher resolutions only the hardware accelerated H.264 reaches an acceptable frame rate. For my particular application I do not need audio.

  


  Things tried

  


  I am running the following command to launch ffmpeg on a separate process :

  


  ffmpeg -hide_banner -fflags nobuffer -f rawvideo -pixel_format yuv420p -s 960x960  \
-i tcp://127.0.0.1:15000?listen=1 -f h264 -codec:v h264_v4l2m2m -s 960x960 -profile:v 66 \
-level 4.2 -coder 0 -bf 0 -an -b:v 4M tcp://0.0.0.0:15001?listen=1


  


  I then send the H.264 NAL Units using a WebSocket.

  


  The following snippet is my adjusted example application for decoding the received frames.

  


  &#xA;&#xA;&#xA;&#xA;  &#xA;  &#xA;&#xA;&#xA;&#xA;  <h1>PiCamera H264 Streaming</h1>&#xA;  <div></div>&#xA;  <code class="echappe-js">&lt;script src='http://stackoverflow.com/feeds/tag/&amp;#38;#x27;Decoder.js&amp;#38;#x27;'&gt;&lt;/script&gt;&#xA;  &lt;script src='http://stackoverflow.com/feeds/tag/&amp;#38;#x27;YUVCanvas.js&amp;#38;#x27;'&gt;&lt;/script&gt;&#xA;  &lt;script src='http://stackoverflow.com/feeds/tag/&amp;#38;#x27;Player.js&amp;#38;#x27;'&gt;&lt;/script&gt;&#xA;  &lt;script&gt;&amp;#xA;    // player&amp;#xA;    window.player = new Player({ useWorker: true, webgl: false })&amp;#xA;    var playerElement = document.getElementById(&amp;#x27;viewer&amp;#x27;)&amp;#xA;    playerElement.appendChild(window.player.canvas)&amp;#xA;    // Websocket&amp;#xA;    var wsUri = window.location.protocol.replace(/http/, &amp;#x27;ws&amp;#x27;) &amp;#x2B; &amp;#x27;//&amp;#x27; &amp;#x2B; window.location.hostname &amp;#x2B; &amp;#x27;:20000&amp;#x27;&amp;#xA;    var ws = new WebSocket(wsUri)&amp;#xA;    ws.binaryType = &amp;#x27;arraybuffer&amp;#x27;&amp;#xA;    ws.onopen = function (e) {&amp;#xA;      console.log(&amp;#x27;Client connected&amp;#x27;)&amp;#xA;      ws.onmessage = function (msg) {&amp;#xA;        // decode stream&amp;#xA;        let data = new Uint8Array(msg.data);&amp;#xA;        console.log(data);&amp;#xA;        window.player.decode(data);&amp;#xA;      }&amp;#xA;    }&amp;#xA;    ws.onclose = function (e) {&amp;#xA;      console.log(&amp;#x27;Client disconnected&amp;#x27;)&amp;#xA;    }&amp;#xA;  &lt;/script&gt;&#xA;&#xA;&#xA;&#xA;

  


  Question

  


  What am I missing ? Is it some option on ffmpeg, or could it be, that the decoder is not able to fully process the received frames. I have tried multiple bitrate settings to no avail.

  


• Trouble getting HTML5 vidio to play, in Firefox 33

  16 janvier 2015, par Randy

  I’m preparing to update some old pages to HTML5, and was surprised to see that it worked in Chrome, but not the latest Firefox (v.33.1... also tried v.32). What is odd is this... In Firefox it actually WILL play IF you "coax it". If you move the video position slider to someplace beyond the start (about 5 seconds in) and THEN click play, all is well. Further inspection showed that when I click play, the file pointer was jumping to the end of the file leaving my "poster" photo intact, leading the viewer to think there is nothing else they can do. If, however, you manually move the pointer back to anyplace beyond the first couple of seconds of the file (really !), and THEN click the PLAY button, FF will play the rest of the video fine.

  Sometimes i think that to the more technically minded among us, the universe doles out the weirder problems, while God laughs.

  I’d suspect video file corruption, but all my conversions were made with the very reliable ffmpeg utility, and tested with VLC. Again, it works fine from Chrome, which supposedly uses the same video format. Here’s a link...

  FF will play the older type ogv files, so if this is one of those things where FF, now at version 33 is at fault, I’ll have to detect the browser and write the order myself with a document.write(). But it would be nice to know if there is a more straigh forward solution.

  Note that I have tried adding the mime types to my HTACESS file. But the fact that the behavior is the same when point my browsers directly the file on my local machine, makles me doubt that is the problem.

  http://pixyland.org/peterpan/OurWedding2a.html

  And here is the page code

    
  
  
  
  
  
  
  
      
  
  
  
      
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  <table align="center" border="1"><tr><td align="center">
  
  <div align="center">
  
  
  
  <video width="640" height="480" controls="controls" poster="Imagezz/Wedding/arIMG_2280.JPG">
  
   <source src="../vids/Arrival.mp4" type="video/mp4">  
  
   <source src="../vids/Arrival.webm" type="video/webm"> 
  
   <source src="../vids/Arrival.ogv" type="video/ogg"> 
  
  
  
  
  
   
  
   <p>If you are unable to view the video, here are some links to download <br />
  
    in a a few well supported video formats. You may be able to just download <br />
  
    and play one of these files without the browser.<br /><br />
  
    <strong>Download Video:</strong>nbsp;
  
      nbsp;<a href="http://stackoverflow.com/feeds/vids/Arrival.mp4">"MP4"</a>
  
      nbsp;<a href="http://stackoverflow.com/feeds/vids/Arrival.webm">"WEBM"</a>
  
      nbsp;<a href="http://stackoverflow.com/feeds/vids/Arrival.ogv">"Ogg"</a>
  
   </p>
  
  
  
   </source></source></source></video>
  
   </div>
  
   </td></tr></table>