Angular 在一台电脑上获取MediaStreamError{name:“AborTorror”，消息：“启动视频失败”，约束：“stack:”堆栈：}，但在另一台电脑上没有

我在台式电脑上收到MediaStreamError{name:“AbortError”，消息：“启动视频失败”，约束：，堆栈：}，但在笔记本电脑上没有。注意：两台电脑都运行Windows 10，使用相同的代码库

该应用程序在我使用Firefox（带有USB 2.0高清UVC网络摄像头）的笔记本电脑上运行良好，但在我的台式电脑上，无论是使用Firefox、Edge还是Chrome，我仍然会遇到错误。我的台式电脑摄像头是Logitech（Logitech高清网络摄像头C270），我在另一篇帖子上看到，其他人（@Roger Walsh）在使用Logitech摄像头时也有同样的错误

代码如下： 前端（角度视图）

后端（快速）

---

还有其他人有这个问题吗？有什么想法吗？Tks

这可能是特定于浏览器的问题。请使用一些网络摄像头测试站点在浏览器中检查您的网络摄像头。以下是一些可用于测试的示例站点：

如果正常，请尝试将以下代码添加到页面的onload事件中：

exports.selection_test_photo = [
    (req,res,next) => {
        const photo = new Photo();
        console.log("Entering Post: " + util.inspect(req.file) + "; " + req.body.timeStamp);        
        photo.photo.data = fs.readFileSync(req.file.path);
        photo.photo.contentType = 'image/png';
        photo.timeStamp = {"value": req.body.timeStamp};
        console.log("About to save . . . ");
        photo.save(function(err){
            if (err) {return next(err)};
            res.json({"foo": "bar"});
        });        
    },

];

它还应该提供跨浏览器支持

说：

“显然，getUserMedia（{video:true}）的两个实例不能同时存在 同时。”

---

我遇到了同样的问题，结果是与FF工作不正常有关。我意识到我的解决方案可能无法解决OP的代码问题，但这篇文章在搜索结果中显示得相当高，所以我想我会帮助任何可能最终出现在这里的人（就像我一样）

我使用的是MacBook Pro、CalDigit扩展底座、带额外USB端口的Dell ultra wide显示器和Logitech 1080p摄像头（确切的硬件并不重要，因为我知道的其他设备有不同的硬件/设置，但存在相同的问题）。我以两种不同的方式复制了我的问题。它是零星的（一种配置可能在某一天起作用，但在下一天不起作用），而且只发生在Firefox中：

罗技通过USB插入戴尔->戴尔通过USB插入扩展底座->通过thunderbolt将扩展底座插入macbook

Logitech通过USB插入dock->dock通过thunderbolt插入macbook

原来这与我如何从

getUserMedia（）

请求相机有关。例如：

Wait window.navigator.mediaDevices.getUserMedia({
音频：{}，
视频：{​​​
deviceId:{exact:'id of logitech camera'}，
帧率：{理想值：30}，​​​
高度：{理想值：2160}，​​​
宽度：{理想值：4096}
}
});

这将抛出一个

MediaStreamError

，其中

异常：启动视频失败

：

当我这样称呼它时，它会成功：

Wait window.navigator.mediaDevices.getUserMedia({
音频：{}，
视频：{​​​
deviceId:{exact:'id of logitech camera'}，
帧率：{理想值：30}，​​​
高度：{理想值：720}，​​​ // 降到720p
宽度：{ideal:1280}//下拉至1280p
}
});

Firefox似乎没有遵守

的理想约束。此外，相机和机器之间一定有什么问题，因为我尝试了
1080p
（我的相机支持），但仍然失败。我不得不把它放得这么低。另一个注意事项（证明它与FF没有正确处理外部硬件有关），如果我调用它，它每次都会工作

