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.
Full tutorial: Build a WebAR Live Video Streaming Web-App
- Download or clone this repo.
- An Agora.io developer account, and get your App ID in the Projects section of your Agora Console.
- Open
js/webvr-broadcast-client.jsand add your Agora AppID on line 2,var agoraAppId = ''; - Depoly to: localhost - or use a plugin/app (Live Server/Xampp) with a tunnel out (ngrok); or remote server
- Open your desktop browser and view the
broadcaster.htmlpage. (Broadcaster)
- Open
js/webar-audience-client.jsand add your Agora AppID on line 5,var agoraAppId = ''; - Open your mobile browser and view the
index.htmlpage (Audience) - Once the camera feed is visible, point the device at the marker to view the .
The
Channel nameis customizable withinjs/webvr-broadcast-client.jsandjs/webar-audience-client.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
To test the Audience with a traditional web broadcast ui:
- Visit https://digitallysavvy.github.io/group-video-chat in your Desktop browser
- Input your Agora AppID
- Input the channel name
WebAR
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