Recherche avancée

Sur d’autres sites (4465)

• Winamp and the March of GUI

  1er juillet 2012, par Multimedia Mike — General, ars technica, gui, user interface, winamp

  Ars Technica recently published a 15-year retrospective on the venerable Winamp multimedia player, prompting bouts of nostalgia and revelations of "Huh ? That program is still around ?" from many readers. I was among them.

  
  
  

  I remember first using Winamp in 1997. I remember finding a few of these new files called MP3s online and being able to play the first 20 seconds using the official Fraunhofer Windows player— full playback required the fully licensed version. Then I searched for another player and came up with Winamp. The first version I ever used was v1.05 in the summer of 1997. I remember checking the website often for updates and trying out every single one. I can’t imagine doing that nowadays— programs need to auto-update themselves (which Winamp probably does now ; I can’t recall the last time I used the program).

  Video Underdog
  The last time Winamp came up on my radar was early in 2003 when a new version came with support for a custom, proprietary multimedia audio/video format called Nullsoft Video (NSV). I remember the timeframe because the date is indicated in the earliest revision of my NSV spec document (back when I was maintaining such docs in a series of plaintext files). This was cobbled together from details I and others in the open source multimedia community sorted out from sample files. It was missing quite a few details, though.

  Then, Winamp founder Justin Frankel — introduced through a colleague on the xine team — emailed me his official NSV format and told me I was free to incorporate details into my document just as long as it wasn’t obvious that I had the official spec. This put me in an obnoxious position of trying to incorporate details which would have been very difficult to reverse engineer without the official doc. I think I coped with the situation by never really getting around to updating my doc in any meaningful way. Then, one day, the official spec was released to the world anyway, and it is now mirrored here at multimedia.cx.

  I don’t think the format ever really caught on in any meaningful way, so not a big deal. (Anytime I say that about a format, I always learn it saw huge adoption is some small but vocal community.)

  What’s Wrong With This Picture ?
  What I really wanted to discuss in this post was the matter of graphical user interfaces and how they have changed in the last 15 years.
  
  I still remember when I first downloaded Winamp v1.05 and tried it on my Windows machine at the time. Indignantly, the first thought I had was, "What makes this program think it’s so special that it’s allowed to violate the user interface conventions put forth by the rest of the desktop ?" All of the Windows programs followed a standard set of user interface patterns and had a consistent look and feel... and then Winamp came along and felt it could violate all those conventions.

  I guess I let the program get away with it because it was either that or only play 20-second clips from the unregistered Fraunhofer player. Though incredibly sterile by comparison, the Fraunhofer player, it should be noted, followed Windows UI guidelines to the letter.

  As the summer of 1997 progressed and more Winamp versions were released, eventually one came out (I think it was v1.6 or so) that supported skins. I was excited because there was a skin that made the program look like a proper Windows program— at least if you used the default Windows color scheme, and had all of your fonts a certain type and size.

  Skins were implemented by packaging together a set of BMP images to overlay on various UI elements. I immediately saw a number of shortcomings with this skinning approach. A big one was UI lock-in. Ironically, if you skin an app and wish to maintain backwards compatibility with the thousands of skins selflessly authored by your vibrant community (seriously, I couldn’t believe how prolific these things were), then you were effectively locked into the primary UI. Forget about adding a new button anywhere.

  Another big problem was resolution-independence. Basing your UI on static bitmaps doesn’t scale well with various resolutions. Winamp had its normal mode and it also had double-sized mode.

  Skins proliferated among many types of programs in the late 1990s. I always treasured this Suck.com (remember them ? that’s a whole other nostalgia trip) essay from April, 2000 entitled Skin Cancer. Still, Winamp was basically the standard, and the best, and I put away my righteous nerd rage and even dug through the vast troves of skins. I remember settling on Swankamp for a good part of 1998, probably due to the neo-swing revival at the time.

  
  
  

  Then again, if Winamp irked me, imagine my reaction when I was first exposed to the Sonique Music Player in 1998 :

  
  
  

  The New UI Order
  Upon reflection, I realize now that I had a really myopic view of what a computer GUI should be. I thought the GUIs were necessarily supposed to follow the WIMP (windows, icons, mouse, pointer) paradigm and couldn’t conceive of anything different. For a long time, I couldn’t envision a useful GUI on a small device (like a phone) because WIMP didn’t fit well on such a small interface (even though I saw various ill-fated attempts to make it work). This thinking seriously crippled me when I was trying to craft a GUI for a custom console media player I was developing as a hobby many years ago.

  I’m looking around at what I have open on my Windows 7 desktop right now. Google Chrome browser, Apple iTunes, Adobe Photoshop Elements, and VMware Player are 4 programs which all seem to have their own skins. Maybe Winamp doesn’t look so out of place these days.

