Angular视频播放与用户表情录制：iOS设备无法录制问题求助

核心问题分析 #

你的代码在PC端正常但iOS失效，主要是以下三个iOS Safari的限制导致：

1. MIME类型不兼容：iOS Safari不支持video/webm格式，MediaRecorder无法初始化。
2. 媒体权限触发时机：iOS要求getUserMedia必须在用户主动交互（如按钮点击）中调用，ngOnInit属于页面加载时的自动执行，会被安全策略拦截。
3. MediaRecorder参数限制：iOS对录制时间片和格式参数有更严格的要求。

具体修复步骤 #

1. 替换兼容的MIME类型 #

iOS Safari支持video/mp4（H.264编码），需要先检测支持的MIME类型，再初始化MediaRecorder。

2. 延迟初始化相机到用户交互时 #

将initCamera的调用从ngOnInit移到startPlaybackAndRecording方法中，确保在用户点击按钮时触发权限请求。

3. 调整MediaRecorder录制参数 #

iOS对start()的时间片参数支持有限，建议不指定时间片（让浏览器自动处理），同时确保录制停止时正确释放流资源。

修改后的完整代码 #

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BlobServiceClient, AnonymousCredential } from "@azure/storage-blob";

@Component({
  selector: 'app-videoplayer',
  templateUrl: './videoplayer.component.html',
  styleUrls: ['./videoplayer.component.css']
})
export class VideoplayerComponent implements OnInit {
  @ViewChild('externalVideo') externalVideo!: ElementRef<HTMLVideoElement>;

  videoLink: string = '';
  isRecording = false;
  private mediaRecorder: MediaRecorder | null = null;
  private cameraStream: MediaStream | null = null;
  private sastoken = "";

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.videoLink = params['videolink'];
    });
  }

  private async initCamera() {
    if (this.cameraStream) return;
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
      this.cameraStream = stream;
      
      const supportedMimeType = this.getSupportedMimeType();
      if (!supportedMimeType) {
        throw new Error('当前设备不支持任何录制格式');
      }
      
      this.mediaRecorder = new MediaRecorder(stream, { mimeType: supportedMimeType });
      this.mediaRecorder.ondataavailable = event => {   
        if (event.data.size > 0) {
          this.uploadToAzure(event.data);
        }
      };
      this.mediaRecorder.onstop = () => {
        this.cameraStream?.getTracks().forEach(track => track.stop());
        this.cameraStream = null;
      };
    } catch (error) {
      console.error('访问摄像头失败:', error);
    }
  }

  private getSupportedMimeType(): string | null {
    const options = [
      'video/mp4',
      'video/quicktime',
      'video/webm'
    ];
    return options.find(type => MediaRecorder.isTypeSupported(type));
  }

  async startPlaybackAndRecording() {
    await this.initCamera();
    
    if (this.externalVideo && this.externalVideo.nativeElement) {
      try {
        await this.externalVideo.nativeElement.play();
      } catch (playError) {
        console.error('视频播放失败:', playError);
      }
    }
    this.startRecording();
  }

  startRecording() {
    if (this.mediaRecorder && this.mediaRecorder.state === 'inactive') {
      this.mediaRecorder.start();
      this.isRecording = true;
    }
  }

  stopRecording() {
    if (this.mediaRecorder && this.mediaRecorder.state === 'recording') {
      this.mediaRecorder.stop();
      this.isRecording = false;
    }

    if (this.externalVideo && this.externalVideo.nativeElement) {
      this.externalVideo.nativeElement.pause();
    }
  }

  private async uploadToAzure(videoBlob: Blob) {
    const blobServiceClient = new BlobServiceClient(`https://xxxxxx.blob.core.windows.net?${this.sastoken}`, new AnonymousCredential());
    const containerName = 'xxxx';
    const blobName = this.generateBlobName();

    try {
      const containerClient = blobServiceClient.getContainerClient(containerName);
      const blockBlobClient = containerClient.getBlockBlobClient(blobName);
      await blockBlobClient.uploadData(videoBlob);
      console.log("上传Azure存储成功");
    } catch (error) {
      console.error("上传Azure存储失败", error);
    }
  }

  private generateBlobName() {
    const timestamp = new Date();
    const dateString = timestamp.toISOString().split('T')[0];
    const timeString = timestamp.toISOString().split('T')[1].replace(/:/g, 'H').split('.')[0] + 's';
    const suffix = this.mediaRecorder?.mimeType.split('/')[1] || 'mp4';
    return `${dateString}/${timeString}.${suffix}`;
  }
}

额外注意事项 #

• iOS Safari要求网站必须是HTTPS协议（localhost除外），否则无法获取媒体权限。
• 视频播放时，iOS可能会自动进入全屏模式，可通过给video标签添加playsinline属性控制：

<video #externalVideo playsinline [src]="videoLink"></video>

• 测试时需要在真实iOS设备上进行，模拟器可能存在MediaRecorder支持问题。

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