Wait window.navigator.mediaDevices.getUserMedia({
音频：{}，
视频：{​​​
deviceId:{exact:'MAC BOOK内置摄像头的ID'}，
帧率：{理想值：30}，​​​
高度：{理想值：2160}，​​​
宽度：{理想值：4096}
}
});
我单击以允许对相机进行许可，但您提供的测试站点仍然无法工作。我猜我的防火墙被封锁了？有什么想法吗？嘿@CrowdPleaser如果是这样的话，那可能是浏览器版本的问题。尝试将其升级到最新版本。
import { Component, Input, OnInit, forwardRef, ViewChild, ElementRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-capture-image',
  templateUrl: './capture-image.component.html',
  styleUrls: ['./capture-image.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CaptureImageComponent),
      multi: true
    }
  ]
})
export class CaptureImageComponent implements OnInit {
  @ViewChild('videoRef') videoRef: ElementRef;
  @ViewChild('canvasRef') canvasRef: ElementRef;
  @ViewChild('photoRef') photoRef: ElementRef;
  @ViewChild('startbuttonRef') startbuttonRef: ElementRef;
  streaming = false;
  width = 320;
  height = 0;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    navigator.mediaDevices.getUserMedia({video: true, audio: false})
      .then((stream) => {
        this.videoRef.nativeElement.srcObject = stream;
        this.videoRef.nativeElement.play();
      })
      .catch(function(err) {
        console.log(err);
      });
      this.clearPhoto();
  }


  setVideo() {
    if (!this.streaming) {
      this.height = this.videoRef.nativeElement.videoHeight/ (this.videoRef.nativeElement.videoWidth/this.width);
      this.videoRef.nativeElement.width = this.width;
      this.videoRef.nativeElement.height = this.height;
      this.canvasRef.nativeElement.width = this.width;
      this.canvasRef.nativeElement.height = this.height;
      this.streaming = true; 
    }
  }

  clearPhoto() {
    let context = this.canvasRef.nativeElement.getContext('2d');
    context.fillStyle = "#AAA";
    context.fillRect(0,0,this.canvasRef.nativeElement.width, this.canvasRef.nativeElement.height);

    var data = this.canvasRef.nativeElement.toDataURL('image/png');
    this.photoRef.nativeElement.src = data;
  }

  takePicture() {
    let context: CanvasRenderingContext2D  = this.canvasRef.nativeElement.getContext('2d');

    if (this.width && this.height) {
      this.canvasRef.nativeElement.width = this.width;
      this.canvasRef.nativeElement.height = this.height;
      context.drawImage(this.videoRef.nativeElement, 0, 0, this.width, this.height);

      let fd = new FormData();

      this.canvasRef.nativeElement.toBlob((blob) => {
        let url = URL.createObjectURL(blob);
        this.photoRef.nativeElement.onload = function() {
          URL.revokeObjectURL(url);
        };
        this.photoRef.nativeElement.src = url;

        fd.append('image', blob, "myPicture");
        fd.append('timeStamp', Date.now().toString());
        console.log("Uploading: " + JSON.stringify(fd));
        try {
            this.http.post("http://localhost:3000/selection/test-photo",fd)
            .subscribe(
              (res) => {
                console.log("Successful result: " + JSON.stringify(res))},
              (err) => {
                console.log("Subscribe error: " + JSON.stringify(err))} 
          );
        }
        catch(e) {
          console.log("Caught error: " + e);
        }

      }, 'image/png')

    } else {
      this.clearPhoto();
    }
  }

}


exports.selection_test_photo = [
    (req,res,next) => {
        const photo = new Photo();
        console.log("Entering Post: " + util.inspect(req.file) + "; " + req.body.timeStamp);        
        photo.photo.data = fs.readFileSync(req.file.path);
        photo.photo.contentType = 'image/png';
        photo.timeStamp = {"value": req.body.timeStamp};
        console.log("About to save . . . ");
        photo.save(function(err){
            if (err) {return next(err)};
            res.json({"foo": "bar"});
        });        
    },

];

navigator.mediaDevices.getUserMedia = navigator.mediaDevices.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;