better integration with vlc

Alessandro-Barbieri commented 9 years ago

Can this addon work with the firefox vlc plugin instead of calling vlc externally?

IsSuEat commented 9 years ago

Hi there! What plugin are you talking about exactly?

ah I think I found it. This one? http://git.videolan.org/?p=npapi-vlc.git;a=summary

Alessandro-Barbieri commented 9 years ago

I use Debian so it's https://packages.debian.org/it/wheezy/mozilla-plugin-vlc depends on https://packages.debian.org/it/wheezy/browser-plugin-vlc source: https://packages.debian.org/it/source/wheezy/npapi-vlc

julianrichen commented 9 years ago

With PR #24 (3fd09322886cb99a1ce32152e91b35d5af3b757d) we use livestreamer to verify the url & get the qualities. This is done with:

livestreamer --json [URL]

Here is an example:

{
  "streams": {
    "medium": {
      "headers": {
        "Connection": "keep-alive", 
        "Accept-Encoding": "gzip, deflate", 
        "Accept": "*/*", 
        "User-Agent": "python-requests/2.7.0 CPython/2.7.10 Linux/4.0.0-1-amd64"
      }, 
      "type": "hls", 
      "url": "http://video12.iad02.hls.ttvnw.net/hls112/ogaminglol_14742812320_253390482/medium/py-index-live.m3u8?token=id=4130978555210124957,bid=14742812320,exp=1433691075,node=video12-1.iad02.hls.justin.tv,nname=video12.iad02,fmt=medium&sig=5d5656acf95519d0689d69012100a368428eb170"
    }, 
    "mobile": {
      "headers": {
        "Connection": "keep-alive", 
        "Accept-Encoding": "gzip, deflate", 
        "Accept": "*/*", 
        "User-Agent": "python-requests/2.7.0 CPython/2.7.10 Linux/4.0.0-1-amd64"
      }, 
      "type": "hls", 
      "url": "http://video12.iad02.hls.ttvnw.net/hls112/ogaminglol_14742812320_253390482/mobile/py-index-live.m3u8?token=id=4130978555210124957,bid=14742812320,exp=1433691075,node=video12-1.iad02.hls.justin.tv,nname=video12.iad02,fmt=mobile&sig=4457dda73a72bc8653d215dfb4c43921807520bb"
    }, 
    "high": {
      "headers": {
        "Connection": "keep-alive", 
        "Accept-Encoding": "gzip, deflate", 
        "Accept": "*/*", 
        "User-Agent": "python-requests/2.7.0 CPython/2.7.10 Linux/4.0.0-1-amd64"
      }, 
      "type": "hls", 
      "url": "http://video12.iad02.hls.ttvnw.net/hls112/ogaminglol_14742812320_253390482/high/py-index-live.m3u8?token=id=4130978555210124957,bid=14742812320,exp=1433691075,node=video12-1.iad02.hls.justin.tv,nname=video12.iad02,fmt=high&sig=25e9a6d350cd607e2ab84908e3e3638d02d95e91"
    }, 
    "source": {
      "headers": {
        "Connection": "keep-alive", 
        "Accept-Encoding": "gzip, deflate", 
        "Accept": "*/*", 
        "User-Agent": "python-requests/2.7.0 CPython/2.7.10 Linux/4.0.0-1-amd64"
      }, 
      "type": "hls", 
      "url": "http://video12.iad02.hls.ttvnw.net/hls112/ogaminglol_14742812320_253390482/chunked/py-index-live.m3u8?token=id=4130978555210124957,bid=14742812320,exp=1433691075,node=video12-1.iad02.hls.justin.tv,nname=video12.iad02,fmt=chunked&sig=a1c9a224ce2a0b5540956cd1c8447a3892673e37"
    }, 
    "worst": {
      "headers": {
        "Connection": "keep-alive", 
        "Accept-Encoding": "gzip, deflate", 
        "Accept": "*/*", 
        "User-Agent": "python-requests/2.7.0 CPython/2.7.10 Linux/4.0.0-1-amd64"
      }, 
      "type": "hls", 
      "url": "http://video12.iad02.hls.ttvnw.net/hls112/ogaminglol_14742812320_253390482/mobile/py-index-live.m3u8?token=id=4130978555210124957,bid=14742812320,exp=1433691075,node=video12-1.iad02.hls.justin.tv,nname=video12.iad02,fmt=mobile&sig=4457dda73a72bc8653d215dfb4c43921807520bb"
    }, 
    "low": {
      "headers": {
        "Connection": "keep-alive", 
        "Accept-Encoding": "gzip, deflate", 
        "Accept": "*/*", 
        "User-Agent": "python-requests/2.7.0 CPython/2.7.10 Linux/4.0.0-1-amd64"
      }, 
      "type": "hls", 
      "url": "http://video12.iad02.hls.ttvnw.net/hls112/ogaminglol_14742812320_253390482/low/py-index-live.m3u8?token=id=4130978555210124957,bid=14742812320,exp=1433691075,node=video12-1.iad02.hls.justin.tv,nname=video12.iad02,fmt=low&sig=1bdc9413d342d03e443cfb4e061293dc78579fac"
    }, 
    "audio": {
      "headers": {
        "Connection": "keep-alive", 
        "Accept-Encoding": "gzip, deflate", 
        "Accept": "*/*", 
        "User-Agent": "python-requests/2.7.0 CPython/2.7.10 Linux/4.0.0-1-amd64"
      }, 
      "type": "hls", 
      "url": "http://video12.iad02.hls.ttvnw.net/hls112/ogaminglol_14742812320_253390482/audio_only/py-index-live.m3u8?token=id=4130978555210124957,bid=14742812320,exp=1433691075,node=video12-1.iad02.hls.justin.tv,nname=video12.iad02,fmt=audio_only&sig=5173f3446b0eb5ddc49e11377b77b60bbd06d90c"
    }, 
    "best": {
      "headers": {
        "Connection": "keep-alive", 
        "Accept-Encoding": "gzip, deflate", 
        "Accept": "*/*", 
        "User-Agent": "python-requests/2.7.0 CPython/2.7.10 Linux/4.0.0-1-amd64"
      }, 
      "type": "hls", 
      "url": "http://video12.iad02.hls.ttvnw.net/hls112/ogaminglol_14742812320_253390482/chunked/py-index-live.m3u8?token=id=4130978555210124957,bid=14742812320,exp=1433691075,node=video12-1.iad02.hls.justin.tv,nname=video12.iad02,fmt=chunked&sig=a1c9a224ce2a0b5540956cd1c8447a3892673e37"
    }
  }, 
  "plugin": "twitch"
}

