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: [email protected]

On Fri, Jul 18, 2014 at 12:22 PM, xavicampa [email protected] 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 https://github.com/bilhamil/OBSRemote/issues/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: [email protected]

On Fri, Jul 18, 2014 at 2:53 PM, xavicampa [email protected] wrote:

Hi bilhamil:

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

function makeTwitchChat(username){ var chat = ''; 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 = ''; 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 https://github.com/bilhamil/OBSRemote/issues/5#issuecomment-49483841.

[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.