我在台式电脑上收到 MediaStreamError { name: "AbortError", message: "Starting video failed", constraint: "", stack: "" }，但在我的笔记本电脑上没有。注意：两台 PC 都运行 Windows 10 并使用相同的代码库。
该应用程序在我使用 Firefox（带有 USB 2.0 HD UVC 网络摄像头）的笔记本上运行良好，但在我的台式电脑上，无论是使用 Firefox、Edge 还是 Chrome，我仍然会收到错误消息。我的台式电脑摄像头是罗技（罗技 HD WebCam C270），我在另一篇帖子中看到同样的错误Firefox 54（ubuntu 14.04）：Twilio video failed getUserMedia其他人（@Roger Walsh）也有同样的错误使用罗技相机。
这是代码：前端（角度视图）
<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>
前端（角度组件）
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"});
});
},
];
有没有其他人有这个问题？有任何想法吗？谢！
