七种转化RTSP屏显示到web页面的方法 (7 ways to stream RTSP on&
2017-09-01 18:15阅读：
7 ways to stream RTSP on the page
In this article we demonstrate 7 technologically different ways to
display a video stream from an IP camera with RTSP support on a web
page in a browser.
As a rule, browsers do not support RTSP, so the video stream is
converted for a browser using an intermediate server.
Method 1 – RTMP
Browsers do not support the RTMP protocol, but guess who does? The
old faithful Flash Player that works enough well even though it
does not support all browsers, so it can display the video
stream.
(7
ways
to
stream
RTSP
on&' />
The code of the player is built on Action Script 3 and looks as
follows:
1
2
3
|
var nc:NetConnection =
nc.connect('rtmp://192.168.88.59/live',obj);
var subscribeStream:NetStream =
new NetStream(nc);
subscribeStream.play('rtsp://192.168.88.5/live.sdp');
|
In this example:
rtmp://192.168.88.59/live – is the address of the intermediate
server that fetches the RTSP video stream from the camera and
converts it to RTMP.
rtsp://192.168.88.5/live.sdp – is the RTSP address of the
camera.
A little bit superfluous variant of the player on Flex and AS3 is
available
here.
This method looks as follows:
Method 2 – RTMP wrapped to HTML5
It is hard to find those willing to keep coding on Action Script 3
these days. So, there is a method with an HTML wrapping that allows
controlling the RTMP player from JavaScript. In this variant the
flash is loaded to the HTML page only to display picture and play
sound.
1
2
|
var session =
Flashphoner.createSession({urlServer:'wss://192.168.88.59:8443'});
session.createStream({name:'rtsp://192.168.88.5/live.sdp',
display:myVideo}).play();
|
The full source code of the player is
here.
And the method looks like this:
Method 3 – RTMFP
The RTMFP protocol also works inside the Flash Player. The
difference from RTMP is that RTMFP works on top of the UDP, so it
is much more suitable for low latency broadcasting.
The AS3 code of the player is identical to that of RTMP except for
one letter F added in the line of code where the connection to the
server is established.
1
2
3
|
var nc:NetConnection =
nc.connect('rtmfp://192.168.88.59/live',obj);
var subscribeStream:NetStream =
new NetStream(nc);
subscribeStream.play('rtsp://192.168.88.5/live.sdp');
|
Nevertheless, here is a screenshot using RTMFP
Method 4 – RTMFP wrapped to HTML5
This way is identical to method 2 except that during initialization
we set the RTMFP protocol for the underlying Flash (swf
object).
1
2
|
Var session =
Flashphoner.createSession({urlServer:'wss://192.168.88.59:8443',
flashProto:'rtmfp'});
session.createStream({name:'rtsp://192.168.88.5/live.sdp',
display:myVideo}).play();
|
Player picture:
Method 5 – WebRTC
In this case we do not use Flash at all, and the video stream is
played using means of the browser itself, without using third-party
plugins. This method works both in Chrome and Firefox Android
browsers, where Flash is not available. WebRTC results in the
lowest latency, less than 0.5 seconds.
The source code of the player is the same:
1
2
|
var session =
Flashphoner.createSession({urlServer:'wss://192.168.88.59:8443'});
session.createStream({name:'rtsp://192.168.88.5/live.sdp',
display:myVideo}).play();
|
The script automatically detects WebRTC support, and if ti is
supported, the stream is played using WebRTC.
Method 6 – Websockets
WebRTC and Flash do not cover all browsers and platforms. For
instance, the iOS Safari browser does not support them.
You can deliver a video stream to iOS Safari using Websocket
transport (a TCP connection between the browser and the server).
Then, the RTSP video stream is channelled through Websockets. After
the binary data are received, they can be decoded using JavaScript
and rendered on Canvas HTML5 element.
This is what Websocket player does on the iOS Safari browser. The
code of the player looks the same:
1
2
|
var session =
Flashphoner.createSession({urlServer:'wss://192.168.88.59:8443'});
session.createStream({name:'rtsp://192.168.88.5/live.sdp',
display:myVideo}).play();
|
This is somewhat similar to the Flash-based methods when the swf
element lies under HTML5. Here, we have a JavaScript application
under HTML5 that fetches data via Websockets, decodes them and
renders them on Canvas in multiple threads.
Here is how an RTSP stream rendered on Canvas in the iOS Safari
browser looks like:
Method 7 – HLS
When RTSP is converted to HLS, a video stream is divided to
segments that are happily downloaded from the server and displayed
in the HLS player.
As an HLS player we use video.js. The source code of the player can
be downloaded
here.
The player looks as follows:
Method 8 – Android application, WebRTC
The application retrieves the stream from the server via WebRTC. To
goal of the server here is to convert RTSP to WebRTC and feed the
result to the mobile application.
The Java-code of the player for Android is
here
and looks like this:
