websocket経由で画像を受信

Question

私はwebsockifyを使用して、画像をPythonサーバーからHTML5キャンバスに表示しています。

私はPythonサーバーから画像を正常に送信できたと思いますが、キャンバスに画像を表示することはできません。

問題は、キャンバスに表示しようとしているバイト数と関係があり、画像全体が受信され、キャンバスに画像が表示されるまで待っていないと思います。

これまで私は持っていた：

オンメッセージ機能。私は、画像を送ったとき、私はコンソールの12 MESSAGERECEIVED

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

私は文字列を受け取り、私はキャンバス上に表示しようとしています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); 
     } 
    } 

この問題を解決する方法上の任意の提案？

Answer 1

websockify + websock.jsの焦点は、ストリーミングバイナリデータを透過的にサポートすることです（詳細は後述）。受信キューから取得したデータは、すでにbase64でデコードされています。ただし、データURIスキームはbase64でエンコードされた文字列を必要としているため、イメージデータをbase64にエンコードする必要があります。あなたは、base64エンコードバイナリコード化された文字列組み込みwindow.btoa（）を使用することができます。

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

それとも、効率化のためにあなたからのBase64モジュールを使用することができますを/ base64.jsが含まれていますが、それを渡す必要がありますあなたはrQshiftBytesからになるだろうとして、バイトの配列：

msg(ws.rQshiftBytes()); 

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

websockifyでbase64での使用に関して：

websockifyは悲惨なバイナリデータをサポートしていないブラウザをサポートするためにデータをエンコードするためにBASE64を使用していますctly。 iOS SafariやデスクトップSafariなどの人気のあるHixieのみのブラウザに加えて、野生の一部のブラウザバージョンではHyBiを使用していますが、バイナリサポートはありません。残念ながら、Chromeの場合、同じ時間にWebIDLバグがあり、接続を行う前にバイナリサポートを検出できませんでした。

また、Opera、Firefox 3.6-5、IE 8,9でWebSocketを使用する主なオプションはweb-socket-jsです。 web-socket-jsはHyBiをサポートしていますが、バイナリをサポートしておらず、ターゲットとする古いブラウザのほとんどがネイティブバイナリタイプ（Blob型と型付き配列）をサポートしていないためおそらくないでしょう。

HyBiとバイナリデータをサポートするブラウザの市場シェアは現在かなり低いです。ただし、Websockifyは、ブラウザがバイナリデータをサポートしていて、base64エンコード/デコードを必要とせずに直接サポートを使用するかどうかを、オブジェクト検出またはブラウザのバージョン検出によって検出します。

base64エンコード/デコードのレイテンシ（およびCPU）オーバーヘッドはかなり低く、通常ネットワークの待ち時間によって洗い流されません。 base64でエンコードされたデータの帯域幅オーバーヘッドは約25％です（つまり、生データが33％大きくなります）が、WebSocket経由では基本的にすべてのブラウザのバイナリデータを提供します（web-socket-js polyfill/shim必要に応じてWebsockifyによって透過的に使用されます）。