Question

我正在开发一个角度应用程序，该应用程序每秒捕获一次来自网络摄像头的捕获，并将其发送到api端点，以对其进行一些魔术分析。去做这个;我正在做一个可观察的时间间隔，该时间间隔是从网络摄像头重新编码的视频中捕获的，并将其嵌入到http请求发布的主体（基于base 64）中，以将其发送到端点。这是我的工作方式：

app.component.ts

secondsCounter = interval(1000);

@ViewChild("video")
public video: ElementRef;

url = "http://myapi.com";
httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/octet-stream',
    })
};

public capture() {
    let image = this.video.nativeElement
    return this.canvas.nativeElement.toDataURL("image/png"); 
}

getData(image): Observable<any>
{
   return this.http.post<any>(this.url, image, this.httpOptions)
}

public ngAfterViewInit() {
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
             this.video.nativeElement.srcObject = stream;
             this.video.nativeElement.play();
        });

    }   
}

ngOnInit() {
  this.secondsCounter.subscribe(n =>
    {
      try {
        let image = this.capture();
        this.getData(image).subscribe(
          data => {
             console.log( data);
          }
        );

    } catch (error) {
      console.log("error: ",error);
    }
  });
}

app.component.html

<div class="col-md-6">
   <video #video id="video" autoplay></video>
</div>

启动应用程序时出现400错误

错误：{…} 代码：“ BadRequestImageFormat” 消息：“错误的请求图像格式，Uri：cde9bdf3442b45dc85256454f65ea068”

但是当我使用诸如Insomnia或Fiddler之类的http客户端测试端点时，一切正常，如何解决该问题？

Answer 1

尝试将capture（）方法更改为：这是我的代码中的一个示例：更新个人资料图片。我做了一些修改...

public capture() {

let encodedBase64Picture : any ;
var file: File = this.video.nativeElement ;
var reader: FileReader = new FileReader();
reader.onloadend = ( e ) => {
encodedBase64Picture = reader.result;
}
reader.readAsDataURL( file );
return encodedBase64Picture  ;

Angular7上带有图像主体的HTTP请求

1 个答案: