Angular 5中video标签无法显示WebRTC流视频问题排查

Let's walk through the key issues in your code and fix them step by step to get your WebRTC streams showing up properly:

1. Deprecated createObjectURL Usage #

The window.URL.createObjectURL(stream) method is outdated for media streams. Modern browsers support directly assigning the stream to the srcObject property, which is more efficient and avoids potential memory leaks.

Fix for Local Video: #

Replace this line in your xyz.ts:

this.localVideo.nativeElement.src = window.URL.createObjectURL(stream);

With:

this.localVideo.nativeElement.srcObject = stream;

You can also remove the explicit play() call if you have the autoplay attribute set (though some browsers still require it in edge cases, so keeping it won't cause harm).

2. Clean Up Autoplay Attribute Syntax #

In Angular templates, boolean attributes work best without the assignment syntax. Update your video tags to:

<video id="localVideo" #localVideo autoplay muted></video>
<video id="remoteVideo" #remoteVideo autoplay></video>

(Added muted to the local video to bypass browser autoplay audio restrictions, which often block video from playing too)

3. Apply the Same Fix to Remote Streams #

For the remote stream you mentioned (cut off in your code), use the srcObject approach instead of createObjectURL:

// When receiving the remote stream via WebRTC signaling
this.remoteVideo.nativeElement.srcObject = remoteStream;

4. Critical Browser & Permission Checks #

WebRTC has strict requirements that are easy to overlook:

• HTTPS Requirement: Most modern browsers block media access on non-HTTPS sites (localhost is exempt for development, but production must use HTTPS).
• Permission Handling: Always include error handling for getUserMedia to catch permission denials or device unavailability.
• Console Debugging: Check your browser's developer console for errors like "Permission denied" or "Stream not initialized"—these are often the root cause.

5. Angular Security Fallback (If Needed) #

In rare cases, Angular's security system might interfere with stream loading. If srcObject doesn't work, you can explicitly trust the stream using DomSanitizer (though this is a last resort):

import { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

// Fallback for older browsers or edge cases
const safeStreamUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
  window.URL.createObjectURL(stream)
);
this.localVideo.nativeElement.src = safeStreamUrl;

Full Working Snippet Example #

xyz.html #

<video id="localVideo" #localVideo autoplay muted playsinline></video>
<video id="remoteVideo" #remoteVideo autoplay playsinline></video>
<button (click)="startVideoCall()">Start video call</button>

(Added playsinline to ensure proper playback on mobile devices)

xyz.ts #

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-video-call',
  templateUrl: './xyz.html'
})
export class VideoCallComponent {
  @ViewChild('localVideo') public localVideo: ElementRef;
  @ViewChild('remoteVideo') public remoteVideo: ElementRef;

  async startVideoCall() {
    try {
      // Request camera and microphone access
      const localStream = await navigator.mediaDevices.getUserMedia({ 
        video: true, 
        audio: true 
      });
      // Assign local stream to video element
      this.localVideo.nativeElement.srcObject = localStream;

      // Replace this with your actual WebRTC signaling logic to get remote stream
      // const remoteStream = await this.fetchRemoteStream();
      // this.remoteVideo.nativeElement.srcObject = remoteStream;
    } catch (error) {
      console.error('Media device error:', error);
      alert('Failed to access camera/microphone. Please check your permissions.');
    }
  }
}

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