Cité de la musique live

Project management — Front-end development

Broadcasting live concerts and video on demand.

Cité de la musique live

Context

Released in October 2010, citedelamusiquelive.tv is a project to offer live concerts and video on demand for free on the Internet, after some one-shot tryouts made over the previous years. It is actually a direct consequence of negotiations with the copyright authority who let the Cité de la musique play a hundred hours of video for free on this site and, when you think about it, what better solution than to offer this service to all residents of France who, after all, contribute with their taxes to the budget of Cité de la musique. After some less ambitious beginnings, we were able to broadcast live events for the web and for iOS devices with an app for iPhone and iPad.

The visual design was done by Mosquito, the video player was made by Ototoï (Flash and HTML5) and I developed the live player in Flash.

Interesting facts about this project

Dealing with live events

It’s funny how something that worked fine just a couple of hours before will fail you in a live situation. You have to be prepared for it and have a spare of everything.
Also, even if you have done it a dozen times before, ALWAYS test your hardware with enough time prior to the event. Lastly, be sure that everybody involved in the development of your site is reachable if something goes wrong during a live event.

The other frustrating part of broadcasting live events happens when somebody calls you to tell you that the video is lagging, freezing or just plain broken at their place, especially if it’s one of your stakeholders.
Let’s follow the chain here:

1. the band or orchestra is playing
2. the cameramen are filming, with their video cameras hooked up to the editing room
3. the director is editing a live video feed
4. this feed is encoded to a stream by a server
5. this stream goes to a CDN via a potential technology such as a satellite, an optical fiber or even a good old copper wire
6. the CDN will replicate the stream to its servers all over the world
7. one of those servers will transmit the stream to the closest node in the user’s area
8. then the stream flows through the Internet network, via the same cable used by all of the user’s neighbors who may also be downloading content to their routers at the same moment
9. the user’s router will transmit the stream (via Ethernet? or wifi?) to his/her computer
10. the computer (how old? model? PC? Mac?) will decode the stream in a browser (but which one?) and display the choppy video

So, where did it go wrong? Checking every step is a nightmare and you basically don’t have all the variables at hand, especially since this is a temporary event. In the best scenario, you can check everything up to your CDN and after that…

What’s the score?

After every live event, the same question arises: How much viewers were there?
Or, to put it bluntly: Was it worth the hassle?

In my experience, the score is highly depending on the reputation of the artist: no surprise here, you won’t get thousands of people to watch a concert that is not selling well, no matter the price of the ticket. So the short answer is: between dozens and thousands, depending on the artist.
Furthermore, I agree with the argument that doing live events has a positive effect on the company’s image (though for how long until everybody else is doing it?) but in my humble opinion, the true value here is the on demand service. Being able to watch — or rewatch — a concert that you missed or attended is the real service. Plus you’ll get more features than during the live performance: better editing (without the intermission), a track-list and so on…

Another thing to mention when talking about statistics of stream viewers is: what are you counting exactly? If you are counting access to the stream (based on numbers the CDN is giving you), that’s great because you’ll have big numbers, but this is not very accurate: every time the stream stops and plays again, that’s a +1. And when you — like we do — have two qualities of streaming, it’s also a +1 every time the user is changing the quality. You see where I’m going here.

Of course, you can count the page loads, the page visitors, or even how many times the “play” button is pushed, but there will always be a gap between your stats and the reality, so I’m suggesting to measure your results relatively to your prior values and be very careful with the absolute number.

Improving the online live experience

After getting rid of the idea that you will sell fewer tickets if you are broadcasting the concert live (we never found any evidence of that), you can start to think about what would be the benefit of watching a live stream on the Internet over actually going to experience it in real life, assuming that you could, of course.

What more can you offer than the real thing? Over the years we tried different experiences:

• first, you might see more details, because the director knows his/her job and has an assistant following the score: he/she knows what to be focused on at every moment
• you can also offer your user the ability to switch cameras: we sometimes took this opportunity to offer 2 different streams. One was the director’s cut, the other one was a fixed shot of the conductor or the soloist if that is your thing. You have to understand here that offering more than one feed is very demanding in terms of hardware and bandwidth so you can’t multiply that by the number of cameras, for example.
• another way to explore is to be able to comment and share your feelings of what you’re experiencing without disturbing your neighbor. Typing on your computer is not an issue in terms of noise or light disturbance, and you can display a chat board next to the video. Here’s my feedback on that: it’s rare that people have interesting things to say when they’re experiencing a concert, whether they love or hate it, so the added value is not phenomenal. You can also have commentators like in sporting events; that might be better but this is not a guaranteed success.
• going further with the previous idea, it could have been interesting to let the people in the audience and those online participate in the same conversation, but this is impossible due to the delay between reality and the stream. Too bad, it could have been fun! (Although I must say that we never stopped to ask the audience at the beginning of the show to switch off their devices)
• something that we never tried: what if people in the audience — but also online viewers — could interact with the artist? Ask questions? Request songs? There might something here.

Home carousel

I developed the 3D carousel on the home page, but the tricky part was not so much the 3D effect as was getting the right list of videos to display.

We, the developers, like to have a system based on rules, the simpler the better, and NOT to have to do things manually, because it’s the best way to make mistakes. On the other end, stakeholders usually think that the rule is valid, but then will find every occasion to create an exception to the rule that must be integrated.

Here, the main rule is: we have 15 slots in the carousel, so you display first the next live concert, then the latest recorded concerts on demand, and then, if you have some space left, you fill it with the latest concert from the archives. Simple enough, right?

What if that night you have two live concerts happening at the same time? What if you have a 24-hour live broadcast event? What if you have an artist who doesn’t want you to broadcast the live feed but will let you show the video on demand after approving it? This is a never-ending story.

So to solve this problem, we had to have an automatic setting that could be overridden if necessary by a manual list of videos, and provide the interface that would go with it. My hardcore developer heart is still bleeding.

Technical specifications

This website was originally made with HTML, CSS, Javascript and FLASH. It has later been made responsive with an HTML5 video player.

We tried different vendors for the encoding service and CDN. We finally bought our own server for encoding and use EdgeCast for the CDN.

A quick update

This website was recently replaced due to the opening of the Philharmonie de Paris in January 2015. It’s a €400+ million project, including a philharmonic concert hall and exhibition spaces, and I was part of the team that designed its digital presence, but that’s a different story…

Originally published at www.ventrebleu.com on October 13, 2010.