Source Code for Embedding RTSP in html page with Quicktime

[carlom 0]

I'm trying to get a Hikvision camera to play the main feed on a website.

 

The camera model is: ds-2cd2432f-iw

 

It works fine when I connect to it directly and watch the live feed with either the webcomponents or quicktime plugins. Quicktime seems to get better video and audio quality, so I'd like to make it work with QT... But I'm open to any working solution.

 

I've looked around the web and found several fragments of code, including one very complete website from columbia.edu however I can't get it to work.

 

Using the AC_QuickTime.js (apple library)

 

This link works fine:

<script language="JavaScript"  type="text/javascript">QT_WriteOBJECT('rtsp://quicktime.tc.columbia.edu:554/users/lrf10/movies/sixties.mov','600','400','', 'autoplay', 'false');
</script>

 

When I change the url to it doesn't stream:

<script language="JavaScript"  type="text/javascript">QT_WriteOBJECT('rtsp://admin:12345@192.168.1.64/h264/ch1/main/av_stream','600','400','', 'autoplay', 'false');
</script>

 

Thanks!

[foofer 0]

Your change includes authorization, so you don't know if it's a video or auth problem. Have you tried disabling the username/password on the camera and trying it? I thought I read that the latest version of QT no longer supports RTSP.

[TheUberOverLord 0]

I'm trying to get a Hikvision camera to play the main feed on a website.

 

The camera model is: ds-2cd2432f-iw

 

It works fine when I connect to it directly and watch the live feed with either the webcomponents or quicktime plugins. Quicktime seems to get better video and audio quality, so I'd like to make it work with QT... But I'm open to any working solution.

 

I've looked around the web and found several fragments of code, including one very complete website from columbia.edu however I can't get it to work.

 

Using the AC_QuickTime.js (apple library)

 

This link works fine:

<script language="JavaScript"  type="text/javascript">QT_WriteOBJECT('rtsp://quicktime.tc.columbia.edu:554/users/lrf10/movies/sixties.mov','600','400','', 'autoplay', 'false');
</script>

 

When I change the url to it doesn't stream:

<script language="JavaScript"  type="text/javascript">QT_WriteOBJECT('rtsp://admin:12345@192.168.1.64/h264/ch1/main/av_stream','600','400','', 'autoplay', 'false');
</script>

 

Thanks!

You are very welcome.

 

Many Media players can be embedded in web pages to play "Files". Your first example is in fact playing a .mov file. Your second example is attempting to display a IP Cameras live video stream, in real-time. Not the same as playing a file and this is why it's failing.

 

Instead of limiting yourself to one Media Player like Quicktime to embed IP Camera output in a web page. Why not use Snapshots instead from your IP Camera or from any imaging device which can serve Snapshots via HTTP or HTTPS?

 

The are two major benefits of doing this:

 

1. All Internet browser capable devices that visit this web page will be able to instantly see your IP Camera with no delay or additional download/install of software to do so.

 

2. Much less resources and bandwidth are required.

 

Please note. Generally unless your IP Cameras "frame of view" is very busy, 24/7/365?

 

Then watching "Paint Dry" at 30 FPS is a lot more resource and bandwidth intensive then using controlled interval refreshed Snapshots in real-time.

 

Here are methods to embed any URL for Snapshots from any IP Camera and/or Imaging device that allows pulling Snapshots via HTTP and/or HTTPS at the delay interval of your choice. Using 1 line of HTML in a webpage:

 

http://foscam.us/forum/a-how-to-embed-any-foscam-ip-camera-in-webpage-using-1-line-t9113.html

 

The above also has a live working real-time example. The method can be used as stated above for any IP Camera that supports pulling Snapshots via HTTP and/or HTTPS.

 

Depending on your needs? You can/could also add the IP Camera controls of your choice. To allow IP Camera controls to be used by any web site visitors. Again instantly, by any Internet browser capable device that visits your webpage. Live working example:

 

http://107.170.59.150/foscam/SecureImageDisplayFI9826WUS.htm

 

You could also then be able to display as many IP Cameras as you need on the same webpage. Here is an example of 11 IP Cameras live in real-time, at the same time on the same web page.

 

Try and display 11 IP Cameras on a Internet browser capable Phone or Tablet, at the same time, using Media Players, without a "Fire Extinguisher". Not any issue when using these methods.

 

The images are small for demonstration purposes. But could be any sizes:

 

http://107.170.59.150/foscam/FoscamUS.htm

 

Note: The above two example have a two minute time limit and are totally secure not exposing ANY IP Camera information, such as DDNS, IP Address, IP Camera Port or IP Camera User credentials. They also work with any Internet browser capable device. Instantly, without any additional download/install of any software including Media Players. As do all the examples shown here.

 

At least this way. Anyone who visits your web page can see your IP Camera(s), live and in real-time, while using any Internet browser capable device. From Computers to Tablets and Phones to TVs. Instantly and will never need to download/install anything to do so!

 

Don

