embedding webcam in html doc

[MLC]

I have the webcam running on it's own server. I want to embed the live view into a page on another server. I get the "loading" then the "offline" images appearing but not the live feed.


Here's where I'm trying to embed live feed: http://library.acadiau.ca/index-webcam.html

I put the url of the webcam in the javascript code

var baseURL = "http://131.162.140.38:8081/"; //change this to "http://_yawcam_computer_address:port/" when running on own server.

but the stream does not appear.

Can someone tell me what I'm doing wrong?
Thanks much for any help.
ML

[malun]

I haven't had the time to look at this yet.
For now you can only include the stream on a webpage if use the java applet.
(See the readme file at <yawcam-directory>\stream\README.txt )

It is also possible to include the video stream (javascript or java applet) with the html tag called iframe.

I will try to find a solution for this soon.

/malun

[MLC]

Thanks for the reply. I'm not in a big hurry. It would be nice though to embed the live feed whereever on their own page, blog, etc someone wanted to.

[grahamb]

I too have the same problem. I have a webserver on the same computer as Yawcam and would like to embed the javascript stream on a page that it serves. I just get a blank page after changing the baseURL line. The java applet embeds no problem in another html page and the javascript page loads fine from Yawcam itself. For this application I would prefer the javascript option and would like to avoid iframes.

ps I absolutely love this software!

[cloude]

I just embed the page of the stream as an Iframe on the page I want it to be shown on. I get the address of the page from the Yawcam software.

Seems to work great so far!

[malun]

Yes, an IFRAME will work. But some people prefer to not use these...

I have now made some investigations of why it doesn't work the way I originally thought it would...
It turns out that the AJAX requests that handles the control messages (and starts the webcam stream) is stopped by the browser for security reasons when you put the code on a different server. These requests are only allowed to access information from the same domain as the page is located on. This means that you will get problems when the javascript on the page tries to talk with the "Yawcam computer".

I might be able to fix a workaround for this problem, but as it look right now password protection will not work in this workaround. Also, If a viewer get kicked or banned he/she will only see the offline image.

I will do some more thinking and post some example code here later that can be used instead of the original code.

/malun

[malun]

Try to use the HTML code looking like the code in this page:
own_server_example_js.html
(Right-click and choose "Save target as...")

1) Edit the line:

Code: Select all

var baseURL = ""; //change this to "http://_yawcam_computer_address:port/" when running on own server.

2) Upload the images from the folder <yawcam-directory>\stream\img to your own webserver.
3) Make sure that the password protection is disabled in Yawcam's settings. (Settings -> Edit Settings... -> Password)

It should work now, but (as described before) without any fancy status messages for kick, ban and limits. Also password protection will not work.

Try and see if it works...

/malun

[grahamb]

Thanks!!!!

Works like a charm.

One final question for now. Is there an easy way with the supplied code to time out the stream? If not, I can probably rig something up.

[malun]

One final question for now. Is there an easy way with the supplied code to time out the stream? If not, I can probably rig something up.

Currently: NO. But I'll see what I can do in the future.

/malun

[shang_hai]

Hi, I am very new to this topic but very fascinated.

I would like to embed my yawcam url to my blog at blogger.com. Could you please advise how to do this. I am not html literate, thus looking for a simple "copy/paste" solution. Can anyone help with the embed code? (i.e similar to youtube's offer).

thanks a lot in advance! this is amazing!