Получение MediaStreamError {name: "AbortError", сообщение: "Не удалось запустить видео", ограничение: "", stack: ""} на одном ПК, но не на другом - PullRequest
0 голосов
/ 18 июня 2019

Я получаю MediaStreamError {name: "AbortError", сообщение: "Не удалось запустить видео", ограничение: "", stack: ""} на настольном компьютере, но не на ноутбуке. Примечание: оба компьютера работают под управлением Windows 10 и используют одинаковую кодовую базу.

Приложение отлично работает на моем ноутбуке с использованием Firefox (с веб-камерой USB 2.0 HD UVC), но на моем настольном ПК, независимо от того, используется ли Firefox, Edge или Chrome, я все равно получаю сообщение об ошибке. Моя камера настольного ПК - Logitech (Logitech HD WebCam C270), и я видел в другом посте ту же ошибку Firefox 54 (Ubuntu 14.04): видео Twilio не удалось получить getUserMedia , которое также имел кто-то другой (@Roger Walsh) та же ошибка при использовании камеры Logitech.

Вот код: Front-end (угловой вид)

<div class="camera">
  <video #videoRef id="video" [(ngModel)]="video" (canplay)="setVideo()" name="video" ngDefaultControl>Video stream not available.</video>
  <button #startbuttonRef id="startbutton" [(ngModel)]="startbutton" (click)="takePicture()" name="startbutton" ngDefaultControl>Take photo</button>
</div>

<canvas #canvasRef id="canvas" [(ngModel)]="canvas" name="canvas" ngDefaultControl style="display:none"></canvas>
<div class="output">
  <img #photoRef id="photo" [(ngModel)]="photo" name="photo" ngDefaultControl alt="The screen capture will appear in this box.">
</div>

Front-end (угловой компонент)

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"});
        });        
    },

];

Кто-нибудь еще имел эту проблему? Есть идеи? Tks!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...