Edited June 3, 2014 by Guest

[carlom 0]

Don, that is a GREAT idea!

 

It is very compelling because it would provide a true cross browser solution.

 

Allthough I will still need to sort out how to get realtime video feed as it may be needed... I'll definitely look into adding this to the mix.

 

Regards,

Carlo

[TheUberOverLord 0]

Don, that is a GREAT idea!

 

It is very compelling because it would provide a true cross browser solution.

 

Allthough I will still need to sort out how to get realtime video feed as it may be needed... I'll definitely look into adding this to the mix.

 

Regards,

Carlo

The issue with the media Player is how many Internet browser capable devices have or can install the Quicktime Media Player?

 

Just saying. I don't know why your focus is only on the Quicktime Media Player. But for sure that places a severe limitation of who can see what when they access this web page.

 

As an analogy. It would be about as equal as deciding your career path is to be a foot doctor, go to medical school, but you only see patients that are between the ages of 40-45 and only for big toe problems on left feet

 

Don

Edited June 3, 2014 by Guest

[carlom 0]

The particular use case for this project requires access from a limited number of devices. Mainly, monitoring stations and iOS devices. The reason I was looking into Quicktime has to do with iOS, but I haven't been able to confirm that that implementation would work on iOS anyway. I'm also looking into transcoding via node.js to stream via html video.

 

Did you catch the highlights of yesterday's WWDC keynote? They mentioned the upcoming version of safari will have "HTML Premium Video" and mentioned for example that Netflix will be able to stream without the need for any plugins. I wonder if that "Premium Video" will include RTSP??

[TheUberOverLord 0]

The particular use case for this project requires access from a limited number of devices. Mainly, monitoring stations and iOS devices. The reason I was looking into Quicktime has to do with iOS, but I haven't been able to confirm that that implementation would work on iOS anyway. I'm also looking into transcoding via node.js to stream via html video.

 

Did you catch the highlights of yesterday's WWDC keynote? They mentioned the upcoming version of safari will have "HTML Premium Video" and mentioned for example that Netflix will be able to stream without the need for any plugins. I wonder if that "Premium Video" will include RTSP??

You maybe better off using something like FFmpeg for this and running it on a server and using its server features so that it can be doing the transcoding you need to meet whatever the Quicktime live streaming limitation are. It also then would only require one video stream connection to your camera. Feeding all video stream requests from it.

 

It should be noted that many IP Cameras have a finite limit ("Which is very small 4 - 12 Maximum") of concurrent video streams directly from the IP Camera. So, even if you were to get this working? The number of concurrent web page visitors that could be using it at the same time. Most likely, would be far less than 20.

 

Every direct video stream connection takes a ("HUGE") toll on any IP Camera CPU busy and memory resources. Because you are asking that IP Camera to concurrently feed full motion video to x number of requestors, at the same time.

 

So, even if you don't reach the maximum limit before the IP Camera refuses another video stream connection. The IP Camera could get bogged down with the video streams it has open already. Making them far from 5-30 FPS per connection anyway. So what's the point then of using direct video stream connection to the IP Camera?

 

Whereas, the Snapshot option, supports many more concurrent connections in virtually all cases.

 

Depending on what your needs are. You may need to as stated above, create your own video feed on a server or use a video streaming hosting service. Which generally is far from cheap and based on concurrent connections and bandwidth.

 

Sadly. Many people think about these issues ("Afterwards") wasting lots of effort before doing so.

 

IMHO. If you want to save yourself hours, days and possibly weeks of wasted time. It would be very much worth it to as an example. To do this test first.

 

Start as many copies of the Quicktime Media Player running and connected to your IP Camera video stream and see what the maximum number is before the IP Camera refuses to create another concurrent video stream connection. Even if you need more than one system to do this test, due to resource issues. This is a good test.

 

Then once you find that finite direct video stream concurrent connection limit that your IP Camera can support. As well as what the average FPS rate to all the video streams is when there are x concurrent video streams being broadcast directly from the IP Camera. You can decide if there is any point on spending more time to use that method vs. wasting many man hours until you learn that hard truth.

 

Don

Edited June 3, 2014 by Guest

[carlom 0]

In your use cases, how often to you refresh the snapshots?

[TheUberOverLord 0]

In your use cases, how often to you refresh the snapshots?

You can set the Snapshot refresh delay option to be any number of Milliseconds ("1,000 Milliseconds = 1 Second")

 

Don

[buellwinkle 0]

First understand RTSP is not a protocol supported by HTML, so can't be done. You need to get a media server that converts RTSP to RTMP. On a commercial end you can use Wowsa. On a smaller scale, you can use Unreal Media Server which is free for 15 concurrent users and 5 cameras. Lastly, not the best but VLC is free and can re-stream.

 

The easiest way is to use a re-streaming service like ustream or even Google Live. You stream RTSP to them, they host the live video on their servers. Imagine trying to stream 1080P from your home network, you would need a few Mbps upload bandwidth per connection.