当前位置：首页 > JavaScript

js实现视频直播

2026-04-04 09:16:55JavaScript

实现视频直播的基本方法

使用JavaScript实现视频直播通常涉及以下几个关键步骤，包括前端采集、流媒体传输和播放。以下是具体实现方案：

使用WebRTC进行实时直播

WebRTC（Web Real-Time Communication）是浏览器原生支持的实时通信技术，适合低延迟直播场景。

// 获取摄像头和麦克风权限
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    const videoElement = document.getElementById('localVideo');
    videoElement.srcObject = stream;

    // 创建RTCPeerConnection
    const pc = new RTCPeerConnection();
    stream.getTracks().forEach(track => pc.addTrack(track, stream));

    // 信令交换逻辑
    pc.createOffer().then(offer => pc.setLocalDescription(offer));
  });

需要配合信令服务器（如Socket.io）完成SDP交换和ICE候选信息传递。

使用HLS或DASH协议直播

对于大规模直播场景，推荐使用自适应比特率流媒体协议：

<!-- HLS播放示例 -->
<video id="video" controls></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  const video = document.getElementById('video');
  if(Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource('https://example.com/live/stream.m3u8');
    hls.attachMedia(video);
  }
</script>

使用MediaRecorder API录制并上传

实现客户端录制并上传到媒体服务器：

let mediaRecorder;
const chunks = [];

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = e => chunks.push(e.data);
    mediaRecorder.start(1000); // 每1秒生成一个数据块
  });

// 停止录制并上传
function stopRecording() {
  mediaRecorder.onstop = async () => {
    const blob = new Blob(chunks, { type: 'video/webm' });
    const formData = new FormData();
    formData.append('video', blob);

    await fetch('/upload', {
      method: 'POST',
      body: formData
    });
  };
  mediaRecorder.stop();
}

使用第三方SDK简化开发

常见直播SDK集成示例：

// 腾讯云Web直播SDK
const livePlayer = new TcPlayer('live-container', {
  autoplay: true,
  rtmp: 'rtmp://example.com/live/stream',
  hls: 'https://example.com/live/stream.m3u8'
});

// Agora Web SDK
const client = AgoraRTC.createClient({ mode: 'live', codec: 'h264' });
client.join('<APPID>', 'channel-name', '<TOKEN>', uid)
  .then(() => AgoraRTC.createMicrophoneAndCameraTracks())
  .then([audioTrack, videoTrack] => {
    client.publish([audioTrack, videoTrack]);
  });