Git Product home page Git Product logo

agorawebxr's Introduction

Agora WebXR

This is an example of using Agora's Video SDK with WebXR. In this demo you can broadcast yourself from a WebVR environment using Agora Web SDK with AFrame, or you can watch a live broadcaster in WebAR using Agora Web SDK with AR.js and AFrame. This project also implements the Agora RTM SDK for the data messaging.

Quick Start

Clone this repo

(WebVR) Broadcaster

  1. Open js/agora-broadcaster.js and add your Agora AppID on line 2, var agoraAppId = '';
  2. Depoly to: localhost (Live Server/Xampp) with a tunnel out (ngrok); or remote server
  3. Open your desktop browser and view the broadcaster.html page. (Broadcaster)

(AR) Audience

  1. Open js/agora-audience.js and add your Agora AppID on line 5, var agoraAppId = '';
  2. Open your mobile browser and view the index.html page (Audience)
  3. Once the camera feed is visible, point the device at the marker to view the .

Notes

The Channel name is customizable within js/agora-broadcaster.js and js/agora-audience.js, but note that this values must match for the two users to be in the same channel. To run this demo it is recommended to use a desktop or mobile device for either Broadcaster or Audience. If using desktop for audience, you may want to adjust the rotation of the model, as it it currently set for mobile viewing. If you are using an iPhone, make sure to use Safari for both the Broadcaster and Audience

Traditional Broadcaster

To test the Audience with a traditional web broadcast ui:

  1. Visit https://agora-group-video-chat.herokuapp.com in your Desktop browser
  2. Input your Agora AppID
  3. Input the channel name WebAR

Experimental

I am still working on the Image Tracking integration. Currently there is an issue with dynamically loading content when using Image markers. For more details see issue :AR-js-org/AR.js#91

agorawebxr's People

Contributors

digitallysavvy avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.