Javascript 在HTML5画布上显示本地可用的JPEG编码博客-浏览器尝试连接到Web服务器

我已经实现了一个代码，从用户的相机捕获视频流，并将其编码为JPEG，然后通过websocket上传到服务器。它运行得很好，每秒10帧没有问题。相关代码片段：

// Get webcam access
if (navigator.getUserMedia) {       
    navigator.getUserMedia({video: true}, handleVideo, videoError);
} 
function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
}

（不要尝试按原样运行代码，不显示非关键部分。它的工作原理是将视频源绘制在画布中，然后将其打包到JPEG编码的blob中，然后由websocket发送）。Javascript控制台中没有错误，并且在服务器上记录有效图像

但是，我还需要能够从服务器获取经过处理的图像，并将其显示在画布中。因此，为了在本地进行测试，我添加了几行代码来将二进制blob绘制回其他画布（在通过websocket连接来回之前）：

因此，基本上我尝试将本地生成的blob加载到另一个画布中。它不起作用。在javascript控制台中，我得到404错误，因为浏览器希望得到：

http://myserver.com/wwwpath/mydir/[object Blob]

当然，这会导致404notfound，因为blob在Javascript中仅作为变量在本地存在。请注意，还尝试使用blob.slice（0）获取“blob”对象的副本，出现了相同的错误

我做错了什么？我确信捕获和上传视频是最难的部分。。。不是在画布中显示JPEG blob的简单操作

在最新的Firefox ESR 52.4.1（64位）中进行测试。

将a设置为

img

src

而不是

Blob

let blobURL = URL.createObjectURL(blob);
rimage.src = blobURL;

当不再需要对

Blob URL

的引用时，可以按照以下步骤撤销

Blob URL

URL.revokeObjectURL(blobURL);

---

你，先生，洛克。有史以来最快的答案，我必须等6分钟才能接受。

// Trigger Frame Capture
setInterval(CaptureTimer, 100);
function CaptureTimer() {
    context.drawImage(video, 0, 0, 640, 480);
    canvas.toBlob(function(blob) {
        ws.send(blob);
        rimage.src = blob;
        };
      }, "image/jpeg", 0.5);

http://myserver.com/wwwpath/mydir/[object Blob]

let blobURL = URL.createObjectURL(blob);
rimage.src = blobURL;

URL.revokeObjectURL(blobURL);