Recherche avancée

Sur d’autres sites (10910)

• Merge pull request #376 from A-Rhman/patch-1

  14 mars 2013, par jackmoore

  + i18n/jquery.colorbox-ar Merge pull request #376 from A-Rhman/patch-1 Arabic translation

• ffmpeg wasm - how to take client-side created mp4 and upload it to the same server hosting the index/js files being used

  29 juillet 2022, par John Farrell

  Ok, so Im an IT guy and kind of a noob on the dev side of the fence. But I've been able to create this ffmpeg wasm page that takes a canvas and converts it to webm / and .mp4 — what i WANT to do is take the resulting .mp4 file and upload it to the server where the page/js are being served from. is this possible ? I will include my source code which is fairly simple and straight forward, I just don't know how to manipulate the resulting mp4 file that ffmpeg spits out (i realize it is happening client side) to be able to push it up to the server (maybe with aupload.php type situation ?) the solution can be html/java/php whatever, so long as it takes the mp4 output and gets it onto the server. I'd VERY MUCH appreciate a hand here.

  


  Going to try my best to properly insert the html and js. please bear with me if i've done something wrong, i've never had to -ask- a question on here, usually just look up existing answers.

  


  


  


  const { createFFmpeg } = FFmpeg;
const ffmpeg = createFFmpeg({
  log: true
});

const transcode = async (webcamData) => {
  const message = document.getElementById('message');
  const name = 'record.webm';
  await ffmpeg.load();
  message.innerHTML = 'Start transcoding';
  await ffmpeg.write(name, webcamData);
  await ffmpeg.transcode(name,  'output.mp4');
  message.innerHTML = 'Complete transcoding';
  const data = ffmpeg.read('output.mp4');

  const video = document.getElementById('output-video');
  video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
  dl.href = video.src;
  dl.innerHTML = "download mp4"
}

fn().then(async ({url, blob})=>{
    transcode(new Uint8Array(await (blob).arrayBuffer()));
})

function fn() {
var recordedChunks = [];

var time = 0;
var canvas = document.getElementById("canvas");

return new Promise(function (res, rej) {
    var stream = canvas.captureStream(60);

    mediaRecorder = new MediaRecorder(stream, {
        mimeType: "video/webm; codecs=vp9"
    });

    mediaRecorder.start(time);

    mediaRecorder.ondataavailable = function (e) {
        recordedChunks.push(event.data);
        // for demo, removed stop() call to capture more than one frame
    }

    mediaRecorder.onstop = function (event) {
        var blob = new Blob(recordedChunks, {
            "type": "video/webm"
        });
        var url = URL.createObjectURL(blob);
        res({url, blob}); // resolve both blob and url in an object

        myVideo.src = url;
        // removed data url conversion for brevity
    }

// for demo, draw random lines and then stop recording
var i = 0,
tid = setInterval(()=>{
  if(i++ > 20) { // draw 20 lines
    clearInterval(tid);
    mediaRecorder.stop();
  }
  let canvas = document.querySelector("canvas");
  let cx = canvas.getContext("2d");
  cx.beginPath();
  cx.strokeStyle = 'green';
  cx.moveTo(Math.random()*100, Math.random()*100);
  cx.lineTo(Math.random()*100, Math.random()*100);
  cx.stroke();
},200)

});
}

  


  &#xA;&#xA;&#xA;<code class="echappe-js">&lt;script src=&quot;https://unpkg.com/@ffmpeg/ffmpeg@0.8.1/dist/ffmpeg.min.js&quot; defer&gt;&lt;/script&gt;&#xA;&lt;script src='http://stackoverflow.com/feeds/tag/canvas2mp4.js' defer&gt;&lt;/script&gt;&#xA;&#xA;&#xA;&#xA;here is a canvas
  &#xA;
  &#xA;&#xA;here is a recorded video of the canvas in webM format
  &#xA;
  &#xA;&#xA;&#xA;here is a transcoded mp4 from the webm above CLIENT SIDE using ffmpeg
  &#xA;
  &#xA;&#xA;
  
  &#xA;&#xA;
  

  


  


  



