iPad Safari后台切换后WebRTC视频流无法恢复的解决方法

问题根源 #

iPad Safari在后台运行时会主动限制WebRTC连接的资源占用，可能导致ICE连接超时、媒体轨道被静默，而现有代码没有针对页面可见性变化的重连机制，切回前台后无法自动恢复视频流。

解决方案 #

通过监听页面可见性变化，在切回前台时销毁旧连接并重建WebRTC会话，同时确保媒体流和video元素正确重置：

1. 添加页面可见性监听

在类的构造函数中加入页面可见性变化监听，触发重连逻辑：

constructor(id, stream, channel) {
  // ... 原有代码 ...

  // 监听页面可见性变化
  document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
}

2. 实现连接销毁方法

添加销毁现有RTCPeerConnection和媒体流的方法，避免资源泄漏：

destroy() {
  if (this.webrtc) {
    this.webrtc.close();
    this.webrtc = null;
  }
  if (this.mediastream) {
    this.mediastream.getTracks().forEach(track => track.stop());
    this.mediastream = null;
  }
  this.video.srcObject = null;
}

3. 实现可见性变化处理逻辑

当页面变为可见时，销毁旧连接并重新播放：

async handleVisibilityChange() {
  if (document.visibilityState === 'visible') {
    // 切回前台，重启流
    this.destroy();
    await this.play();
  }
}

4. 优化play方法的可重入性

确保play方法可以被重复调用，无需担心状态冲突：

async play() {
  console.log("webrtc play");
  // 先清理可能存在的旧资源
  if (this.mediastream) {
    this.mediastream.getTracks().forEach(track => track.stop());
  }
  this.mediastream = new MediaStream();
  this.video.srcObject = this.mediastream;

  this.webrtc = new RTCPeerConnection({
    iceServers: [{
      urls: ["stun:stun.l.google.com:19302"],
    }],
    sdpSemantics: "unified-plan"
  });

  this.webrtc.onnegotiationneeded = this.handleNegotiationNeeded.bind(this);
  this.webrtc.onsignalingstatechange = this.handleSignalingStateChange.bind(this);
  this.webrtc.ontrack = this.handleTrack.bind(this);

  this.webrtc.addTransceiver("video", {
    "direction": "sendrecv",
  });
}

5. 额外处理：video自动播放

由于Safari的自动播放策略，切回前台后可能需要重新触发play，可在handleTrack中确保播放：

handleTrack(event) {
  console.log("handle track");
  this.mediastream.addTrack(event.track);
  // 确保视频播放
  if (document.visibilityState === 'visible') {
    this.video.play().catch(err => console.error("Play failed:", err));
  }
}

修改后的完整代码 #

export default class WebRtcPlayer {
  static server = "http://127.0.0.1:8083";

  server = null;
  stream = null;
  channel = null;

  webrtc = null;
  mediastream = null;
  video = null;

  constructor(id, stream, channel) {
    this.server = WebRtcPlayer.server;
    this.video = document.getElementById(id);
    this.stream = stream;
    this.channel = channel;

    this.video.addEventListener("loadeddata", () => {
      this.video.play();
    });

    this.video.addEventListener("error", () => {
      console.error("video error");
    });

    // 监听页面可见性变化
    document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));

    this.play();
  }

  getStreamUrl() {
    // RTSPtoWeb only, not RTSPtoWebRTC
    return `${this.server}/stream/${this.stream}/channel/${this.channel}/webrtc`;
  }

  async play() {
    console.log("webrtc play");
    // 清理旧资源
    if (this.mediastream) {
      this.mediastream.getTracks().forEach(track => track.stop());
    }
    this.mediastream = new MediaStream();
    this.video.srcObject = this.mediastream;

    this.webrtc = new RTCPeerConnection({
      iceServers: [{
        urls: ["stun:stun.l.google.com:19302"],
      }],
      sdpSemantics: "unified-plan"
    });

    this.webrtc.onnegotiationneeded = this.handleNegotiationNeeded.bind(this);
    this.webrtc.onsignalingstatechange = this.handleSignalingStateChange.bind(this);
    this.webrtc.ontrack = this.handleTrack.bind(this);

    this.webrtc.addTransceiver("video", {
      "direction": "sendrecv",
    });
  }

  async handleNegotiationNeeded() {    
    console.log("handleNegotiationNeeded");
    let offer = await this.webrtc.createOffer({
      offerToReceiveAudio: false,
      offerToReceiveVideo: true
    });
    await this.webrtc.setLocalDescription(offer);
  }

  async handleSignalingStateChange() {
    console.log(`handleSignalingStateChange ${this.webrtc.signalingState}`);
    switch (this.webrtc.signalingState) {
      case "have-local-offer":
        let formData = new FormData();
        formData.append("data", btoa(this.webrtc.localDescription.sdp));
        const response = await fetch(this.getStreamUrl(), {
          method: "POST",
          body: formData,
        });

        this.webrtc.setRemoteDescription(new RTCSessionDescription({
          type: "answer",
          sdp: atob(await response.text()),
        }));

        break;

      case "stable":
        break;

      case "closed":
        break;

      default:
        console.log(`unhandled signalingState is ${this.webrtc.signalingState}`);
        break;
    }
  }

  handleTrack(event) {
    console.log("handle track");
    this.mediastream.addTrack(event.track);
    // 确保切回前台后视频能播放
    if (document.visibilityState === 'visible') {
      this.video.play().catch(err => console.error("Play failed:", err));
    }
  }

  destroy() {
    if (this.webrtc) {
      this.webrtc.close();
      this.webrtc = null;
    }
    if (this.mediastream) {
      this.mediastream.getTracks().forEach(track => track.stop());
      this.mediastream = null;
    }
    this.video.srcObject = null;
  }

  async handleVisibilityChange() {
    if (document.visibilityState === 'visible') {
      this.destroy();
      await this.play();
    }
  }

  static setServer(serv) {
    this.server = serv;
  }
}

关键说明 #

• 页面可见性监听：通过visibilitychange事件精准捕捉前台切换时机，触发重连。
• 资源销毁：每次重连前关闭旧的RTCPeerConnection并停止媒体轨道，避免资源占用和状态冲突。
• 自动播放修复：切回前台后重新触发video.play()，适配Safari的媒体播放限制。

内容的提问来源于stack exchange，提问作者rgov