Modifying the HTML client to show Twitch read-only chat and mobile stream view

[xavicampa]

Hi!

First of all, congrats for OBS Remote, it certainly is useful!

I'm trying to use my iPad as OBS remote dashboard with Twitch. So far so good, I'm just missing two rather key features right now: the possibility to read my chat and the possibility to see what my viewers see.

For the chat, I've considered using Nightdev's beta chat (http://www.nightdev.com/hosted/obschat/?channel=twitchUsername), as that contains all I need. I got the code of OBS Remote (anb OBS) and made it compile 100% without errors, but it's a little tricky for me to find out how to replace the Twitch Flash chat with the simple text based from Nightdev.

And for the video, the previous challenge also applies to the video, the idea would be to use the mobile stream embedded in the Web Client.

Do you have any pointers as to where shall I start looking to modify the HTML for the chat and the video?

Cheers,
Xavi.

[bilhamil]

You can modify what get's embedded here

https://github.com/bilhamil/OBSRemote/blob/master/WebClient/js/streamconfig.js#L328

I think.

I'm not sure about embedding on mobile devices, I guess the html5 player
might work.

Bill Hamilton

Interface Ecology Lab | Computer Science and Engineering Department
Texas A&M University
College Station, Texas, USA

aim/g-talk/email: luin.uial@gmail.com

On Fri, Jul 18, 2014 at 12:22 PM, xavicampa notifications@github.com
wrote:

Hi!

First of all, congrats for OBS Remote, it certainly is useful!

I'm trying to use my iPad as OBS remote dashboard with Twitch. So far so
good, I'm just missing two rather key features right now: the possibility
to read my chat and the possibility to see what my viewers see.

For the chat, I've considered using Nightdev's beta chat (
http://www.nightdev.com/hosted/obschat/?channel=twitchUsername), as that
contains all I need. I got the code of OBS Remote (anb OBS) and made it
compile 100% without errors, but it's a little tricky for me to find out
how to replace the Twitch Flash chat with the simple text based from
Nightdev.

And for the video, the previous challenge also applies to the video, the
idea would be to use the mobile stream embedded in the Web Client.

Do you have any pointers as to where shall I start looking to modify the
HTML for the chat and the video?

Cheers,
Xavi.

—
Reply to this email directly or view it on GitHub
#5.

[xavicampa]

Hi bilhamil:

Thanks, that helped a lot! I figured out the chat part, works as a dream:

function makeTwitchChat(username)
{
    var chat = '<iframe frameborder="0" scrolling="yes" id="chat_embed" src="http://www.nightdev.com/hosted/obschat/?channel=' + username + '" ></iframe>';
    return chat;
}

The video part shouldn't be much more difficult, but haven't been able to test it due to the Twitch connect issue I describe in the next paragraph.

function makeTwitchStream(username)
{
    var player = '<iframe src="http://twitch.tv/' + username + '/hls" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0"></iframe>';
    return player;
}

I've got a problem with the "Connect to Twitch" button, it keeps redirecting me to "smiley:8080", which looks like a local machine for debugging. I've searched the solution for anything similar without luck. Could you help me getting this button to work in my local project?

Cheers,
Xavi.

[bilhamil]

You need to register for your own twitch api key and put the api key as the
default here:
https://github.com/bilhamil/OBSRemote/blob/master/WebClient/js/twitch.js#L5

Bill Hamilton

Interface Ecology Lab | Computer Science and Engineering Department
Texas A&M University
College Station, Texas, USA

aim/g-talk/email: luin.uial@gmail.com

On Fri, Jul 18, 2014 at 2:53 PM, xavicampa notifications@github.com wrote:

Hi bilhamil:

Thanks, that helped a lot! I figured out the chat part, works as a dream:

function makeTwitchChat(username){
var chat = '<iframe frameborder="0" scrolling="yes" id="chat_embed" src="http://www.nightdev.com/hosted/obschat/?channel=' + username + '" ></iframe>';
return chat;}

The video part shouldn't be much more difficult, but haven't been able to
test it due to the Twitch connect issue I describe in the next paragraph.

function makeTwitchStream(username){
var player = '<iframe src="http://twitch.tv/' + username + '/hls" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0"></iframe>';
return player;}

I've got a problem with the "Connect to Twitch" button, it keeps
redirecting me to "smiley:8080", which looks like a local machine for
debugging. I've searched the solution for anything similar without luck.
Could you help me getting this button to work in my local project?

Cheers,
Xavi.

—
Reply to this email directly or view it on GitHub
#5 (comment).

[xavicampa]

It works great!

A small change to the video makes it look much better in the ipad:

function makeTwitchStream(username)
{
    var player = '<iframe src="http://twitch.tv/' + username + '/hls" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" width="100%" height="100%"></iframe>';
    return player;
}

The only caveat now is that the video you see is the actual stream, and not the OBS "preview". I'll investigate how to embed the latter instead.

Regards,
Xavi.