7种在页面上传输RTSP流的方法
学以致用
・9 分钟阅读
在本文中,我们演示了7种不同技术的方法,用于在浏览器上使用web页面显示一个ip相机。
通常,浏览器不支持rtsp,因此使用中间服务器将视频流转换为浏览器。
方法1- RTMP
浏览器不支持rtmp协议,猜猜是谁干的? 尽管它不支持所有浏览器,但是,旧的flashplayer可以显示视频流,它的工作效果很好。
播放器的代码建立在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上有一些多余的变体可以在这里使用 在这里 。
此方法的外观如下:
方法2- 封装到HTML5的RTMP
现在很难发现那些愿意在actionscript3上继续编码的人, 因此,有一个使用HTML包装的方法,允许从JavaScript控制RTMP播放器, 在这个变体中,Flash被加载到HTML页面,只显示图片和播放声音。
var session = Flashphoner.createSession({urlServer:"wss://192.168.88.59:8443"});
session.createStream({name:"rtsp://192.168.88.5/live.sdp", display:myVideo}).play();
播放机的完整源代码是 , , 此方法的外观如下:
方法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的屏幕截图,
方法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();
播放机图片:
方法5- WebRTC
在本例中,我们根本不使用Flash,而且使用浏览器本身播放视频流,而不使用第三方插件, 这种方法在chrome和firefox的浏览器中都有效,它们的flash是不可用的, webrtc可以得到最低的延迟,小于0.5秒。
播放机的源代码是相同的:
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播放流。
方法6- web sockets
WebRTC和Flash不涵盖所有浏览器和平台, 例如iossafari浏览器就不支持它们。
你可以使用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流的外观:
方法7- HLS
当rtsp转换为hls时,视频流被划分为从服务器下载,并且在hls播放器中显示的段。
我们使用video.js.的源代码可以下载 在这里的 。
播放机的外观如下:
方法8- Android应用程序,WebRTC
应用程序通过WebRTC从服务器检索流, 服务器的目标是将RTSP转换为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平板电脑播放的方式:
方法9- iOS应用程序,WebRTC
就像它的安卓应用程序一样,iOS应用程序通过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流的播放机的操作如下所示:
结果
让我们将结果放在汇总表中:
显示方法 | 最适合 | 延迟 | |
1 | RTMP | 旧版Flash,Flex或AdobeAir应用程序 | 介质 |
2 | RTMP + HTML5 | ie,edge,macsafari浏览器如果安装了 flash player, | 介质 |
3 | RTMFP | 传统Flash,Flex或需要低延迟的AdobeAir应用程序, | 低 |
4 | RTMFP + HTML5 | ie,edge,macsafari浏览器如果flashplayer已安装且延迟很低, | 低 |
5 | WebRTC | Android,移动设备和台式机上的Chrome,Firefox,Opera浏览器以及实时播放至关重要, | 实时 |
6 | web socket | 不支持Flash和WebRTC,但是,任务要求低到中等延迟的浏览器, | 介质 |
7 | HLS | 任何浏览器只要延迟不重要, | 高 |
8 | Android应用,WebRTC | 需要实时延迟的Android本机移动应用程序, | 实时 |
9 | iOS应用,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.
源- 移动应用程序的源代码。