• Unable to transfer continuous FFmpeg buffer to client browser using node.js

  10 décembre 2016, par chintitomasud

  I have tried to process a Video file transcoding on demand by using FFmpeg to transfer the chunk(buffer) to the client browser as mp4 format but I failed to show the mp4 content on html5 video player . Without using ffmpeg all code run properly . I have replaced createReadSteam with ffmpeg . Using it I have faced some problems. FFmpeg is new to me and I ’m kind of confused with spawn method. When I post a url path it shows the following text on the command line

  Spawning new process /samiul113039/1080.mp4:GET

  piping ffmpeg output to client, pid 10016

  HTTP connection disrupted, killing ffmpeg : 10016

  Spawning new process /samiul113039/1080.mp4:GET

  piping ffmpeg output to client, pid 4796

  HTTP connection disrupted, killing ffmpeg : 4796

  ffmpeg didn’t quit on q, sending signals ffmpeg has exited : 10016,

  code null ffmpeg didn’t quit on q, sending signals ffmpeg has exited :
  4796, code nul

  =

  var fs=require('fs');
  
  
  
  var url=require("url");
  
  var urlvalue="http://csestudents.uiu.ac.bd/samiul113039/1080.mp4";
  
  
  
  
  
  var parseurl=url.parse(urlvalue);
  
  
  
  var HDHomeRunIP = parseurl.hostname;
  
  var HDHomeRunPort = parseurl.port;
  
  var childKillTimeoutMs = 1000;
  
  
  
  var parseArgs = require('minimist')(process.argv.slice(2));
  
  
  
  // define startsWith for string
  
  if (typeof String.prototype.startsWith != 'function') {
  
    // see below for better implementation!
  
    String.prototype.startsWith = function (str){
  
      return this.indexOf(str) == 0;
  
    };
  
  }
  
  // Called when the response object fires the 'close' handler, kills ffmpeg 
  
  function responseCloseHandler(command) {
  
    if (command.exited != true) {
  
      console.log('HTTP connection disrupted, killing ffmpeg: ' + command.pid);
  
      // Send a 'q' which signals ffmpeg to quit. 
  
      // Then wait half a second, send a nice signal, wait another half second
  
      // and send SIGKILL
  
      command.stdin.write('q\n');
  
      command.stdin.destroy();
  
      // install timeout and wait
  
      setTimeout(function() {
  
        if (command.exited != true) {
  
          console.log('ffmpeg didn\'t quit on q, sending signals');
  
          // still connected, do safe sig kills
  
          command.kill();
  
          try { 
  
            command.kill('SIGQUIT');
  
          } catch (err) {}
  
          try {
  
            command.kill('SIGINT');
  
          } catch (err) {} 
  
          // wait some more!
  
          setTimeout(function() {
  
            if (command.exited != true) {
  
              console.log('ffmpeg didn\'t quit on signals, sending SIGKILL');
  
              // at this point, just give up and whack it
  
              try {
  
                command.kill('SIGKILL');
  
              } catch (err) {}
  
            }
  
          }, childKillTimeoutMs);
  
        }    
  
      }, childKillTimeoutMs);
  
    }
  
  }
  
  
  
  // Performs a proxy. Copies data from proxy_request into response
  
  function doProxy(request,response,http,options) {
  
    var proxy_request = http.request(options, function (proxy_response) {
  
      proxy_response.on('data', function(chunk) {
  
        response.write(chunk, 'binary');
  
      });
  
      proxy_response.on('end', function() {
  
        response.end();
  
      });
  
      response.writeHead(proxy_response.statusCode, proxy_response.headers);
  
    });
  
    request.on('data', function(chunk) {
  
      proxy_request.write(chunk, 'binary');
  
    });
  
    // error handler
  
    proxy_request.on('error', function(e) {
  
      console.log('problem with request: ' + e.message);
  
      response.writeHeader(500);
  
      response.end();
  
    });
  
  
  
    proxy_request.end();
  
  }
  
  
  
  var child_process = require('child_process');
  
  var auth = require('./auth');
  
  // Performs the transcoding after the URL is validated
  
  function doTranscode(request,response) {
  
    //res.setHeader("Accept-Ranges", "bytes");
  
    response.setHeader("Accept-Ranges", "bytes");
  
    response.setHeader("Content-Type", "video/mp4");        
  
    response.setHeader("Connection","close");
  
    response.setHeader("Cache-Control","no-cache");
  
    response.setHeader("Pragma","no-cache");
  
  
  
    // always write the header
  
    response.writeHeader(200);
  
  
  
    // if get, spawn command stream it
  
    if (request.method == 'GET') {
  
      console.log('Spawning new process ' + request.url + ":" + request.method);
  
  
  
  var command = child_process.spawn('ffmpeg', 
  
                                        ['-i','http://csestudents.uiu.ac.bd/samiul113039/1080.mp4','-f','mpegts','-'],
  
                                        { stdio: ['pipe','pipe','ignore'] }); 
  
  
  
       command.exited = false;
  
      // handler for when ffmpeg dies unexpectedly
  
      command.on('exit',function(code,signal) {
  
        console.log('ffmpeg has exited: ' + command.pid + ", code " + code);
  
        // set flag saying we've quit
  
        command.exited = true;
  
        response.end();
  
      });
  
      command.on('error',function(error) {
  
        console.log('ffmpeg error handler - unable to kill: ' + command.pid);
  
        // on well, might as well give up
  
        command.exited = true;
  
        try {
  
          command.stdin.close(); 
  
        } catch (err) {}
  
        try {
  
          command.stdout.close();
  
        } catch (err) {}
  
        try {
  
          command.stderr.close();
  
        } catch (err) {}
  
        response.end();
  
      });
  
      // handler for when client closes the URL connection - stop ffmpeg
  
      response.on('end',function() { 
  
       responseCloseHandler(command);
  
      });
  
      // handler for when client closes the URL connection - stop ffmpeg
  
      response.on('close',function() { 
  
        responseCloseHandler(command); 
  
      });
  
  
  
      // now stream
  
      console.log('piping ffmpeg output to client, pid ' + command.pid);
  
      command.stdout.pipe(response);
  
      command.stdin.on('error',function(err) {
  
        console.log("Weird error in stdin pipe ", err);
  
        response.end();
  
      });
  
      command.stdout.on('error',function(err) {
  
        console.log("Weird error in stdout pipe ",err);
  
        response.end();
  
      });
  
    } 
  
    else {
  
      // not GET, so close response
  
      response.end();
  
    }
  
  }
  
  
  
  // Load the http module to create an http server.
  
  var http = require('http');
  
  
  
  // Configure our HTTP server to respond with Hello World to all requests.
  
  var server = http.createServer(function (request, response) {
  
    //console.log("New connection from " + request.socket.remoteAddress + ":" + request.url);
  
  
  
    if (auth.validate(request,response)) {
  
      // first send a HEAD request to our HD Home Run with the same url to see if the address is valid.
  
      // This prevents an ffmpeg instance to spawn when clients request invalid things - like robots.txt/etc
  
      var options = {method: 'HEAD', hostname: HDHomeRunIP, port: HDHomeRunPort, path: request.url};
  
      var req = http.request(options, function(res) {
  
        // if they do a get, and it returns good status
  
        if (request.method == "GET" &&
  
            res.statusCode == 200 &&
  
            res.headers["content-type"] != null &&
  
            res.headers["content-type"].startsWith("video")) {
  
          // transcode is possible, start it now!
  
          doTranscode(request,response);
  
        } 
  
        else {
  
          // no video or error, cannot transcode, just forward the response from the HD Home run to the client
  
          if (request.method == "HEAD") {
  
            response.writeHead(res.statusCode,res.headers);
  
            response.end();
  
          }
  
          else {
  
            // do a 301 redirect and have the device response directly  
  
  
  
            // just proxy it, that way browser doesn't redirect to HDHomeRun IP but keeps the node.js server IP
  
            options = {method: request.method, hostname: HDHomeRunIP, /* port: HDHomeRunPort, */path: request.url};
  
            doProxy(request,response,http,options);
  
          }
  
        }
  
      });
  
      req.on('error', function(e) {
  
        console.log('problem with request: ' + e.message);
  
        response.writeHeader(500);
  
        response.end();
  
      });
  
      // finish the client request, rest of processing done in the async callbacks
  
      req.end();
  
    }
  
  });
  
  
  
  // turn on no delay for tcp
  
  server.on('connection', function (socket) {
  
    socket.setNoDelay(true);
  
  });
  
  server.listen(7000);

  stdio : [’pipe’,’pipe’,’ignore’]
  Actually the code was written by someone. i have just modified the code.
  [’pipe’,’pipe’,’ignore’] what does pipe,pipe.ignore mean here,