当前位置：首页 > JavaScript

js实现rtmp

2026-03-02 05:21:40JavaScript

RTMP 协议简介

RTMP（Real-Time Messaging Protocol）是Adobe开发的实时消息传输协议，常用于直播和视频流传输。由于浏览器原生不支持RTMP，通常需要借助Flash或第三方库实现。

使用 flv.js 实现 RTMP 播放

flv.js 是一个纯JavaScript实现的FLV播放器，可以通过HTTP-FLV协议播放RTMP流（需服务器转协议）。

安装flv.js：

js实现rtmp

npm install flv.js

基础实现代码：

import flvjs from 'flv.js';

const videoElement = document.getElementById('video');
const flvPlayer = flvjs.createPlayer({
    type: 'flv',
    url: 'http://example.com/live/stream.flv'  // 服务器需将RTMP转为HTTP-FLV
});

flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();

使用 hls.js 实现类似功能

虽然HLS.js主要用于HLS协议，但可以配合服务器将RTMP转为HLS：

js实现rtmp

import Hls from 'hls.js';

const video = document.getElementById('video');
const hls = new Hls();
hls.loadSource('http://example.com/live/stream.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, () => {
    video.play();
});

服务器端配置

需要配置流媒体服务器将RTMP转为其他浏览器支持的协议：

Nginx+RTMP模块：接收RTMP推流，输出HTTP-FLV/HLS
SRS/Ant Media Server：开源流媒体服务器解决方案

注意事项

现代浏览器已禁用Flash，纯RTMP协议无法直接播放
HTTP-FLV延迟较低（2-3秒），HLS延迟较高（10+秒）
需要确保CORS策略允许视频流访问
移动端浏览器对Media Source Extensions支持有限

替代方案

WebRTC是更现代的实时传输方案，延迟可低至500ms，但需要专门的服务器支持：

const pc = new RTCPeerConnection();
pc.addTransceiver('video');
pc.ontrack = (e) => {
    document.getElementById('video').srcObject = e.streams[0];
};

以上方案均需配合后端流媒体服务器实现完整功能，浏览器端无法直接建立RTMP连接。