跳到主要内容
版本:3.4.4

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

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

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

基本流程

rtsp-src-live.png

此流程和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/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
}
})