DigiLecture ~ WebVR + VideoNote

Inspiration

DigiLecture brings your 8AM classes to you through the power of Virtual Reality! Attend classes in a virtual reality lecture hall, and browse through Cornell VideoNote quickly and efficiently through our website.

What it does

DigiLecture is a WebVR front end to Cornell's VideoNote, that allows you to attend lectures in a digital lecture hall! (You can also watch short films like Big Buck Bunny too!)

How we built it

We built DigiLecture using a combination of Mozilla's A-Frame library and WebVR on the front end, and Node.js and express on the back end. Our server and media files are both hosted on Microsoft Azure, using App Services and Media Services respectively. We also used Blender to create the 3D assets for the lecture hall.

Challenges we ran into

We had some fun challenges regarding web security. First, we had to figure out how to best serve the VideoNote files to our VR front end. Next, we had to resolve CORS issues regarding resource sharing. Finally, mobile VR has some quirks regarding inline video files, so we had to come up with an innovative solution and a quick pivot to overcome the problem.

Accomplishments that we're proud of

Using Virtual Reality to make a cool project! Both of us are very excited by VR, and we wanted the opportunity to explore it in a fun and encouraging environment like Big Red Hacks.

What we learned

Web security is important but also sometimes annoying. :)

What's next for DigiLecture ~ WebVR + VideoNote

While working on the project, we realized not only did we make a digital lecture hall, but we also inadvertently made a virtual reality movie theater! We'd likely want to explore more of this side of the project down the line. Plus, since it's a website, maybe we could even add multiplayer?!

Built With

• aframe
• azure
• ejs
• express.js
• google-daydream
• javascript
• node.js
• videonote