草庐IT

javascript - 通过websocket接收图片

coder 2024-05-12 原文

我正在使用 websockify 将图像从 python 服务器显示到 HTML5 Canvas 。

我认为我已经成功地从我的 python 服务器发送图像，但我无法将图像显示到我的 Canvas 上。

我认为问题与我试图在 Canvas 上显示的字节数有关，我相信我不会等到收到整个图像然后再将图像显示到 Canvas 上。

到目前为止，我有:

消息功能。当我发送图像时，我在控制台中得到 12 MESSAGERECEIVED

  ws.on('message', function () {
    //console.log("MESSAGERECEIVED!")
            msg(ws.rQshiftStr());
  });

我接收字符串并尝试在 Canvas 上显示它的 msg 函数。我为每张图片调用该方法 12 次。字符串的格式是 'xÙõKþ°pãüCY :

function msg(str) {
        //console.log(str);
        console.log("RELOAD");

        var ctx = cv.getContext('2d');
        var img = new Image();
        //console.log(str);
        img.src = "data:image/png;base64," + str;
        img.onload = function () {
            ctx.drawImage(img,0,0);
        }
    }

关于如何解决这个问题有什么建议吗？

最佳答案

websockify+websock.js 的重点是透明地支持流式二进制数据(更多内容见下文)。您从接收队列中取出的数据已经经过 base64 解码。但是，数据 URI 方案需要 base64 编码的字符串，因此您需要将图像数据编码为 base64。您可以使用内置的 window.btoa() 对二进制编码的字符串进行 base64 编码:

img.src = "data:image/png;base64," + window.btoa(str);

或者，为了提高效率，您可以使用 include/base64.js 中的 Base64 模块，但您需要向它传递一个字节数组，就像您从 rQshiftBytes 中获得的那样:

msg(ws.rQshiftBytes());

img.src = "data:image/png;base64," + Base64.encode(data);  // str -> data

关于websockify中base64的使用:

Websockify 使用 base64 对数据进行编码以支持不直接支持二进制数据的浏览器。除了流行的 Hixie only 浏览器(例如 iOS Safari 和桌面版 Safari)之外，一些在野外使用 HyBi 但缺少二进制支持的浏览器版本。不幸的是，就 Chrome 而言，他们大约在同一时间也有一个 WebIDL 错误，该错误会阻止在建立连接之前检测二进制支持。

此外，在 Opera、firefox 3.6-5、IE 8 和 9 上使用 WebSockets 的主要选项是 web-socket-js . web-socket-js 支持 HyBi，但不支持二进制，而且可能不会，因为它所针对的大多数旧浏览器不支持 native 二进制类型(Blob 和类型化数组)。

目前支持 HyBi 和二进制数据的浏览器的市场份额很低。然而，在未来，Websockify 将检测(通过对象检测或浏览器版本检测)浏览器是否支持二进制数据并直接使用支持，而不需要 base64 编码/解码。

base64 编码/解码的延迟(和 CPU)开销非常低，并且通常会被网络延迟冲掉。 base64 编码数据的带宽开销约为 25%(即原始数据变得更大 33%)，但它确实在基本上所有浏览器上通过 WebSockets 为您提供二进制数据(使用 web-socket-js polyfill/shim，这是如果需要，由 websockify 透明地使用)。

关于javascript - 通过websocket接收图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9292133/

javascriptwebsocketcodebasesection

