Plex web player with a twist

Dev Community Apps & Creations
1
A web based player for Plex that uses myPlex
Hi everybody,
I've been working on a web player for Plex for a few weeks now and since it's getting to a point where it does something useful, I felt like talking about it on the forum.

This player is essentially a web server written in node.js that acts as a proxy between the web interface and your media servers.
The nice touch about it is that is uses myPlex to actually get the list of your servers. So no need to configure anything, just enter your myPlex credentials and enjoy.
From there, you'll have access to your movies and tv shows and you'll be able to play them from your browser.
Based on the platform you're on, it will use flash or html video tags to play the transcoded video (you can choose the quality as well). I'm using jwplayer for that with their adaptive plugin. It's not yet rock perfect, but does a good enough job to play HLS streams.

The look & feel is taken from [Plex-Export](http://hybridlogic.co.uk/code/standalone/plex-export/) by Luke Lanchester, I'm just too bad at CSS and he designed a great looking interface.
It's running on any recent Chrome, Safari, Firefox and IE9 (not thoroughly tested).

http://proto.jfremy.fr:32401/images/plexjs.png



So if you're still reading me by then, two options:
[list][*]you can try it out at [https://proto.jfremy...blic/index.html](https://proto.jfremy.fr:32402/public/index.html) (this means your myPlex credentials will go through my server, but I'm not logging it, just forwarding it to myPlex to get an access token)[*]you can clone the git repositiory from github at [https://github.com/jfremy/plexjs](https://github.com/jfremy/plexjs),[list][*]install node.js (if you dont have it already) [http://nodejs.org/](http://nodejs.org/) (version 0.6.12 or later)[*]start the server by typing "node src/server.js" from the directory where you checked out the code.[*]open the page [http://localhost:800...blic/index.html](http://localhost:8000/public/index.html) (or replace localhost with the ip or host name where you installed the server).[/list][/list]
And make sure you're using at least the latest stable release of the Plex Media Server

Any ideas / suggestions are welcome.

cheers
Jeff
2

installed it locally and it seems to work great! this is very cool. One question… when it plays the movie it is in a really small window, I can go full screen, but is there any way to get it a bit larger without going full screen? Perhaps it should choose a player size based on the playback quality option if you can’t make it dynamically scalable.



I have high hopes for this. At work I use a linux workstation and it would be amazing to be able to use my PMS at work with the browser. Very nice.



Any hope for a music section?



thanks!

3

This is really fantastic Jeff! Incredibly well done; I’ll have some feedback after I’ve messed around a bit more but I just wanted to get in a quick ‘wow’ :slight_smile:

4

Hi,

tried this but im getting a 401 on my local installation. Any ideas ???



R :sunglasses:

5

I can pull up the page, but just get a ‘loading…’ screen. It also shows a ‘sign out’ link, but not having logged in I’m not sure why that’s there… I’m not prompted to sign in but I can pull up the login.html page directly; I do get a login option, but submitting it throws me to a non existent /login folder. Are there any dependencies that would not be included on a default install? -also is there anything that needs to be adjusted outside of the config file?

6

Hi,

could you tell me what you did and which url you’re trying to open?



Can you try the following, assuming you’re on the computer where plexjs is installed:

[list][]start plexjs: node src/server.js[]open the page: http://localhost:800…blic/index.html[/list]

If it does not work for you, could you send me what is displayed in the console running the nodejs server?



Cheers

Jeff

7

Hi David,

nothing to configure to get it started (or at least, there should be nothing).



Can you send me the content of the logs displayed in the console where you run the nodejs server?



Jeff


8

Hi,

tried the link.I get a login page but no joy .I’ve tried both username and e-mail with the password. heres a paste of the noder server log.



/Downloads/plexweb/plexjs$ node ‘/home/ralph/Downloads/plexweb/plexjs/src/server.js’

127.0.0.1 - - [Sun, 10 Jun 2012 09:22:45 GMT] “GET /public/index.html HTTP/1.1” 200 4519 “http://forums.plexapp.com/index.php/topic/42715-plex-web-player-with-a-twist/page__gopid__270732” “Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0”

127.0.0.1 - - [Sun, 10 Jun 2012 09:22:45 GMT] “GET /public/css/iphone-retina.css HTTP/1.1” 200 - “http://localhost:8000/public/index.html” “Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0”

127.0.0.1 - - [Sun, 10 Jun 2012 09:22:45 GMT] “GET /public/css/style.css HTTP/1.1” 200 10339 “http://localhost:8000/public/index.html” “Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0”

127.0.0.1 - - [Sun, 10 Jun 2012 09:22:45 GMT] “GET /public/css/iphone.css HTTP/1.1” 200 1328 “http://localhost:8000/public/index.html” “Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0”

127.0.0.1 - - [Sun, 10 Jun 2012 09:22:45 GMT] “GET /public/js/jquery.inview.js HTTP/1.1” 200 4555 “http://localhost:8000/public/index.html” “Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0”

127.0.0.1 - - [Sun, 10 Jun 2012 09:22:45 GMT] “GET /public/js/utils.js HTTP/1.1” 200 1150 “http://localhost:8000/public/index.html” “Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0”

127.0.0.1 - - [Sun, 10 Jun 2012 09:22:45 GMT] “GET /public/js/plex.js HTTP/1.1” 200 44112 “http://localhost:8000/public/index.html” “Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0”

127.0.0.1 - - [Sun, 10 Jun 2012 09:22:45 GMT] “GET /public/js/jwplayer.js HTTP/1.1” 200 154763 “http://localhost:8000/public/index.html” “Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0”

127.0.0.1 - - [Sun, 10 Jun 2012 09:22:45 GMT] “GET /public/js/jquery.js HTTP/1.1” 200 252881 “http://localhost:8000/public/index.html” “Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0”

127.0.0.1 - - [Sun, 10 Jun 2012 09:22:45 GMT] “GET /public/images/background.jpg HTTP/1.1” 200 5629 “http://localhost:8000/public/css/style.css” “Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0”

127.0.0.1 - - [Sun, 10 Jun 2012 09:22:45 GMT] “GET /public/images/favicon.ico HTTP/1.1” 200 1150 “-” “Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0”

127.0.0.1 - - [Sun, 10 Jun 2012 09:22:45 GMT] “GET /public/images/container-bg.png HTTP/1.1” 200 291 “http://localhost:8000/public/css/style.css” “Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0”

127.0.0.1 - - [Sun, 10 Jun 2012 09:22:45 GMT] “GET /public/images/logo.png HTTP/1.1” 200 15575 “http://localhost:8000/public/css/style.css” “Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0”

127.0.0.1 - - [Sun, 10 Jun 2012 09:22:45 GMT] “GET /servers/ HTTP/1.1” 401 39 “http://localhost:8000/public/index.html” “Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0”

{ statusCode: 401, msg: ‘Error contacting server’ }

127.0.0.1 - - [Sun, 10 Jun 2012 09:23:06 GMT] “POST /login HTTP/1.1” 401 50 “http://localhost:8000/public/index.html” “Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0”

{ statusCode: 401, msg: ‘Error contacting server’ }

127.0.0.1 - - [Sun, 10 Jun 2012 09:23:29 GMT] “POST /login HTTP/1.1” 401 50 “http://localhost:8000/public/index.html” “Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0”

{ statusCode: 401, msg: ‘Error contacting server’ }

127.0.0.1 - - [Sun, 10 Jun 2012 09:24:10 GMT] “POST /login HTTP/1.1” 401 50 “http://localhost:8000/public/index.html” “Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0”

9

Hi,

Part way to finding the cause…



PING my.plexapp.com (50.18.170.107) 56(84) bytes of data.

^C

— my.plexapp.com ping statistics —

37 packets transmitted, 0 received, 100% packet loss, time 36288ms



a bit bizarre as im logged into myplex in the browser…

10

Any dns experts in the house…?



traceroute my.plexapp.com

traceroute to my.plexapp.com (50.18.170.107), 30 hops max, 60 byte packets

1 bebox.config (192.168.1.254) 58.827 ms 58.787 ms 58.764 ms

2 * * *

3 * * *

4 * * *

5 ethernet21-2.ar9.lon3.gblx.net (64.212.32.89) 28.711 ms ethernet21-3.ar9.lon3.gblx.net (64.212.34.205) 30.955 ms ethernet21-2.ar9.lon3.gblx.net (64.212.32.89) 30.944 ms

6 ae6.scr4.LON3.gblx.net (67.17.106.150) 25.666 ms 14.967 ms 15.183 ms

7 te7-4-10G.ar6.LON3.gblx.net (67.16.144.249) 19.745 ms te6-4-10G.ar6.LON3.gblx.net (67.16.141.137) 21.835 ms te7-4-10G.ar6.LON3.gblx.net (67.16.144.249) 15.453 ms

8 p1-0.globalcrossing.londen03.uk.bb.gin.ntt.net (208.50.13.146) 16.717 ms 21.095 ms 21.091 ms

9 ae-4.r22.londen03.uk.bb.gin.ntt.net (129.250.5.24) 31.730 ms 22.015 ms 24.091 ms

10 as-0.r22.nycmny01.us.bb.gin.ntt.net (129.250.3.254) 103.077 ms 105.154 ms 97.166 ms

11 ae-4.r21.sttlwa01.us.bb.gin.ntt.net (129.250.2.51) 182.217 ms 172.638 ms 166.046 ms

12 ae-0.r20.sttlwa01.us.bb.gin.ntt.net (129.250.2.53) 173.399 ms 181.738 ms 181.948 ms

13 ae-5.r21.snjsca04.us.bb.gin.ntt.net (129.250.3.39) 173.556 ms 182.191 ms 164.462 ms

14 ae-2.r07.snjsca04.us.bb.gin.ntt.net (129.250.5.57) 166.965 ms 166.336 ms 168.061 ms

15 ae-4.r06.plalca01.us.bb.gin.ntt.net (129.250.4.118) 167.460 ms 167.337 ms 181.575 ms

16 ae-0.amazon.plalca01.us.bb.gin.ntt.net (140.174.21.182) 161.706 ms 181.212 ms 168.706 ms

17 205.251.229.40 (205.251.229.40) 165.199 ms 205.251.229.46 (205.251.229.46) 183.964 ms 205.251.229.40 (205.251.229.40) 183.975 ms

18 205.251.229.106 (205.251.229.106) 198.826 ms 72.21.222.19 (72.21.222.19) 173.219 ms 205.251.229.110 (205.251.229.110) 173.218 ms

19 216.182.236.108 (216.182.236.108) 172.467 ms 168.328 ms 216.182.237.72 (216.182.237.72) 169.039 ms

20 * * *

21 * * *

22 * * *

23 * * *

24 * * *

25 * * *

26 * * *

27 * * *

28 * * *

29 * * *

30 * * *

11

Hi bigpanda,

same thing here on my side, I cannot ping myPlex servers but Plex JS works fine for me (I took a clean checkout from github, so should be the same as what you’re using).



Can you try to logout and then login back on the myPlex server just to make sure the login/password you’re using are the correct ones?

If that works on the site and not on Plex JS, please send me a private message and we’ll look into it



Jeff

12

I think something must have gone wrong with my initial clone; I removed and recloned and now it works just dandy. I had PMS set to auto map the port so it didn’t work at first, but after manually specifying port 32400 it now works perfectly. This is really, really fantastic Jeff - job well done man.

13

Hey, good work



Unfortunately I seem to get a plain white login page and after logging in I get “Cannot GET /”



Is there something I may have missed? Doesn’t seem to be a permissions issue



Here’s what happens on the command line:



root@ks309xxx:/home/vshosts/plexPlayer# node src/server.js<br />
176.250.205.x - - [Tue, 12 Jun 2012 15:41:45 GMT] "GET / HTTP/1.1" 302 - "http://94.23.63.x:8000/public/login.html?redirectTo=%2F" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5"<br />
176.250.205.x - - [Tue, 12 Jun 2012 15:41:45 GMT] "GET /public/login.html?redirectTo=%2F HTTP/1.1" 304 - "http://94.23.63.x:8000/public/login.html?redirectTo=%2F" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5"<br />
176.250.205.x - - [Tue, 12 Jun 2012 15:41:46 GMT] "GET /public/login.html HTTP/1.1" 304 - "http://94.23.63.x:8000/public/login.html?redirectTo=%2F" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5"<br />
176.250.205.x - - [Tue, 12 Jun 2012 15:41:46 GMT] "GET /public/js/jquery.js HTTP/1.1" 304 - "http://94.23.63.x:8000/public/login.html?redirectTo=%2F" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5"
14

Hi Marty,

for now, you need to access directly /public/index.html (so if you’re on the server where node.js runs, that would be http://localhost/public/index.html)

I need to update the code so that / redirects to the main page, that will make it a lot easier



Jeff

15


Aha, success! If it were PHP I would suggest that you could use:

header('Location: /public/index.html');


Not sure about node though!
16

Great, I realize that this is not completely user friendly install wise.

I’ll try to improve that.



As for the redirect, I already know how to do it. I just have to finish a few things and I’ll publish an update on GitHub



Jeff

17

First off great work Jeff. Amazing interface and highly intuitive.



Now for my issue… I compiled the latest version (0.6.19) of node js for Slackware (since I use Unraid). I did the git clone, ran your app. I can get to the server, I can log in, the log shows that “User logged in MyPlexUserName” then I get:



<br />
192.168.111.xx - - [Sat, 16 Jun 2012 06:40:47 GMT] "POST /login HTTP/1.1" 201 113 "http://192.168.111.x:xxxx/public/index.html" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5"<br />
192.168.111.xx - - [Sat, 16 Jun 2012 06:40:47 GMT] "GET /servers/ HTTP/1.1" 200 258 "http://192.168.111.3:xxxx/public/index.html" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5"<br />


Then it just sits there forever (note: I inserted "x" to hide ports and such in the log above). I tried the following:

1. Permissions - Changed all permissions to 777 and ownership to nobody:users (just to make sure it wasn't a permissions issue)
2. Port - I fixed my randomly generated port for 32400 and confirmed I can reach the server from my.plexapp.com. I also tested from an iPad on LTE and can get to the server

The log isn't telling me much else. Eventually it fails and says:

Could not contact Plex Media Server Tower (xxx.xxx.xxx.xxx:32400)

The xxx.xxx.xxx.xxx is my externally facing ip address (which is static). When this error happens I have no new log entries just the two above...

Thanks in advance for any ideas you may have.

G

UPDATE: I tried using your server and it works fine. I did notice that the footer on your server is a little different than the latest version on GIT. I did delete the directory and cloned again to make sure it wasn't a bad pull...
18

Same install as GBDesai on unraid, exact same issue… Haven’t had much of a chance to play with it, but using your server, again, it works fine.



Also getting a error: cannot load m3u8 Crossdomain restriction error. I got that on your server as well as the locally ran server.

19


Wonder if it's our version of Node.JS. I have compiled and tried both 0.6.17 and 0.6.19 to the same effect. What version was this originally developed against?
20

Node.JS 0.6.17 or 0.6.19 should be fine (was developped against the former, then updated to the later)



My server is running the development branch from GitHub. Can you try it? (you’ll need redis on your server as well though … I’m in the process of making this optional but for now, it’s needed)



Regarding the other issues, here are a few things:

[list][]crossdomain.xml issue: you need the latest version of the media server. Before that, the crossdomain.xml file on the media server was protected by the authent mechanism and the flash “virtual machine” did not support it[]potential for networking issue: depending on your routers, you might run into problem. PlexJS relies on the ip:port advertised by myPlex. This is the “internet facing” ip:port. So if you’re on the same private network as your plex media server (everybody behind the same router), your browser and PlexJS will try to connect to the media server through the external address. Some router do not work properly in this case and are not able to route back the packets to the private network (to give an example, plexjs => public facing ip => router => private ip). Sometimes this does not work properly only for upnp created port forwards.[list][]To check if you’re in that case, try to connect using your browser to http://[plex public ip]:[plex public port] using your browser. If you get a timeout, then your router is not forwarding the packets correctly.[]One potential solution (not 100%) is to switch from a dynamic port mapping (upnp based) to a static port mapping (through the configuration interface of your router) and then updating the configuration of your plex media server[/list][/list]



Sorry if I can’t be very responsive, but I just moved to a new place

Jeff