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

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

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

...

// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('videoElement');

...

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

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

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

// Elements for drawing the blobbed image
var rcanvas = document.getElementById('rcanvas');
var rcontext = rcanvas.getContext('2d');
var rimage = new window.Image();
// Connect rimage to rcontext
rimage.onload = function(){
  rcontext.drawImage(rimage,0,0); 
};

...

// 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);

所以，基本上我尝试将本地生成的blob加载到另一个画布中。这没用。在 javascript 控制台中，我收到 404 错误，因为浏览器想要获取：

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

当然，这会导致 404 Not Found，因为 blob 仅作为 Javascript 中的变量在本地存在。请注意，还尝试使用 blob.slice(0) 获取“blob”对象的副本，同样的错误。

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

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