Recherche avancée

Sur d’autres sites (17014)

• How to render animation using capturejs ?

  30 novembre 2018, par user9964622

  I have created animation using tweenjs and createjs libraries createjs and tweenjs,createjs now, I’d like to convert these animations to video files (MPEG4, or other, doesn’t matter) or how can I render it in the backend using nodejs ?

  Here is the solution I have tried so far using [ffmpeg server][2]

  test4.js

  (function () {
  
      "use strict";
  
  
  
      var framesPerSecond = 60;
  
      var numFrames = 20; //framesPerSecond * 60 * 2;
  
      var thickness = 100;
  
      var speed = 4;
  
      var frameNum = 0;
  
  
  
      var canvas = document.getElementById("c");
  
      var ctx = canvas.getContext("2d");
  
      canvas.width = 500;
  
      canvas.height = 500;
  
  
  
      var progressElem = document.getElementById("progress");
  
      var progressNode = document.createTextNode("");
  
      progressElem.appendChild(progressNode);
  
  
  
      function onProgress(progress) {
  
        progressNode.nodeValue = (progress * 100).toFixed(1) + "%";
  
      }
  
  
  
      function showVideoLink(url, size) {
  
        size = size ? (" [size: " + (size / 1024 / 1024).toFixed(1) + "meg]") : " [unknown size]";
  
        var a = document.createElement("a");
  
        a.href = url;
  
        var filename = url;
  
        var slashNdx = filename.lastIndexOf("/");
  
        if (slashNdx >= 0) {
  
          filename = filename.substr(slashNdx + 1);
  
        }
  
        a.download = filename;
  
        a.appendChild(document.createTextNode(url + size));
  
        document.body.appendChild(a);
  
      }
  
  
  
      var capturer = new CCapture( {
  
        format: 'ffmpegserver',
  
        //workersPath: "3rdparty/",
  
        //format: 'gif',
  
        verbose: false,
  
        framerate: framesPerSecond,
  
        onProgress: onProgress,
  
        //extension: ".mp4",
  
        //codec: "libx264",
  
      } );
  
      capturer.start();
  
  
  
      function render() {
  
  
  
        var stage = new createjs.Stage("c");
  
        var circle = new createjs.Shape();
  
        circle.graphics.beginFill("Crimson").drawCircle(0, 0, 50);
  
        circle.x = 100;
  
        circle.y = 100;
  
        stage.addChild(circle);
  
        createjs.Tween.get(circle, {loop: true})
  
          .to({x: 400}, 1000, createjs.Ease.getPowInOut(4))
  
          .to({alpha: 0, y: 75}, 500, createjs.Ease.getPowInOut(2))
  
          .to({alpha: 0, y: 125}, 100)
  
          .to({alpha: 1, y: 100}, 500, createjs.Ease.getPowInOut(2))
  
          .to({x: 100}, 800, createjs.Ease.getPowInOut(2));
  
        createjs.Ticker.setFPS(60);
  
        createjs.Ticker.addEventListener("tick", stage);
  
        capturer.capture(canvas);
  
  
  
        ++frameNum;
  
        if (frameNum === numFrames) {
  
          capturer.stop();
  
          capturer.save(showVideoLink);
  
        } else {
  
          requestAnimationFrame(render);
  
        }
  
      }
  
      requestAnimationFrame(render);
  
    }());

  here is html test4.html

    
  
      
  
    
  
    
  
      <canvas></canvas>
  
      <div>-</div>
  
    
  
    <code class="echappe-js">&lt;script src=&quot;http://localhost:8081/ffmpegserver/CCapture.js&quot;&gt;&lt;/script&gt;
    
  &lt;script src=&quot;http://localhost:8081/ffmpegserver/ffmpegserver.js&quot;&gt;&lt;/script&gt;
  
    &lt;script src=&quot;https://code.createjs.com/1.0.0/createjs.min.js&quot;&gt;&lt;/script&gt;
  
    &lt;script src='http://stackoverflow.com/feeds/tag/test4.js'&gt;&lt;/script&gt;
    [1] : https://createjs.com/getting-started
  
    [2] : https://github.com/greggman/ffmpegserver.js
  
  
  

  when I run my app, it renders very quickly and when I download the converted mp4 file it contains zero MB.

  for reference, u can test by just cloning this repo ffmpeg server repository and add the above files to the public folder

  What am I doing wrong in my code ???

