12

現在のキャンバスのバイナリ スナップショットを他のリスナーに転送する単純な WebSocket アプリケーションを構築しています。

現在のキャンバス スナップショットは、WebSocket を使用して次のように送信されます。

var image = context.getImageData(0, 0, canvas.width, canvas.height);
var buffer = new ArrayBuffer(image.data.length);
var bytes = new Uint8Array(buffer);
for (var i=0; i<bytes.length; i++) {
    bytes[i] = image.data[i];
}
websocket.send(buffer);

受信側でデータを次のようにレンダリングしようとしています:

var bytes = new Uint8Array(blob.size);
var image = context.createImageData(canvas.width, canvas.height);
for (var i=0; i<image.length; i++) {
    image[i] = bytes[i];
}
context.drawImage(image, 0, 0);

ブロブは正しく受信されますが、画像はまだレンダリングされていません。

何か案が ？

4

5 に答える 5

10

接続の初期化直後に WebSocket の binaryType 属性を設定するとうまくいきました。これは次のように実行できます。

var wsUri = "ws://localhost:8080/whiteboard/websocket";
var websocket = new WebSocket(wsUri);
websocket.binaryType = "arraybuffer";

これにより、テキスト データとバイナリ データの両方を転送できます。

于 2012-11-27T18:59:05.170 に答える
1

すでにこのページを見たことがあると思います。

http://www.adobe.com/devnet/html5/articles/real-time-data-exchange-in-html5-with-websockets.html

そのページで「バイナリメッセージの受信」を見つけるか、ページ全体を読んでください。

onmessage eventsの1行目にデバッグを入れて、event.dataオブジェクトを検査する方が良いと思います。あなたが言っているように、バイナリデータをキャプチャしてサーバーに送信することができるので、ブラウザがWebソケットを介してバイナリデータをサポートしていない可能性があるという疑いがなくなります。

今、私の唯一の疑問は、「サーバーは本当にバイナリデータを送信しているのか」ということです。表示されるimghtml要素を作成し、受信したデータをsrc propに割り当てて、データを確認するだけでいいですか？これがデータのバイナリ転送とデコードのためのWebSocketに役立つかどうかわからない

于 2012-11-16T13:02:49.000 に答える
0

http://www.w3schools.com/tags/canvas_createimagedata.asp?output=print

image[]ではなくimage.data[]である必要があります

于 2012-11-15T03:58:50.777 に答える
0

最終的なコードは次のようになります

var bytes = new Uint8Array(blob);
var image = context.createImageData(canvas.width, canvas.height);
for (var i=0; i<bytes.length; i++) {
    image.data[i] = bytes[i];
}
context.drawImage(image, 0, 0);
于 2012-11-15T16:55:39.987 に答える
0

あなたの bytes 変数は空のようですhttp://www.javascripture.com/Uint8Arrayまたはhttps://developer.mozilla.org/en-US/docs/JavaScript_typed_arrays/Uint8Arrayの最初のタイプのコンストラクターを使用 し、各要素はゼロに割り当てられています.

于 2012-11-15T06:57:13.997 に答える