-1

I have received a very specific requirement from a client and am not sure what solution to use.

My client would like to play an online streaming video while overlaying texts and images in a sort of augmented reality fashion. These texts and images would be tempered with/animated to fit accordingly in the video (stretched, skewed, rotated, alpha'ed etc) and these assets could possibly have to be animated TO "FOLLOW" on the videos themselves.

Therefore it would be way more than just the "average" video player. The solution is probably to write a component that uses OpenGL but I have no "web" AR experience.

Are there any materials/research on this subject I could start with?

Last but not least, there are a few additional constraints: - Compatibility with mobiles (Android / iOS) which prevents using Flash. - We are just talking "web" here (no opening for mobile apps). - Finally, I'd prefer to avoid the installation of plug-ins (i.e. Firefox plug-ins)

Thanks!

Yann
  • 119
  • 4
  • software recommendations are explicitly off-topic per [help/on-topic] (it's the same here as at Stack Overflow). See http://meta.programmers.stackexchange.com/questions/6483/why-was-my-question-closed-or-down-voted/6487# – gnat Oct 14 '14 at 08:04
  • @gnat: I think half of the question is a software recommendation, but I don't think there's a COTS solution available for this so the other half of the question is more about the strategy to architect and implement this yourself. That in itself makes it an interesting challenge, so I wouldn't vote to close this. – haylem Oct 14 '14 at 11:21
  • @gnat to follow on haylem's comment, the original question is not about a tool/software recommendation but a legit "how to implement". I'll reword the topic. – Yann Oct 14 '14 at 22:24
  • recommended reading: Where to start? – gnat Oct 15 '14 at 03:39

1 Answers1

1

WebGL

WebGL could be a solution, but mobile support is going to be rather sparse, and requires a plugin activation even for not so distant versions of modern browsers.

A Custom Video Renderer

You could probably do away with implementing a video renderer using a Canvas, though I'm not sure how much fun this would be... (Well this would quite fun as a programmer I guess, but probably not so great within the timeframe and constraints of a commercial project).

Video with Canvas Overlay

Maybe look at these blog posts for inspiration, that's mostly what I had in mind when I read your question:

It's definitely doable, though it's going to take some work. Also, make sure to clarify all these platform requirements and see what will or won't work, and to see if you can have dumbed-down alternatives for platforms you can't support (e.g. maybe just have video support and no interactivity, instead of nothing at all, etc...).

Tag Support

Tag support should be decent enough on modern platforms for <canvas> and <video>, as documented here and here, but make sure you test this properly with a quick prototype first. For instance, WebGL support isn't so great (as of October 2014), and canvas blending might also be a bit deficient (as of October 2014, it kills IE support for you). Beware of the video format you use as well.

So depending on how you want to approach this, you may have to roll out different solutions for different platforms.

haylem
  • 28,976
  • Thanks Haylem, we are definitely going for the canvas solution over and have started working on a prototype that looks as expected. – Yann Oct 20 '14 at 13:19