ShareDrop is a WebRTC powered clone of OS X’s Airdrop. Put differently: P2P filesharing through your browser. Impressive.
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
TowTruck
A service for your website that makes it surprisingly easy to collaborate in real-time.
By MozillaLabs. Just include a tad of JavaScript and boom, instant collaboration!
(via teusje)
Responsive Typography using 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.