In the last few years of working with WebRTC, we occasionally come across some fun, creative, offbeat, or even crazy uses of WebRTC. As app developers, we enjoy this kind of thing quite a bit. After all, it’s not the technology that is important, it’s the application of the technology. We’ve decided to start sharing some of our favorite oddball WebRTC apps in a series I lovingly call #WeirdRTC.
Some of you who have been working around WebRTC for a while now probably remember this one. But it’s so good that it deserves another mention.
The Game
The game itself is pretty simple: if you ever played Pong (and really, who hasn’t?) then the play will be familiar. For the uninitiated: a ball is sliding back and forth across the court, like Tennis, but flat. You have a paddle you can use to bounce the ball back at your competition. If your competitor misses and fails to return the ball, you get 1 point. If you miss, they get 1 point. The winner is the first person to get 3 points.
But what makes Cube Slam so much more fun than Pong is the video. Each player is shown to the other on a giant billboard at the other end of the court. You’re not just sliding a ball across the table into a net; instead you’re trying to use the ball to hit your competitor’s video-billboard and smash the screen. Each time the ball gets past the paddle, the screen takes a little damage, like cracks in an LCD. Finally, whenever the third ball strikes, the entire screen breaks into a bunch of little cubes and come tumbling down! If you look very closely, you can see that the video is actually still playing on each of the broken cubes. Very cool!
The Technology
Besides being visually very appealing, the game employs a number of very advanced HTML5 tricks:
- HTML5
<video>and<audio>tags are used to play the media, including competitor video streams and even in-game music - WebGL is used to render the entire game landscape in 3D – little polygonal rabbits and deer dot the landscape outside the game arena
- WebRTC of course: WebRTC is used not just to access the camera and transmit the video, but the WebRTC DataChannel is actually used to send game-play data, such as position of the ball and position of each player’s paddle, to the other side
But this is just a short summary. Want to know more? The Cube Slam developers actually created a great recap of the technology they used.
Best of all? The entire thing is Open Source
WebRTC Games
The idea of using WebRTC for games has come up repeatedly, and several very impressive demos have been made. I think my favorite WebRTC game is still Cube Slam. It’s a visually beautiful mix of WebRTC technology and gaming fun.
If you are interested in other games built around WebRTC here are some additional fun ones to play with:
- BananaBread, a first-person shooter ported from Cube 2: Sauerbraten (no relation to Cube Slam above)
- The Hobbit: The Battle of Five Armies also reportedly uses WebRTC DataChannel to keep peers synced, although there’s no indication that WebRTC video is involved