• How to render animation using Javascript ?

  30 novembre 2018, par user9964622

  I have created animation using tweenjs and createjs libraries createjs and tweenjs, createjs now, I’d like to convert these animations to video files (MPEG4, or other, doesn’t matter) or how can I render it in the backend using nodejs ?

  Here is the solution I have tried so far using ffmpeg server

  test4.js

  (function () {
  
      "use strict";
  
  
  
      var framesPerSecond = 60;
  
      var numFrames = 20; //framesPerSecond * 60 * 2;
  
      var thickness = 100;
  
      var speed = 4;
  
      var frameNum = 0;
  
  
  
      var canvas = document.getElementById("c");
  
      var ctx = canvas.getContext("2d");
  
      canvas.width = 500;
  
      canvas.height = 500;
  
  
  
      var progressElem = document.getElementById("progress");
  
      var progressNode = document.createTextNode("");
  
      progressElem.appendChild(progressNode);
  
  
  
      function onProgress(progress) {
  
        progressNode.nodeValue = (progress * 100).toFixed(1) + "%";
  
      }
  
  
  
      function showVideoLink(url, size) {
  
        size = size ? (" [size: " + (size / 1024 / 1024).toFixed(1) + "meg]") : " [unknown size]";
  
        var a = document.createElement("a");
  
        a.href = url;
  
        var filename = url;
  
        var slashNdx = filename.lastIndexOf("/");
  
        if (slashNdx >= 0) {
  
          filename = filename.substr(slashNdx + 1);
  
        }
  
        a.download = filename;
  
        a.appendChild(document.createTextNode(url + size));
  
        document.body.appendChild(a);
  
      }
  
  
  
      var capturer = new CCapture( {
  
        format: 'ffmpegserver',
  
        //workersPath: "3rdparty/",
  
        //format: 'gif',
  
        verbose: false,
  
        framerate: framesPerSecond,
  
        onProgress: onProgress,
  
        //extension: ".mp4",
  
        //codec: "libx264",
  
      } );
  
      capturer.start();
  
  
  
      function render() {
  
  
  
        var stage = new createjs.Stage("c");
  
        var circle = new createjs.Shape();
  
        circle.graphics.beginFill("Crimson").drawCircle(0, 0, 50);
  
        circle.x = 100;
  
        circle.y = 100;
  
        stage.addChild(circle);
  
        createjs.Tween.get(circle, {loop: true})
  
          .to({x: 400}, 1000, createjs.Ease.getPowInOut(4))
  
          .to({alpha: 0, y: 75}, 500, createjs.Ease.getPowInOut(2))
  
          .to({alpha: 0, y: 125}, 100)
  
          .to({alpha: 1, y: 100}, 500, createjs.Ease.getPowInOut(2))
  
          .to({x: 100}, 800, createjs.Ease.getPowInOut(2));
  
        createjs.Ticker.setFPS(60);
  
        createjs.Ticker.addEventListener("tick", stage);
  
        capturer.capture(canvas);
  
  
  
        ++frameNum;
  
        if (frameNum === numFrames) {
  
          capturer.stop();
  
          capturer.save(showVideoLink);
  
        } else {
  
          requestAnimationFrame(render);
  
        }
  
      }
  
      requestAnimationFrame(render);
  
    }());

  here is html test4.html

    
  
      
  
    
  
    
  
      <canvas></canvas>
  
      <div>-</div>
  
    
  
    <code class="echappe-js">&lt;script src=&quot;http://localhost:8081/ffmpegserver/CCapture.js&quot;&gt;&lt;/script&gt;
    
  &lt;script src=&quot;http://localhost:8081/ffmpegserver/ffmpegserver.js&quot;&gt;&lt;/script&gt;
  
    &lt;script src=&quot;https://code.createjs.com/1.0.0/createjs.min.js&quot;&gt;&lt;/script&gt;
  
    &lt;script src='http://stackoverflow.com/feeds/tag/test4.js'&gt;&lt;/script&gt;
  
  

  when I run my app, it renders very quickly and when I download the converted mp4 file it contains zero MB.

  for reference, u can test by just cloning this repo ffmpeg server repository and add the above files to the public folder

  What am I doing wrong in my code ???

