Javascript 如何在Firefox中实现基于视频约束的getusermedia捕获?在Chrome中,一切都是按照代码进行的,而不是Firefox?
当我想从getusermedia捕获图像时,我遇到了一个问题,Firefox中捕获的图像没有保留我在视频约束中设置的比率。 这是获取视频的比率,但从我所看到的视频来看,它没有考虑Firefox中的限制Javascript 如何在Firefox中实现基于视频约束的getusermedia捕获?在Chrome中,一切都是按照代码进行的,而不是Firefox?,javascript,html5-canvas,html5-video,getusermedia,Javascript,Html5 Canvas,Html5 Video,Getusermedia,当我想从getusermedia捕获图像时,我遇到了一个问题,Firefox中捕获的图像没有保留我在视频约束中设置的比率。 这是获取视频的比率,但从我所看到的视频来看,它没有考虑Firefox中的限制 if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { if(window.innerWidth >= 600){ this.canvasWidth = 480
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
if(window.innerWidth >= 600){
this.canvasWidth = 480;
this.canvasHeight = 360;
} else {
this.canvasWidth = 240;
this.canvasHeight = 240;
}
navigator.mediaDevices.getUserMedia({ audio: false,video: {facingMode: 'user', width: this.canvasWidth * 2, height: this.canvasHeight * 2} }).then(stream => {
this.useWebcam = true;
this.canvas.nativeElement.style.display = 'none';
this.video.nativeElement.srcObject = stream;
this.stream = stream;
this.ref.detectChanges();
this.video.nativeElement.play();
console.log(stream);
}).catch(reason => {
this.useWebcam = false;
if(this.acceptable){
this.acceptable = false;
this.eMessage = reason + "<br/>Please check your camera to continue.";
this.ref.detectChanges();
}
// alert(reason + " \nPlease check your camera to continue.")
});
} else {
this.eMessage = "Please check your camera to continue.";
}
如何使用给定的约束制作视频?这段代码在Chrome中有效,而不是在Firefox中?多谢各位
注:
在提问之前,我已经阅读了其他问题,但仍然没有回答我的问题。谢谢您向getUserMedia()提供的约束是请求。你不会总是得到你要求的准确尺寸 我同意你的观察,Google Chrome比Firefox更符合你的要求。我尝试使用
exact
属性强制Firefox使用精确维度,但它拒绝了,并出现了一个违反约束的错误
我必须剪辑捕获的Firefox图像,使其与我在Chrome中捕获的图像大小相同。为了让抓拍的用户看起来更合适,我还安排了一些CSS来剪辑预览窗口。最后,在试用了我的代码之后,我可以进行预览
positioningVideo(){
//Check Orientation
if(this.videoWidth > this.videoHeight){
let temp = this.videoWidth;
this.videoWidth = this.videoHeight;
this.videoHeight = temp;
}
if(this.videoWidth > (this.canvasWidth * 2)){
this.video.nativeElement.style.maxHeight = '' + this.canvasHeight + 'px' ;
this.video.nativeElement.style.maxWidth = '' + (this.videoWidth / 2) + 'px';
} else if(this.videoHeight > (this.canvasHeight * 2)){
this.video.nativeElement.style.maxWidth = '' + this.canvasWidth + 'px' ;
this.video.nativeElement.style.maxHeight = '' + (this.videoHeight / 2) + 'px';
} else if(this.videoWidth == (this.canvasWidth * 2) && this.videoHeight == (this.canvasHeight * 2)){
this.video.nativeElement.style.maxHeight = '' + this.canvasHeight + 'px' ;
this.video.nativeElement.style.maxWidth = '' + this.canvasWidth + 'px' ;
}
}
我用一些计算来设置我的起始坐标
注意:我使用的是裁剪中心,因此我计算顶部或左侧的边距
capture() {
let coorX = 0, coorY = 0;
if(this.videoWidth != (this.canvasWidth * 2)){
coorX = (this.videoWidth - (this.canvasWidth * 2)) / 2;
}
if(this.videoHeight != (this.canvasHeight * 2)){
coorY = (this.videoHeight - (this.canvasHeight * 2)) / 2;
}
this.canvas.nativeElement.style.display = 'block';
this.canvas.nativeElement.getContext("2d").scale(-1,1);
this.canvas.nativeElement.getContext("2d").drawImage(this.video.nativeElement, coorX, coorY, this.canvasWidth * 2, this.canvasHeight * 2, 0, 0, -1 * this.canvasWidth, this.canvasHeight);
this.canvas.nativeElement.getContext("2d").restore();
this.captured = this.canvas.nativeElement.toDataURL("image/png");
this.video.nativeElement.parentElement.style.display = 'none';
}
capture() {
let coorX = 0, coorY = 0;
if(this.videoWidth != (this.canvasWidth * 2)){
coorX = (this.videoWidth - (this.canvasWidth * 2)) / 2;
}
if(this.videoHeight != (this.canvasHeight * 2)){
coorY = (this.videoHeight - (this.canvasHeight * 2)) / 2;
}
this.canvas.nativeElement.style.display = 'block';
this.canvas.nativeElement.getContext("2d").scale(-1,1);
this.canvas.nativeElement.getContext("2d").drawImage(this.video.nativeElement, coorX, coorY, this.canvasWidth * 2, this.canvasHeight * 2, 0, 0, -1 * this.canvasWidth, this.canvasHeight);
this.canvas.nativeElement.getContext("2d").restore();
this.captured = this.canvas.nativeElement.toDataURL("image/png");
this.video.nativeElement.parentElement.style.display = 'none';
}