当前位置：首页 > JavaScript

js实现rtmp

2026-04-05 06:20:31JavaScript

RTMP 协议简介

RTMP（Real-Time Messaging Protocol）是 Adobe 开发的实时消息传输协议，常用于视频直播和音频流传输。现代浏览器已不再支持原生 RTMP 播放（依赖 Flash），但可通过转协议（如 HLS、WebRTC）或第三方库实现。

使用 flv.js 播放 RTMP 流

flv.js 是一个基于 JavaScript 的 FLV 播放器，通过 MSE（Media Source Extensions）将 RTMP 流转为 FLV 格式在浏览器中播放。

安装依赖
通过 npm 或直接引入 CDN：

npm install flv.js

或

<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>

示例代码

js实现rtmp

<video id="videoElement" controls></video>
<script>
  if (flvjs.isSupported()) {
    const videoElement = document.getElementById('videoElement');
    const flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: 'http://example.com/live/stream.flv' // 替换为 RTMP 流转 FLV 的地址
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();
  }
</script>

使用 WebRTC 中转 RTMP

若需更低延迟，可通过服务端将 RTMP 转为 WebRTC 流，浏览器通过 RTCPeerConnection 接收。

服务端方案

使用 mediasoup 或 Janus Gateway 实现协议转换。

客户端代码

js实现rtmp

const pc = new RTCPeerConnection();
pc.onicecandidate = (event) => {
  if (event.candidate) {
    // 发送 ICE Candidate 到信令服务器
  }
};
pc.ontrack = (event) => {
  const videoElement = document.getElementById('videoElement');
  videoElement.srcObject = event.streams[0];
};

// 通过信令服务器获取 SDP 并设置远程描述
pc.setRemoteDescription(remoteSdp);

使用 FFmpeg 转协议

在服务端通过 FFmpeg 将 RTMP 转为 HLS 或 DASH，浏览器通过 <video> 标签直接播放。

FFmpeg 命令示例

ffmpeg -i rtmp://example.com/live/stream -c:v libx264 -c:a aac -f hls -hls_time 4 -hls_playlist_type event output.m3u8

前端 HLS 播放
使用 hls.js：

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  const video = document.getElementById('videoElement');
  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource('http://example.com/output.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, () => video.play());
  }
</script>