• how to prevent the hls video player dont refresh when m3u8 changes

  6 juin 2024, par Leo

  here i am using ffmpeg to use camera and audio to make a hls stream on server as the stream continious old m3u8 components deletes and new ones gets added to main.m3u8. but as we insert the url of hls stream file main.m3u8. the player refreshes as soon as the file gets rewritten because of new and old ones. so

  


  i have tried to change the players like hls.js or videojs etc none were to solve this. how to solve this and make sure the stream runs smoothly.

  


  Server.js

  


  const startStreaming = (viddev,auddev) => {
    if (ffmpegProcess) {
        ffmpegProcess.kill();
    }
    const segmentDuration = 10;
    const outputFilename = './video/output.m3u8';
    const ffmpegCommand = `ffmpeg -f dshow -i video="${viddev}" -f dshow -i audio="${auddev}" -codec:v libx264 -preset ultrafast -tune zerolatency -codec:a aac -b:a 128k -hls_time ${segmentDuration} -hls_list_size 3 -hls_flags delete_segments -start_number 0 -hls_segment_type mpegts ${outputFilename}`;

    ffmpegProcess = exec(ffmpegCommand);

    ffmpegProcess.stderr.on('data', (data) => {
        console.error(`ffmpeg stderr: ${data}`);
    });

    ffmpegProcess.on('close', (code) => {
        console.log(`ffmpeg process exited with code ${code}`);
    });
};

app.use('/video', express.static(path.join(__dirname, 'video')));

// Endpoint to list audio and video devices
app.get('/devices', async (req, res) => {
    const data=await parseDevices()
    // console.log(data.cameras[0].name)
    startStreaming(data.cameras[0].name,data.microphones[0].name);
    res.json(data)
});


  


  index.html

  


  &#xA;&#xA;&#xA;    &#xA;    &#xA;    &#xA;    &#xA;    &#xA;&#xA;&#xA;&#xA;    &#xA;        <source src="https://localhost:3000/video/output.m3u8" type="application/x-mpegURL">&#xA;    &#xA;&#xA;    <code class="echappe-js">&lt;script src=&quot;https://vjs.zencdn.net/8.10.0/video.min.js&quot;&gt;&lt;/script&gt;&#xA;    &lt;script&gt;&amp;#xA;        // Initialize Video.js player&amp;#xA;        var player = videojs(&amp;#x27;video&amp;#x27;, {&amp;#xA;            autoplay: &amp;#x27;play&amp;#x27;,&amp;#xA;            liveui: true  // Enable the live UI for live streams&amp;#xA;        });&amp;#xA;&amp;#xA;        // Seek to live when the player is ready&amp;#xA;        player.ready(function() {&amp;#xA;            player.liveTracker.on(&amp;#x27;liveedgechange&amp;#x27;, function() {&amp;#xA;                player.currentTime(player.liveTracker.liveCurrentTime());&amp;#xA;            });&amp;#xA;        });&amp;#xA;&amp;#xA;        // Handle any errors encountered by Video.js&amp;#xA;        player.on(&amp;#x27;error&amp;#x27;, function() {&amp;#xA;            console.error(&amp;#x27;Video.js encountered an error:&amp;#x27;, player.error());&amp;#xA;        });&amp;#xA;    &lt;/script&gt;&#xA;&#xA;&#xA;&#xA;&#xA;