angular7上带有图像主体的Http请求

我正在开发一个angular应用程序，它每秒从网络摄像头获取一个捕获，并将其发送到RESTAPI端点，对其进行一些神奇的分析。这样做；我正在创建一个可观察的时间间隔，它从网络摄像头录制的视频中捕获一个视频，并将其嵌入post http请求主体（基于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);
    }
  });
}

secondsconter=间隔（1000）；
@ViewChild（“视频”）
公共视频：ElementRef；
url=”http://myapi.com";
httpOptions={
标题：新的HttpHeaders({
“内容类型”：“应用程序/八位字节流”，
})
};
公共捕获（）{
让image=this.video.nativeElement
返回这个.canvas.nativeElement.toDataURL（“image/png”）；
}
getData（图像）：可观察
{
返回this.http.post（this.url、image、this.httpOptions）
}
公共ngAfterViewInit（）{
if（navigator.mediaDevices&&navigator.mediaDevices.getUserMedia）{
navigator.mediaDevices.getUserMedia（{video:true}）。然后（stream=>{
this.video.nativeElement.srcObject=流；
this.video.nativeElement.play（）；
});
}   
}
恩戈尼尼特（）{
this.secondsCenter.subscribe（n=>
{
试一试{
让image=this.capture（）；
这是.getData（image）.subscribe(
数据=>{
控制台日志（数据）；
}
);
}捕获（错误）{
日志（“错误：”，错误）；
}
});
}

app.component.html

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

当我启动应用程序时，我得到一个400错误

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

但是，当我使用http客户端（如失眠或Fiddler）测试我的端点时，一切正常，我如何解决问题？

尝试将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  ;

---

您是否尝试过-Content Type:image/png..？@MukulSharma:my api通过应用程序/octet流接受图像，我尝试过使用相同的请求体结构（http客户端），效果很好。问题只出现在angularI身上，我不确定capture（）是否真的是capture。看起来你正在发布html元素？@DouglasLiu:已编辑，但仍然无法发布work@MèhdiBenHamida我以前从未使用过这些API，但我认为getDataURL（）不会提供您期望的二进制数据。这实际上是一个字符串。端点是否支持从字符串解码？它应该是base64编码的。

base64Reader

需要一些特殊的包来导入吗？不应该存在任何包，因为base64Reader=reader。我更新了代码。仍然不起作用，我得到了“FileReader.readAsDataURL的参数1未实现接口Blob”。代码行

reader.readAsDataURL（文件）