Я получаю 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!