有关javascript - 通过websocket接收图片的更多相关文章

  1. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  2. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  3. ruby - 通过 ruby​​ 进程共享变量 - 2

    我正在编写一个gem，我必须在其中fork两个启动两个webrick服务器的进程。我想通过基类的类方法启动这个服务器，因为应该只有这两个服务器在运行，而不是多个。在运行时，我想调用这两个服务器上的一些方法来更改变量。我的问题是，我无法通过基类的类方法访问fork的实例变量。此外，我不能在我的基类中使用线程，因为在幕后我正在使用另一个不是线程安全的库。所以我必须将每个服务器派生到它自己的进程。我用类变量试过了，比如@@server。但是当我试图通过基类访问这个变量时，它是nil。我读到在Ruby中不可能在分支之间共享类变量，对吗？那么，还有其他解决办法吗？我考虑过使用单例，但我不确定这是

  4. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  5. ruby-on-rails - Enumerator.new 如何处理已通过的 block ？ - 2

    我在理解Enumerator.new方法的工作原理时遇到了一些困难。假设文档中的示例:fib=Enumerator.newdo|y|a=b=1loopdoy[1,1,2,3,5,8,13,21,34,55]循环中断条件在哪里，它如何知道循环应该迭代多少次(因为它没有任何明确的中断条件并且看起来像无限循环)？ 最佳答案 Enumerator使用Fibers在内部。您的示例等效于:require'fiber'fiber=Fiber.newdoa=b=1loopdoFiber.yieldaa,b=b,a+bendend10.times.m

  6. ruby-on-rails - RSpec:避免使用允许接收的任何实例 - 2

    我正在处理旧代码的一部分。beforedoallow_any_instance_of(SportRateManager).toreceive(:create).and_return(true)endRubocop错误如下:Avoidstubbingusing'allow_any_instance_of'我读到了RuboCop::RSpec:AnyInstance我试着像下面那样改变它。由此beforedoallow_any_instance_of(SportRateManager).toreceive(:create).and_return(true)end对此:let(:sport_

  7. ruby - 寻找通过阅读代码确定编程语言的ruby gem？ - 2

    几个月前，我读了一篇关于ruby​​gem的博客文章，它可以通过阅读代码本身来确定编程语言。对于我的生活，我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗？ 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem？，我们在StackOverflow上找到一个类似的问题：

  8. 通过 MacPorts 的 RubyGems 是个好主意吗？ - 2

    从MB升级到新的MBP后，Apple的迁移助手没有移动我的gem。我这次是通过macports安装ruby​​gems，希望在下次升级时避免这种情况。有什么我应该注意的陷阱吗？ 最佳答案 如果你想把你的gems安装在你的主目录中(在传输过程中应该复制过来，作为一个附带的好处，会让你以你自己的身份运行geminstall，而不是root)，将gemhome:键设置为您在~/.gemrc中的主目录中的路径. 关于通过MacPorts的RubyGems是个好主意吗？，我们在StackOverf

  9. ruby-on-rails - Ruby on Rails - 为文本区域和图片生成列 - 2

    我是Rails的新手，所以请原谅简单的问题。我正在为一家公司创建一个网站。那家公司想在网站上展示它的客户。我想让客户自己管理这个。我正在为“客户”生成一个表格，我想要的三列是:公司名称、公司描述和Logo。对于名称，我使用的是name:string但不确定如何在脚本/生成脚手架终端命令中最好地创建描述列(因为我打算将其设置为文本区域)和图片。我怀疑描述(我想成为一个文本区域)应该仍然是描述:字符串，然后以实际形式进行调整。不确定如何处理图片字段。那么……说来话长:我在脚手架命令中输入什么来生成描述和图片列？ 最佳答案 对于“文本”数

  10. ruby - 通过 RVM 安装 Ruby 1.9.2 永远行不通! - 2

    当我执行>rvminstall1.9.2时一切顺利。然后我做>rvmuse1.9.2也很顺利。但是当涉及到ruby​​-v时..sam@sjones:~$rvminstall1.9.2/home/sam/.rvm/rubies/ruby-1.9.2-p136,thismaytakeawhiledependingonyourcpu(s)...ruby-1.9.2-p136-#fetchingruby-1.9.2-p136-#downloadingruby-1.9.2-p136,thismaytakeawhiledependingonyourconnection...%Total%Rece

随机推荐