Augmented Reality in the Modern Browser

Antonio

I work at IDX Broker

 

I run Eugene Web Devs meetups

https://eugenewebdevs.com

 

Read a lot of comic books

 

Augmented Reality

A technology that superimposes a computer-generated image on a user's view of the real world, thus providing a composite view.

  • Normal Reality is the base
  • NOT Virtual Reality

What we thought AR would do

What we did with AR

750 Million Downloads for a rebranded game

Next level AR selfies

There are some practical uses out there

Sports 

IKEA app

Mostly Native Mobile App Development

New Hardware

But What about the Browsers??

We already develop for them, so why can't I just use what I already have??

You can now

Web RTC

"Web Real-Time Communication"

WebRTC has now implemented open standards for real-time, plugin-free video. The need is real:

  • Many web services already use RTC, but need downloads, native apps or plugins. These includes Skype, Facebook (which uses Skype) and Google Hangouts (which use the Google Talk plugin).
  • Downloading, installing and updating plugins can be complex, error prone and annoying.
  • Plugins can be difficult to deploy, debug, troubleshoot, test and maintain—and it's often difficult to persuade people to install plugins in the first place!

How do Web Devs use RTC?

/* The MediaDevices.getUserMedia() method prompts the user for permission
* to use a media input which produces a MediaStream with tracks 
* containing the requested types of media. That stream can 
* include, for example, a video track 
* (produced by either a hardware or virtual video source such as a camera, 
* video recording device, screen sharing service, and so forth), 
* an audio track (similarly, produced by a physical or virtual audio source
*  like a microphone, A/D converter, 
* or the like), and possibly other track types.
*/ 

var constraints = {video: true};
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  /* use the stream */
})
.catch(function(err) {
  /* handle the error */
});

Ask for permission

Why haven't we used

this

already?

Adoption by iPhone only recently happened with iOS 11.

With out iOS support coverage was limited.

So we kind of just wait

on Apple

 

JS Frameworks

AR.js

awe.js

clmtracker.js

argon.js

aruco.js

Web RTC Mobile Requirements

  • https
  • JavaScript enabled
  • iOS 11 for iPhone
  • Android Lollipop or higher

http://caniuse.com/#search=webrtc

Using Reality

The base for AR is some part of reality

Reality Type:

Geo Location

navigator.geolocation.getCurrentPosition(success);
function success(pos) {
console.log(pos.coords.latitude);
}

//Returns 44.0277227

Geo Fence or specify a location your augmentations

Real location in reality decides if you augment

Reality Type:

Physical Marker

Augment when a marker is seen

Reality Type :

Streaming Camera

Live Practical Examples

I hope they work...

Displaying more info than Realty has

Use Case:

ID something

Identifying.

We all have seen signs of info to tell us about some thing. A label on a building, a plate on a car, or in this image an ID badge.

Problem: Physical Fakes

AR solution using markers

Web based and verifiable by anyone with a phone.

https://goo.gl/tYkBo6

AR.js

Get started in 10 lines of code

Do What Apps Do

but in the browser

Use case: Face filters

Like snapchat

My own face filters. In the browser... Iron Man

https://goo.gl/dZT1rQ

Not every images works well

Rollie Fingers Stache Attempt

clmtrackr.js

AR future?

Who will build it?

Why not the Browser?

  • Already everywhere
  • No new hardware
  • No new dev environments (like Android/iOS)
  • Nothing more to download
  • We already work with JS
  • No App store to deal with

Apple prefers native

Google is more open

Surprise...

Web Devs can make AR just another normal part of the web

with just some

Scripting 

Thanks

ARTalk

By Antonio Ortega

Made with Slides.com

ARTalk

Talk about AR in modern browsers.

  • 103

More from Antonio Ortega