How to display an IP camera in ViewON

turbochip · May 3, 2018, 7:37pm

Is there any way to have a live video view on one of the screens using viewON, I have worked with viewON a number of time and a customer asked me this question today.
Thanks in advance!
Chip

jseanor · May 3, 2018, 7:38pm

@turbochip

Were you referring to a camera on the lan network or would this live else where?

turbochip · May 3, 2018, 7:40pm

yes it would be on the LAN network IP based.

jseanor · May 3, 2018, 8:16pm

@turbochip

Let me see if I can get an example of this prepared for you. Though to give you an answer without an example, yes this is possible.

turbochip · May 4, 2018, 12:32pm

Yes any type of examples would be great!

jseanor · May 4, 2018, 8:27pm

@turbochip

My apologies on the delay here. Below you will find two different methodologies for doing this. Both methods are very similar, the only variation exists in the actual stream itself.

Option 1:

This first option uses the actual live stream found within the camera to render onto the webpage of ViewON. This option however requires a little additional technical prowess in order to get the stream link from the camera. The benefit of this option however is a low latency highly reliable stream directly from the camera.

Steps:

Navigate to the camera web page using Chrome or Firefox. In this example it is quite important to use Chrome or Firefox.
After logging in to the camera, when you can see the live stream, right-click the page and select Inspect Element.
Click the icon found in the top left corner of the inspector. After clicking this you will be able to select individual elements on the page. Select your camera stream.
After selecting the stream you should see something similar to the below image. My image is from a Foscam camera. From this image I can see that the camera stream is found at: videostream.cgi. This can be more directly accessed via: IPAddress/videostream.cgi

Now that I have the camera stream, all thats left to do is to update ViewON. First add a placeholder image to your project.

Next, grab the UID from along the left. It can be found under: Graph Properties -> ID

uid

Next, select the main canvas and select Actions --> Javascript sections. Here we simply need override our placeholder image with the stream from the camera. You can use the code below.

jssection

var uid = "YourElementId";
var yourCameraIp = "192.168.100.207";
var yourCameraStream = "/videostream.cgi?user=admin&pwd="
var url = "";

if(window.location.host.indexOf('m2web.talk2m.com') != -1){
   url = "../../proxy/" + yourCameraIp + yourCameraStream;
}else{
   url = yourCameraIp + yourCameraStream;
}

$('#' + uid).attr('xlink:href', url);

Lastly save the project and upload it to the eWON. The final results can be seen below.

https://hms-networks-s3.s3.amazonaws.com/original/2X/3/3f014192ee6645f7300e0ff15031e5b7cffe1989.webm

Option 2:

Option 2 can be used in cameras that provide a url to grab the last known image of the camera. This option works by taking repeated snapshots of the camera and updating the image accordingly. The steps for this solution can be found in the below PDF.

turbochip · May 11, 2018, 5:51pm

Looks great, any suggestions for cameras?

jseanor · May 11, 2018, 5:52pm

I have had great success with D-Link and Foscam cameras though I cannot say a specific model.

turbochip · May 13, 2018, 10:06pm

Thanks Jordan for all of your help in this matter

Moises_Zapata · March 15, 2019, 5:31pm

Hi Jordan, when I use your code I have to wait a few minutes to see the video from the camera, after some time the camera stop streaming the video. When I see the video trough ecatcher its work just fine.

Moises_Zapata · March 15, 2019, 5:31pm

I have a dcs 930l and don’t work correctly trough m2web, I have to wait several minutes to see the video from the camera, and only last 5 seconds. Using ecatcher works just fine.

deryck_hms · March 15, 2019, 5:42pm

Hello @Moises_Zapata,

Jordan no longer works at HMS, Looking at the example he posted above it looks like he is using the ewon as a proxy to the IP camera. Pulling the script from the camera’s web page and displaying on the ewon ViewOn page. If the image is stopping on you the issue might be with how the Javascript for your camera works.

If you open your browsers web developer tools do you see any errors?

Deryck

Moises_Zapata · March 18, 2019, 1:46pm

These are the error I get:

This is the script I use:

var uid = "UID_1552582627581";
var yourCameraIp = "140.80.0.174";
var yourCameraStream = "/video.cgi?user=admin&pwd=controlsim";
var url = "";

if(window.location.host.indexOf('m2web.talk2m.com') != -1){
   url = "../../proxy/" + yourCameraIp + yourCameraStream;
}else{
   url = yourCameraIp + yourCameraStream;
}

$('#' + uid).attr('xlink:href', url);

deryck_hms · March 18, 2019, 1:58pm

Hi Moises,

the only error that might be tied to the camera would be the 404 error. From the screen show I can not say for sure. If that was a request to the camera it is the camera that is not responding. I do not know of anything we can do to correct this.

Deryck

emb · September 1, 2021, 12:08pm

Hi there,

I’m also having an issue trying to implement this. When I see the video stream in viewON using eCatcher, it works fine. When I try to see it via Talk2M, nothing shows for the video. Using the browsers web developer tools, as you suggested to Moises, I see the following:

Does that tell you whether the url is correct?

Here is the code I use:

var uid = “UID_1630463848146”;
var yourCameraIp = “192.168.3.10”;
var yourCameraStream = “/mjpg/video.mjpg”;
var url = “”;

if(window.location.host.indexOf(‘m2web.talk2m.com’) != -1){
url = “…/…/proxy/” + yourCameraIp + yourCameraStream;
url = “https://us4.m2web.talk2m.com” + url;
}else{
url = “http://” + yourCameraIp + yourCameraStream;
}

$(’#’ + uid).attr(‘xlink:href’, url);

I’m using 2 AXIS IP camera devices on this Flexy (i.e. another script like this, at the same time), if that matters. (One is an encoder (to make an analog camera signal into an IP camera), and the other is a regular IP camera.)

kyle_HMS · September 1, 2021, 7:43pm

Check out this link and let me know if it helps: Create a dynamic link in Javascript to a LAN device through M2Web

emb · September 2, 2021, 12:12pm

Thanks, Kyle!

Using that link, I simply replaced the content of the first if statement with the following, and it works*:

if(window.location.host.indexOf(‘m2web.talk2m.com’) != -1){
url = “https://” + window.location.host.split("-")[1] + “/hashid/” + window.location.host.split(".")[0] + ‘/proxy/’ + yourCameraIp + yourCameraStream;
}else{
url = “http://” + yourCameraIp + yourCameraStream;
}

*However, it works insofar that I’m now prompted to enter my username and password for the Axis devices (which occurs when I access the viewON program via Talk2M, not via eCatcher or when my computer-with-browser is physically on the LAN (i.e. connect via ethernet cable to the Flexy 205)). When I enter the credentials when prompted (during use of viewON program via Talk2M), the streams work.

Axis told me that, to incorporate login credentials into the accessing url, I must enter username (always “root”) and password into the url as follows (applied to the case of my previous post):
“https://root:password@192.168.3.10/mjpg/video.mjpg”
(i.e. as opposed to just “https://192.168.3.10/mjpg/video.mjpg”, as before)

I tried this url while physically connected to my Axis products, and it worked. Hence, in viewON code, I’ve tried both of the following, and neither work:

url = “https://” + window.location.host.split("-")[1] + “/hashid/” + window.location.host.split(".")[0] + ‘/proxy/’ + “root:password@” + yourCameraIp + yourCameraStream;

and

url = “https://” + “root:password@” + window.location.host.split("-")[1] + “/hashid/” + window.location.host.split(".")[0] + ‘/proxy/’ + yourCameraIp + yourCameraStream;

Can you advise?