PUBLIC MARKS from sbrothier with tags html5 & video

This January, we teamed up with Dick's Sporting Goods to launch Gear in Action, a digital lookbook featuring products for the 2014 Baseball season. As you can see on this page of the finished site, video of the products in action displays at full height and width. This occurs regardless of browser size, and without distorting the video's original aspect ratio.

My article on using CSS to position HTML5 videos as fullscreen web page backgrounds has proven to be one of the most popular on this site, but the technique has a significant challenge in that it forces users to host their own videos, or to find a service to do so.

WebVTT is associated with subtitling HTML5 video, but the spec contains many additional features that aren’t related to dialogue. One of the most useful of these is the ability to read and link to video cue points. Creating WebVTT chapter tracks deepens viewer’s engagement with more informative content, while adding invaluable accessibility and UI features. Best of all, they’re easy to create.

Enhance your products with live, face-to-face communication.

PeerJS wraps the browser's WebRTC implementation to provide a complete, configurable, and easy-to-use peer-to-peer connection API. Equipped with nothing but an ID, a peer can create a P2P data or media stream connection to a remote peer.

You can build cool stuff with WebRTC in five minutes. Want to see what this library can do? Talky.io is powered by SimpleWebRTC! Or checkout the demo (note that screensharing won't work because HTTPS is required.)

Video chat with your friends (and/or customers) on Twitter with only a web browser!

When I build my Instant Webcam App, I was searching for solution to stream live video from the iPhone's Camera to browsers. There were none.

As people know, I'm a huge fan of PhoneGap and what it allows me to do with JavaScript, HTML, and CSS. But I think it is crucial to remember that you don't always need PhoneGap. A great example of that is camera access. Did you know that recent mobile browsers support accessing the camera directly from HTML and JavaScript? Let's look at an example.

Recently, I have seen a couple different JavaScript face detection demos based on the HTML5 getUserMedia API. I even made my own face detection demo based on the HTML5 video tag. Beyond human faces, we also have face detection for cats in JavaScript, nudity detection, and much more with js-objectdetect, a JavaScript library for real-time object detection.

While recently watching a talk about the new WebRTC features I was reminded of Paul Rouget’s great green screen demo and thought that this would be a cool thing to have for live video as well. Let us build a live green screen!

headtrackr is a javascript library for real-time face tracking and head tracking, tracking the position of a users head in relation to the computer screen, via a web camera and the webRTC/getUserMedia standard. For a demonstration see this video or try out some of the examples with a laptop that has a camera and a browser that has camera webRTC/getUserMedia support (for instance Opera 12). For an overview of browsers supporting the getUserMedia standard see http://caniuse.com/stream.