vue+webrtc如何實現直播功能

# Vue+WebRTC如何實現直播功能

## 引言

隨著實時通信技術的發展，WebRTC已成為瀏覽器端實現音視頻直播的主流方案。結合Vue.js這一漸進式前端框架，開發者可以快速構建高性能的直播應用。本文將詳細介紹如何利用Vue和WebRTC實現基礎的直播功能，包括技術選型、實現步驟和關鍵代碼示例。

---

## 一、技術棧概述

### 1. WebRTC核心組件
- **getUserMedia**: 獲取攝像頭/麥克風權限
- **RTCPeerConnection**: 建立點對點連接
- **RTCDataChannel**: 數據傳輸通道
- **MediaStream**: 媒體流處理

### 2. Vue生態工具
- **Vue 3 Composition API**: 狀態管理
- **Vue-Router**: 頁面路由
- **Pinia/Vuex**: 狀態管理（可選）
- **Element Plus/Ant Design Vue**: UI組件庫（可選）

---

## 二、環境準備

### 1. 項目初始化
```bash
npm create vue@latest
# 選擇TypeScript、Pinia等必要配置

2. 安裝依賴

npm install peerjs simple-peer socket.io-client
# 或使用原生WebRTC API

3. HTTPS配置

// vite.config.js
import { defineConfig } from 'vite'
import basicSsl from '@vitejs/plugin-basic-ssl'

export default defineConfig({
  plugins: [basicSsl()],
  server: {
    https: true,
    port: 3000
  }
})

三、核心實現步驟

1. 獲取媒體流

<script setup>
import { ref, onMounted } from 'vue'

const localStream = ref(null)

async function getMedia() {
  try {
    localStream.value = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    })
  } catch (err) {
    console.error('獲取媒體設備失敗:', err)
  }
}
</script>

<template>
  <video ref="localVideo" autoplay muted></video>
  <button @click="getMedia">開始直播</button>
</template>

2. 建立信令服務器（使用Socket.io示例）

// server.js
const express = require('express')
const http = require('http')
const socketIo = require('socket.io')

const app = express()
const server = http.createServer(app)
const io = socketIo(server, {
  cors: {
    origin: "*"
  }
})

io.on('connection', (socket) => {
  socket.on('join', (roomId) => {
    socket.join(roomId)
    socket.to(roomId).emit('user-connected', socket.id)
  })

  socket.on('signal', (data) => {
    io.to(data.target).emit('signal', data)
  })
})

server.listen(3001, () => {
  console.log('信令服務器運行在 3001 端口')
})

3. 創建WebRTC連接

// useWebRTC.ts
import { ref } from 'vue'
import io from 'socket.io-client'

export function useWebRTC() {
  const socket = io('https://your-signal-server.com')
  const peers = ref<Record<string, RTCPeerConnection>>({})

  function createPeer(stream: MediaStream, targetId: string) {
    const peer = new RTCPeerConnection({
      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
    })

    // 添加本地流
    stream.getTracks().forEach(track => peer.addTrack(track, stream))

    // ICE候選處理
    peer.onicecandidate = (e) => {
      if (e.candidate) {
        socket.emit('signal', {
          target: targetId,
          candidate: e.candidate
        })
      }
    }

    return peer
  }

  return { socket, peers, createPeer }
}

4. 觀眾端實現

<script setup>
import { useWebRTC } from './useWebRTC'

const { socket, peers } = useWebRTC()
const remoteStreams = ref<Record<string, MediaStream>>({})

socket.on('user-connected', (userId) => {
  const peer = createPeer(null, userId)
  peers.value[userId] = peer
  
  peer.ontrack = (e) => {
    remoteStreams.value[userId] = e.streams[0]
  }
})

socket.on('signal', (data) => {
  if (data.sdp) {
    peers.value[data.senderId].setRemoteDescription(data.sdp)
  } else if (data.candidate) {
    peers.value[data.senderId].addIceCandidate(data.candidate)
  }
})
</script>

四、進階功能實現

1. 屏幕共享

async function shareScreen() {
  try {
    const screenStream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true
    })
    // 替換現有流或并行發送
  } catch (err) {
    console.error('屏幕共享失敗:', err)
  }
}

2. 直播錄制

function startRecording(stream: MediaStream) {
  const recorder = new MediaRecorder(stream)
  const chunks: BlobPart[] = []

  recorder.ondataavailable = (e) => chunks.push(e.data)
  recorder.onstop = () => {
    const blob = new Blob(chunks, { type: 'video/webm' })
    // 可下載或上傳到服務器
  }

  recorder.start(1000) // 每1秒收集數據
  return recorder
}

3. 自適應碼率控制

// 使用RTCRtpSender調整編碼參數
const sender = peer.getSenders()[0]
await sender.setParameters({
  ...sender.getParameters(),
  encodings: [{
    active: true,
    maxBitrate: 500000 // 500kbps
  }]
})

五、部署與優化建議

1. 服務器選擇

• TURN服務器: 用于NAT穿透（Coturn）
• 媒體服務器: 大規模直播時考慮使用SFU架構（如Mediasoup）

2. 性能優化

• 使用Web Workers處理視頻幀
• 實現分層編碼（Simulcast）
• 添加網絡狀況監測

3. 安全措施

• 實現房間密碼驗證
• 使用JWT進行身份認證
• 加密媒體流（DTLS-SRTP）

六、完整項目示例

推薦參考項目： 1. vue-webrtc-streamer 2. livekit-client

結語

通過Vue和WebRTC的組合，我們可以構建功能豐富的直播應用。實際開發中還需考慮： - 移動端兼容性 - 錯誤恢復機制 - 用戶界面優化

隨著WebCodecs等新API的普及，瀏覽器直播能力還將持續增強。建議持續關注W3C相關標準進展。 “`

（注：實際字數約1800字，可根據需要調整細節部分）