You might notice that each quality has a url key, this is the raw url to the feed. As @Alessandro-Barbieri mentioned if you have mozilla-plugin-vlc (browser-plugin-vlc) installed you can use vlc in the browser. This is done with the minimal code:

<embed type="application/x-vlc-plugin"
       pluginspage="http://www.videolan.org"
       name="openInLivestreamerPlugin"
       id="openInLivestreamerPlugin"
       autoplay="yes" loop="yes" width="1280" height="720"
       target="[RAW URL FROM ABOVE]" />

This plays the stream in the browser with zero effort on our part. However it uses the vlc-plugin, a feature that I find kind of buggy.

I then wondered if we could do it in HTML5, like this:

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

Technically it should work BUT because it's encoded it won't, unless you follow the advice here (yet to try it): http://superuser.com/questions/513100/live-streaming-with-html5-plus-how-does-youtube-do-it/513646#513646

I have yet to try this command but it makes vlc re-encode the m3u8 stream into something HTML5 <video> can read.

"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}

I bet we can get even better performance with ffmpeg, however this will require the user to install another package. A trivial task on Linux/Mac but on Windows could cause users some problems. So we should offer the following options:

With VLC-plugin
With HTML5 (vlc encoding)
With HTML5 (ffmpeg encoding)

Goals:

[x] Proof of concept (vlc-plugin above works)
[ ] HTML5 with vlc encoding
[ ] HTML5 with ffmpeg encoding
[ ] Redesign UI quality buttons to have a second button next to each option to launch in the browser, maybe an icon of a browser window to reduce the space needed
[ ] Replace player in browser with above options, we will need to make a list of query selectors for document.querySelector() for each site. Maybe a file in `data/player.json' :

{
    "twitch.tv": {
        "selector": "#channel .player-column #player"
    },
    "hitbox.tv": {
        "selector": "#detail-player #player-box"
    }
}

IsSuEat / open-livestreamer-firefox-addon

better integration with vlc #17