• Premium Plugins now available on the Piwik Analytics Marketplace

  2 novembre 2016, par Piwik Core Team — Community, Press Releases

  We are super excited to announce the launch of three new premium plugins which are now available on the Piwik Marketplace : A/B Testing, Media Analytics, and Activity Log.

  All three plugins are easy to use and come with 100% data ownership, documentation, integration with Piwik, powerful data exports and no data limits.

  These first premium plugins and the new Marketplace capabilities have been designed and built with love by InnoCraft – the new company brought to you by the makers of Piwik.

  1. A/B Testing

  A/B Testing helps you grow your business by comparing different versions of your website or app to detect the most successful version that increases your sales, revenue, conversions, pageviews, and more.

  A/B tests are also known as experiments or split tests. In an A/B test you show two or more different variations to your users (visitors) and the variation that performs better wins. When a user enters the experiment, a variation will be randomly chosen and the user will see this variation for all subsequent visits. Piwik A/B testing uses advanced statistical analysis to detect which variation performs better for your conversion goals and success metrics. Even small tests can increase your sales and conversions massively !

  Get it now on the Marketplace

  Learn more here :

  • A/B Testing – Experiments (website).
  • List of all features on the Marketplace : A/B Testing Plugin.

  • The A/B Testing User Guide and the A/B Testing FAQ help you getting started in running A/B tests. The A/B Testing developer guides help you embedding and implementing A/B tests into your project.

  • A/B Testing Platform for Piwik Analytics (blog post).

  

  2. Media Analytics

  Do you have videos or audio on your website, or in an app ? Media Analytics gives you powerful insights into how your audience watches your videos and listens to your audio, to ultimately maximize your success.

  Learn all about your audience. Which media your users are playing, for how long, how often, and where they dropped off ? Where are your users located around the world ? Who your audience are and what did people do before and after watching a video or listening to audio ? Many of the reports are also available in Real time, so you can gain insights and react quickly.

  Get it now on the Marketplace

  Learn more here :

  • Media Analytics (website).
  • List of all features on the Marketplace : Media Analytics plugin.
  • Screenshots for Media Analytics.

  • The Media Analytics User Guide and the Media Analytics FAQ cover on how to get the most out of this plugin. The Media Analytics developer guides help you setting up the tracking of your video and audio.

  • 
    Powerful Video Analytics and Audio Analytics for Piwik
    (blog post).

  

  3. Activity log

  Keep an eye on everything that is happening on your Piwik platform with the Activity Log plugin.

  The activity log, also known as audit log or audit trail, improves your Piwik’s security and diagnostic by showing a chronological set of entries that provides documentary evidence of activities that happened in your Piwik. It allows Piwik Super Users to quickly review the actions performed by members of your organization or clients, and also lets every user review details of their own actions.

  Get it now on the Marketplace

  Learn more in the Activity Log FAQ or see a list of all the features on the Marketplace : Activity Log plugin.

  

  The Piwik Marketplace guarantees

  Purchasing on the Piwik Marketplace is easy and safe. Check out our guarantees :

  • Marketplace refund policy : 14 Day Money Back Guarantee.
  • Safe & Secure Payments.
  • 1-click Installation & Update.

  Why premium plugins ?

  Researching, building, documenting, testing and maintaining quality products take years of experience and months of work. When you purchase a premium plugin from the Marketplace, you get a fully working product, with free updates for the duration of the license and you stay in full control of your analytics data. When purchasing premium plugins you also directly help the Piwik core engineers to continue to grow and innovate ! That’s because a % of earnings on premium plugin license sales directly fund new Piwik versions and more amazing features. Learn more in the FAQ : What are premium plugins ?.

  About InnoCraft

  These first three premium plugins have been designed and built with love by InnoCraft. InnoCraft is a new company founded by the creator of Piwik along with the lead engineers of Piwik based in Wellington, New Zealand. At InnoCraft, product experts, designers and engineers are passionate about crafting high quality and innovative products to help grow your business and to maximize your success.

  Learn more on the company website : www.innocraft.com

  To stay updated on their releases, follow InnoCraftHQ on Twitter or Like InnoCraft on Facebook.

  

  Is the Piwik Marketplace open to all ?

  Yes, our marketplace allows other companies and developers to sell their plugins to all Piwik Analytics users. If you are a developer or a company interested in selling your plugin(s) on our Marketplace please contact us. As a developer selling plugins, you will get paid every month for your earnings, and you will be able to see detailed reports about your sales, upload new plugin updates, respond to pre-sales enquiries, etc.

  Resources

  Learn more :

  • The Piwik.org Privacy Policy has been updated (a new “Scope” and “Contact us” sections).
  • New Terms and Conditions for the Piwik Marketplace (plugins.piwik.org).
  • New Piwik Marketplace FAQs.
  • What are premium plugins and how do they differ from free plugins ?.

  We are looking forward to your continued support with the Piwik project as we expand and offer you more ways to maximize your success.

  Please contact the Marketplace team with any questions or feedback.

  Wishing you a warm : Happy Analytics !

• 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,