HTML Barcode Scanner

window.addEventListener('load', function() {
    barcode.config.start = 0.1;
    barcode.config.end = 0.9;
    barcode.config.video = '#barcodevideo';
    barcode.config.canvas = '#barcodecanvas';
    barcode.config.canvasg = '#barcodecanvasg';
    barcode.setHandler(function(barcode) {
        document.getElementById('result').innerHTML = barcode;
    });
    barcode.init();
});

An HTML5 barcode scanner which scans EAN-13 barcodes using a webcam.

HTML Barcode Scanner (GitHub) → Original repo was removed. Forked repos can be found below

Did this help you out? Please consider making a donation:

TogetherJS

TogetherJS is a free, open source JavaScript library by Mozilla that adds collaboration features and tools to your website. By adding TogetherJS to your site, your users can help each other out on a website in real time!

TogetherJS →
Introducing TogetherJS →

Yes, that looks familiar indeed as it’s the rebranded version of the aformentioned TowTruck 😉

Holla

// Sending a call
var rtc = holla.connect();
rtc.register("tom", function(worked) {
  holla.createFullStream(function(err, stream) {

    var call = rtc.call("bob");
    call.addStream(stream);
    holla.pipe(stream, $("#myVideo"));

    call.on("answered", function() {
      console.log("Remote user answered the call");
    });

    console.log("Calling ", call.user);
  });
});
// Receiving a call
var rtc = holla.connect();
rtc.register("bob", function(worked) {
  rtc.on("call", function(call) {
    console.log("Inbound call from ", call.user);

    holla.createFullStream(function(err, stream) {

      call.addStream(stream);
      call.answer();
      holla.pipe(stream, $("#myVideo"));

      call.ready(function(stream) {
        holla.pipe(stream, $("#theirVideo"));
      });

    });

  });
});

An abstraction over P2P video/voice/data connections using WebRTC

Holla – P2P video/voice/data →

Responsive Typography using Face Detection

responsive-typography-face-detection

Typesetting based upon your distance to your screen. Clever use of WebRTC’s getUserMedia and JavaScript Face Detection

In case you don’t have a capable browser, this is what it looks like:

Responsive Typography: Breakpoints Demo →
Responsive Typography: Realtime Demo →

(via Jeremy)

Related: headtrackr →

WebRTC RTCPeerConnection interoperability between Firefox and Chrome

RTCPeerConnection (also known simply as PeerConnection or PC) interoperability means that developers can now create Firefox WebRTC applications that make direct audio/video calls to Chrome WebRTC applications without having to install a third-party plugin. Because the functionality is now baked into the browser, users can avoid problems with first-time installs and buggy plugins, and developers can deploy their apps much more easily and universally.

Hello Chrome, it’s Firefox calling! →