Live streaming with html5 - plus how does Youtube do it?

video youtube video-streaming html5 wii-u

27,999

Youtube actually uses the HLS "Http Live Streaming" method that Apple invented and is trying to standardize.

I replicated that method using a elaborate command line for VLC and a HTTP web server and it worked on the Wii U.

Here's the command line:

"c:\program files (x86)\videolan\vlc\vlc" -I rc dshow:// vdev="XSplitBroadcaster" adev="XSplitBroadcaster" size="1280x720" --sout=#transcode{width=1280,height=720,fps=25,vcodec=h264,vb=256,venc=x264{aud,profile=baseline,level=30,keyint=30,ref=1},acodec=mp3,ab=96,channels=2}:std{access=livehttp{seglen=10,delsegs=true,numsegs=5,index=C:\inetpub\wwwroot\stream\stream.m3u8,index-url=http://dennis/stream/stream-########.ts},mux=ts{use-key-frames},dst=C:\inetpub\wwwroot\stream\stream-########.ts}

Here, for a quick set up, is html code that accesses this stream:

<!doctype html>
<html>
<head></head>
<body>
<video width="320" height="240" controls="controls">
    <source src="/stream/stream.m3u8" type="application/x-mpegURL" />
</video>
</body>

</html>

Whoever uses this, you will have to change all the variables in there. It uses "chunk files" which it puts onto the web server's wwwroot which can then be streamed by an iDevice or a Wii U.

I personally think that this would have it's best place on a ramdisk because the data rapidly changes and there isn't a lot of data around at one time.

27,999

sinni800

Updated on September 18, 2022

Comments

sinni800 almost 2 years

So I have a Wii U now and tested Youtube Live streaming... and it worked flawlessly. Wow, I thought, I have to find out what kind of codec, container format, protocol, etc is used, but I kinda failed at that task.

I tried using Chrome to access the Youtube Live version but before a <video> tag that would give me this kind of information in it's source parameter could even appear in the DOM, it told me that the browser doesn't support any of the available video formats. I tried the same using different browsers (Opera, FF, IE9). Deactivating Flash, thus forcing the html5 player to kick in. I always got the same message.

Wow, so the HTML5 streaming, so far, only works on my Wii U... And probably the IOS devices, but I don't have one of those.

Okay, so basically what I would like to know: How do they realize the <video> live streaming? What container format, codecs, etc is used? I can't really access that info with my knowledge.

And any tips on how to replicate said format. I am not trying to broadcast something to the whole world - I'm rather trying to just broadcast something to my Wii U, anything otherwise wouldn't make much sense at this stage. I basically only need anything that accepts a DirectShow input on Windows.
- slhck over 11 years
  
  YouTube Live Streaming for the desktop still uses Flash-based streaming, not HTML5. Probably like Adobe's Flash streaming, which also uses "normal" Flash for desktop and HTTP Live Streaming for iOS (which is Apple-specific). About the Wii U, no idea, there doesn't seem to be any specification on what it does.
- sinni800 over 11 years
  
  No dice, it doesn't work. Even when I installed quicktime (which is another 36 Megabytes just to make this browser support <video> with h.264) it didn't work. So yeah, I think it's really the Apple Http Live Streaming technique that's sitting behind there. And it seems to only work on iDevices - and probably Wii U... See, this is the trouble with videos through html5. It's beautifully enclosed with standards... until some part isn't standardized and it just goes all over the place. And people think that html5 is the death for flash. Not in it's current state.
- sinni800 over 11 years
  
  Using VLC and an elaborate command line (pastebin.com/x5fqPrK5) I actually got to reproduce the whole Apple HLS thing... And it didn't work on my Wii U. Awesome. Now I don't know what I can do.
- sinni800 over 11 years
  
  * It did work, I used it to publish to a local Microsoft IIS. I found out that you need to set the mime types or IIS won't touch those files... Now that I answered my question in a different way... I don't really know if this question is answerable anymore. But I really think this is what Youtube does since (I tested) it works on iDevices too.
- slhck over 11 years
  
  Sorry I couldn't follow up really since I can't test it, but it's nice you documented it here. If you like we can close this question as "too localized" or something, or you can simply answer it and explain what you did for future reference?
- sinni800 over 11 years
  
  I answered it myself and I can accept in 7 hours. I theorized that this is actually the technique that Youtube uses... And I hope I am right. Maybe someone else will find this and find it helpful!
Kevkong over 11 years

Are sure about youtube using HLS, because I can play HTML5 Youtube-videos in my google chrome but the HLS teststream provided by apple does not (devimages.apple.com/iphone/samples/bipbopall.html), so I think youtube is using another method, I read something about XHR, but I am not there yet.
Kevkong over 11 years

Yea same here, searched yesterday about 4 hours and did not find out how youtube is streaming html5 videos to make them playable in chrome. But I really would like to know, cause I want to accomplish the same thing, stream videos to html5 tag. There is still the possibility, that youtube is using several methods and changing them depending on the used browser.
sinni800 over 11 years

I tried looking through the JS, actually, but it was very, very tedious to do that. I couldn't find anything out in this minified code. Since I didn't find a browser on Windows which could actually do it, I couldn't use the browsers dev tools to find out what kind of file is loaded in the <video> container (since the vidoe container was not loaded since the JS determined it was not supported!) I determined that it would be the Apple HLS by exclusion... But it seems that I oversaw another method...
sinni800 over 11 years

Wait, wait, wait... @Kevkong... Try somethign else, play a html LIVE video in chrome with html5 enabled. You will either end up with Flash, or when Flash is disabled, Youtube will say that it's not compatible with this browser. Normal videos play fine, since they are h.264/webm. So don't try this with NORMAL videos, do it with LIVE videos at youtube.com/live
Kevkong over 11 years

I do always end up with flash, when I try to watch a live video, but even when I am watching normal videos I do. I do find the video tag on html5 youtube pages, but the src is something very long and it does not look like a file. The reason why I think they use streams for normal videos is, because I can click on any point of the video and it is playing instant from there. When I am using a normal video source it is usually kind of slow.
sinni800 over 11 years

They don't use streams for normal videos. They just request the video at the given time and the server sends back a part response as far as I know
Kevkong over 11 years

So the video is splited into any number of parts and the part matching the time is requested? The src of the video tag stays the same the whole time.
sinni800 over 11 years

I didn't say that. It's the same video, but the client requests a time from the video.
Partap Davis over 8 years

It's been a while since this question was asked, but I just checked...Live Youtube videos are now playing in an HTML5 <video> element in Chrome, but Chrome still doesn't support HLS streaming. Any new ideas how they do it?
Maciej Łopaciński over 8 years

Hi guys, on desktop youtube uses dash, on mobile hls (just like twitch). @PartapDavis Chrome supports Dash (desktop) and HLS (mobile). See developer.mozilla.org/en-US/Apps/Build/Audio_and_video_deliv‌ery/… BTW, there is github.com/RReverser/mpegts which implements HLS in modern desktop browser via XHR, just played with it and works fine.
sinni800 over 8 years

@MaciejŁopaciński Yeah, by now Live is DASH. The question was asked in 2012 where they still used flash and, seemingly, HLS (and they probably still do, for Apple, etc).