在本文中，我们演示了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流的播放机的操作如下所示：

结果

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

为了测试这些方法，我们使用了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.
源- 移动应用程序的源代码。