播放网络摄像头音视频示例(RTSP → FLV/HLS)

本示例以html+js构造一个简单的播放网络摄像头视频的页面示例，演示通过API调取网络摄像头视频的过程。 阅读本文的同时，可结合查看示例页面：live-example-4-rtsp(请使用Chrome/Firefox/Edge等浏览器打开)， 及其代码：live-example-4-rtsp.zip进行本文的阅读。

本示例主要使用到以下库：

• axios
• mpegts.js
• hls.js
• stomp-websocket

基本流程

此流程和JT/T 1076终端的实时播放流程基本一致，主要差异是目标设备不一样，打开接口的参数不一样。

1. 首先，媒体服务要能访问得到网络摄像头（RTSP设备），要预先知道摄像头的RTSP播放地址，和登录用户名、密码（如果有的话），并为每个要访问的网络摄像头 分配一个标识字符串（终端识别号）
2. 调用登录 POST /login 接口，获得会话 token
3. 建立 Websocket 连接，并订阅 /user/{token}/queue/strm 队列中的消息
4. 调用 打开媒体播放 POST /strm/live/open 接口
5. 等待 Websocket 的媒体可用通知
6. 得到媒体可用通知后，用媒体播放器打开接口返回的媒体地址，即开始播放
7. 在媒体播放期间，建立一个定时器，每隔 15 秒调用一次媒体保持 POST /strm/keep_alive 接口
8. 要关闭播放时
   • 调用 POST /strm/close 接口
   • 关闭定时器
   • 关闭播放器

以下只简述打开媒体播放接口的传参：

调用打开实时音视频播放接口

调用POST /strm/live/open接口（参见示例代码中的apiLiveOpen()函数）， 在请求数据体相较JT/T 1076设备简单，只需要提供以下参数：

• simNo: 设备识别号。此识别号主要用于区分不同设备，由应用定义，如示例中的rtsp-1。符合终端识别号字符集要求，并且和系统中的其他设备不冲突即可。
• proto: 客户端协议
• async: 是否以异步模式打开。默认：false
• rtspSrc: RTSP源参数。
  • url子属性中提供RTSP的地址
  • username子属性提供登录设备的用户名和密码（可选）
  • password子属性提供登录设备的密码（可选）

axios.post(apiUrlPrefix() + 'strm/live/open', {
    simNo: sn,
    proto: proto(),                   // 客户端协议
    async: async(),                   // 同步模式: false, 异步模式：true
    rtspSrc: {                        // RTSP播放参数
        url: rtspUrl(),
        username: rtspUsername(),
        password: rtspPwd()
    }
}, {
    headers: {
        'X-Auth-Token': token
    }
})