3.6.8 zwplayer在html5网页里播放rtsp地址
zwplayer
# 1、在html5网页里播放rtsp地址
当前各行各业都在用网络摄像机作各种视频应用，尤其是视频实时监控应用行业。将摄像头的RTSP协议输出的实时视频嵌在H5浏览器中播放是当前大多数用户的要求。问题就是现代浏览器（例如Chrome、移动Android）等都不支持ActiveX控件，通过JS也无法在浏览其中进行TCP协议的Socket编程开发，因此当前的现代浏览器是不可能支持RTSP协议的原生播放的。
本方案通过将H5播放器请求的RTSP协议请求转交给服务器，由服务器端拉取摄像机的RTSP流进行转协议(包含必要时转码)，服务器可以将RTSP流转化为现代浏览器能够支持的WEBRTC、HTTP-FLV、HLS或MPEG-DASH流，现代浏览器接收到这种转协议的流后并不能直接播放（例如无法直接通过video标签的src属性），仍旧需要专用播放器zwplayer，zwplayer播放器通过调用现代浏览器的MSE接口来实现播放。
需要在H5浏览器中直接播放rtsp协议流，需要在zwplayer播放器构造时传入如下参数：
| 属性名称 | 类型 | 说明 |
|---|---|---|
| xmc_url | String | 协处理流媒体服务器地址。协处理服务器用户拉取摄像头的rtsp流并转换成html5播放器能接受的协议，例如http-flv，webrtc等。示例如下：ws://192.168.1.202:8138/ 或者 http://192.168.1.202:8138/协处理服务器必须支持websocket协议，zwplayer与协处理服务器交互用的协议实际上是websocket协议。 |
| rtsp_over_tcp | Boolean | 发送给协处理服务器的参数，指示协处理器在拉取rtsp流时是否采用tcp协议。由于rtsp实际是一个包装协议，在实际传输音视频数据时采用的可能是udp协议，由于接收方在报送IP地址时可能用了不能跨越网段的局域网地址，因此很多情况下，采用udp传输的rtsp不能跨网段。因此，如果需要跨网段，例如，转发公网上的摄像头视频，建议采用基于tcp的rtsp协议。缺省为 true。 |
| rtsp_bypass | Boolean | 发送给协处理服务器的参数，指示协处理器是否对音视频参数进行重新编码，缺省为false。 |
| has_audio | Boolean | 发送给协处理服务器的参数，指示是否需要保留rtsp流中的音频。 |
# 2、示例代码
在网页中播放rtsp流的示例代码如下：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="/zwplayer/zwplayer.js"></script>
</head>
<body>
<div class="video" id="zwplayer-wrap1" style="width: 800px;height: 450px;"></div>
<script type="text/javascript">
// 定义一个js对象streamInfo ，用来做为ZWPlayer 的构造参数
var streamInfo = {
playerElm: '#zwplayer-wrap1',
url: 'rtsp://admin:ab123456@192.168.1.64:8554/main',
xmc_url: 'http://192.168.1.208:8138',
rtsp_over_tcp: true,
rtsp_bypass: true,
has_audio: false,
autoplay: false,
};
//创建一个播放器实例
var player1 = new ZWPlayer(streamInfo);
//启动播放，如果设置zwplayer（autoplay为true）自动播放，也可以省略下行代码
player1.play();
</script>
</body>
</html>