7种在页面上传输RTSP流的方法

・9 分钟阅读

在本文中,我们演示了7种不同技术的方法,用于在浏览器上使用web页面显示一个ip相机。

通常,浏览器不支持rtsp,因此使用中间服务器将视频流转换为浏览器。

方法1- RTMP

浏览器不支持rtmp协议,猜猜是谁干的? 尽管它不支持所有浏览器,但是,旧的flashplayer可以显示视频流,它的工作效果很好。

Flash player

播放器的代码建立在actionscript3的基础上,如下所示:



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");

在本示例中:

rtmp://192.168.88.59/live - 是从摄像机获取rtsp视频流,并且将它转换为rtmp的中间服务器的地址。

rtsp://192.168.88.5/live.sdp - 是摄像机的RTSP地址。

在Flex和AS3上有一些多余的变体可以在这里使用 在这里 。

此方法的外观如下:

Flash streaming

方法2- 封装到HTML5的RTMP

现在很难发现那些愿意在actionscript3上继续编码的人, 因此,有一个使用HTML包装的方法,允许从JavaScript控制RTMP播放器, 在这个变体中,Flash被加载到HTML页面,只显示图片和播放声音。

RTMP-player JavaScript



var session = Flashphoner.createSession({urlServer:"wss://192.168.88.59:8443"});
session.createStream({name:"rtsp://192.168.88.5/live.sdp", display:myVideo}).play();

播放机的完整源代码是 , 此方法的外观如下:

WCS url stream volume

方法3- rtmfp

协议也可以在 Flash Player内工作, 与rtmp的区别在于rtmfp在udp之上工作,因此它更适合于低延迟广播。

播放器的as3代码与rtmp的as3代码相同,只是在建立与服务器的连接的代码行中添加了一个字母f。



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");

然而,下面是一个使用RTMFP的屏幕截图,

Screenshot with RTMFP

方法4- RTMFP封装到 HTML5

这种方法与方法2相同,除了在初始化期间,我们设置了底层Flash(swf对象)的RTMFP协议。



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();

播放机图片:

RTMFP HTML5 - player

方法5- WebRTC

在本例中,我们根本不使用Flash,而且使用浏览器本身播放视频流,而不使用第三方插件, 这种方法在chrome和firefox的浏览器中都有效,它们的flash是不可用的, webrtc可以得到最低的延迟,小于0.5秒。

WebRTC Android Chrome and Android Firefox

播放机的源代码是相同的:



var session = Flashphoner.createSession({urlServer:"wss://192.168.88.59:8443"});
session.createStream({name:"rtsp://192.168.88.5/live.sdp", display:myVideo}).play();

脚本自动检测WebRTC支持,如果支持ti,则使用WebRTC播放流。

Playing WebRTC

方法6- web sockets

WebRTC和Flash不涵盖所有浏览器和平台, 例如iossafari浏览器就不支持它们。

Websockets - WebRTC and Flash

你可以使用websocket传输(浏览器与服务器之间的tcp连接)将视频流传送到 iOS Safari , 然后,RTSP视频流通过websockets传输, 接收二进制数据后,可以使用javascript对它进行解码,并在html5画布元素上渲染出来。

这就是websocket播放器在ios safari浏览器上做的, 播放机的代码看起来是一样的:



var session = Flashphoner.createSession({urlServer:"wss://192.168.88.59:8443"});
session.createStream({name:"rtsp://192.168.88.5/live.sdp", display:myVideo}).play();

当swf元素位于html5下时,这有点类似于基于flash的方法, 在这里,我们在html5下有一个javascript应用程序,它通过websockets获取数据,对它们进行解码,并且在canvas中以多个线程呈现它们。

以下是iossafari浏览器中的canvas上呈现的rtsp流的外观:

RTSP Canvas in iOS Safari

方法7- HLS

当rtsp转换为hls时,视频流被划分为从服务器下载,并且在hls播放器中显示的段。

Convert RTSP to HLS

我们使用video.js.的源代码可以下载 在这里的

播放机的外观如下:

HLS-player stream

方法8- Android应用程序,WebRTC

应用程序通过WebRTC从服务器检索流, 服务器的目标是将RTSP转换为WebRTC,并且将结果反馈给移动应用程序。

Convert RTSP to WebRTC

Android的播放器的java代码是,如下所示:



SessionOptions sessionOptions = new SessionOptions("wss://192.168.88.59:8443");
Session session = Flashphoner.createSession(sessionOptions);
StreamOptions streamOptions = new StreamOptions("rtsp://192.168.88.5/live.sdp");
Stream playStream = session.createStream(streamOptions);
playStream.play();

可以从 Google Play安装测试移动应用程序,应用程序的来源可下载。

以下是WebRTC通过的Android平板电脑播放的方式:

Playing RTSP stream via WebRTC

方法9- iOS应用程序,WebRTC

就像它的安卓应用程序一样,iOS应用程序通过WebRTC从服务器获取一个视频流。

iOS app WebRTC

播放器的 objective-c代码如下所示:



FPWCSApi2SessionOptions *options = [[FPWCSApi2SessionOptions alloc] init];
options.urlServer = @"wss://192.168.88.59:8443";
FPWCSApi2Session *session = [FPWCSApi2 createSession:options error:&error];
FPWCSApi2StreamOptions *options = [[FPWCSApi2StreamOptions alloc] init];
options.name = @"rtsp://192.168.88.5/live.sdp";
FPWCSApi2Stream *stream = [session createStream:options error:nil];
stream play:&error;

你可以在这里下载 播放器的源代码

你可以安装使用 App Store上面的代码块的测试应用程序 , 具有RTSP流的播放机的操作如下所示:

App Store test app

结果

让我们将结果放在汇总表中:

显示方法最适合延迟
1RTMP旧版Flash,Flex或AdobeAir应用程序介质
2RTMP + HTML5ie,edge,macsafari浏览器如果安装了 flash player,介质
3RTMFP传统Flash,Flex或需要低延迟的AdobeAir应用程序,
4RTMFP + HTML5ie,edge,macsafari浏览器如果flashplayer已安装且延迟很低,
5WebRTCAndroid,移动设备和台式机上的Chrome,Firefox,Opera浏览器以及实时播放至关重要,实时
6web socket不支持Flash和WebRTC,但是,任务要求低到中等延迟的浏览器,介质
7HLS任何浏览器只要延迟不重要,
8Android应用,WebRTC需要实时延迟的Android本机移动应用程序,实时
9iOS应用,WebRTC需要实时延迟的iOS本机移动应用程序。实时

为了测试这些方法,我们使用了web call server5,它能够转换rtsp流,并且将它传输到上述所有九个方向。

引用

Web调用服务器5 - 一个服务器,用于广播iframe流 。

Flash - 一个通过RTMP和RTMFP播放流的swf应用程序示例, 对应于方法1和3.
- flex/as3上swf应用程序的源代码。

播放器- 一个通过 RTMP,RTMFP,WebRTC,websocket播放RTSP流的示例网络应用程序, 方法2,4,5,6,
- 网络播放机的源代码。

HLS播放器- 一个游戏玩家的例子, 对应于方法7.
- HLS播放器的源代码。

Android WebRTC - 通过WebRTC播放视频流的移动应用程序的示例, 方法8.
- 移动应用程序的源代码。

WebRTC - 通过WebRTC播放视频流的移动应用程序的示例, 方法9.
- 移动应用程序的源代码。


学以致用 profile image