Question

希望我在这里提出一个明确的问题;

我要做的是从用户摄像头（无论是网络摄像头还是手机）捕获用户媒体，然后将该信息发布到NodeJS服务器，在那里将对其进行操作/上传/解析等。

目前我有一个按钮，可以从相机捕捉场景并将其绘制到画布上，然后将其发送到节点服务器进行进一步处理。

我正在把头发拉出来。我试图将POST信息作为base64发送，这不起作用，然后尝试将其转换为blob并以这种方式发布，但无济于事。

最终结果总是留给我一个空的请求体。

我一直在无情地寻找，但却无法找到任何我能够破解我的应用程序的东西。

将Angular2与Node v8.9.3一起使用

我的upload.component.html：

<video #cameraCapture width="640" height="480" autoplay></video>
<canvas #cameraCanvas width="640" height="480"></canvas>
<form (ngSubmit)="uploadTest()">
    <button type="submit">Save Test</button>
</form>

在我的upload.component.ts中：

  ngAfterViewInit() {
      let cameraCap = this.cameraCapture.nativeElement;
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices.getUserMedia({ video: true })
              .then(stream => {
                  cameraCap.src = window.URL.createObjectURL(stream);
                  cameraCap.play();
              });
      }
  }

  uploadPicture() {
      let cameraCan = this.cameraCanvas.nativeElement;
      let cameraCap = this.cameraCapture.nativeElement;
      cameraCan.getContext('2d').drawImage(cameraCap, 0, 0, 640, 480, 0, 0, 640, 480);
      let blob = this.b64toFile(cameraCan.toDataURL());
      console.log(blob);
      let conf = { headers: { 'Content-Type': undefined}};
      this.http.post('/api/image', blob).subscribe((res: any) => {
          console.log(res);
          }
      );
  }

b64toFile(dataURI): File {
    // convert the data URL to a byte string
    const byteString = atob(dataURI.split(',')[1]);

    // pull out the mime type from the data URL
    const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    // Convert to byte array
    const ab = new ArrayBuffer(byteString.length);
    const ia = new Uint8Array(ab);
    for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    // Create a blob that looks like a file.
    const blob = new Blob([ab], { 'type': mimeString });
    blob['lastModifiedDate'] = (new Date()).toISOString();
    blob['name'] = 'file';

    // Figure out what extension the file should have
    switch(blob.type) {
        case 'image/jpeg':
            blob['name'] += '.jpg';
            break;
        case 'image/png':
            blob['name'] += '.png';
            break;
    }
    // cast to a File
    return <File>blob;
}

在我的server.js中，我有一个简单的API请求：

app.post('/api/image', function(req, res) {
    console.log(req.body);
    res.json(req.body);
});

我觉得我现在缺少一些简单的东西，但我的头脑变得相当慌张。

感谢您的任何建议/想法。

从Angular2向NodeJS服务器发送blob数据

0 个答案: