1

ブラウザでモバイルデバイスのカメラにアクセスし、カメラのストリームフレームを同期して反対側に送信するシステムを開発しています。送信されたフレームは反対側でさらに処理されます。以下のコードのように、時間間隔でフレームをキャンバスに描画しました。同期してフレームをさらに処理するために、アクセスしたフレームを反対側に送信するにはどうすればよいですか？キャンバスに描かれた各フレームは、各画像フレームでさらに処理が行われるように、反対側に送信されます。反対側のコードは母国語です。

$<!DOCTYPE html>
<html>
<h1>Simple web camera display demo</h1>
<body>
<video autoplay  width="480" height="480" src=""></video>

<canvas width="600" height="480" style="" ></canvas>
<img src="" width="100" height="100" ></img>

<script type="text/javascript">
var video = document.getElementsByTagName('video')[0], 
heading = document.getElementsByTagName('h1')[0];

if(navigator.getUserMedia) {
navigator.getUserMedia('video', successCallback, errorCallback);
function successCallback( stream ) {
video.src = stream;
}
function errorCallback( error ) {
heading.textContent = 
"An error occurred: [CODE " + error.code + "]";
}
} else {
heading.textContent = 
"Native web camera streaming is not supported in this browser!";
}
draw_interval = setInterval(function() 
{
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var frames = document.getElementById('frames');
ctx.drawImage(document.querySelector("video"), 0, 0);
}, 33)
</script>
</body>
</html>
4

1 に答える 1

0

さようなら「向こう側」と「母国語」の意味がよくわかりません。

ただし、AJAX を使用してキャンバス イメージをサーバーに送信できます。

サーバーは、キャンバス イメージを base64 でエンコードされたイメージ データとして受け取ります。

たとえば、次のように仮定します。

  1. 画像を php サーバー (yourOtherSide.php) に送信していますが、もちろん、これは ajax 投稿を受け入れる任意のサーバーである可能性があります。

  2. フレームを保持しているキャンバス要素への参照があります: canvas

  3. ajax ペイロードには、送信されるフレームの ID 番号 (ID) と画像データ (imgData) が含まれています。

  4. (オプション) サーバーから何らかの応答が返ってきました — たとえそれが単に「OK」だったとしても: anyReturnedStuff

次に、ajax の投稿は次のようになります。

$.post(“yourOtherSide.php”,  { ID:yourFrame ID, imgData: canvas.toDataURL(‘image/jpeg’) })
.done( function(anyReturnedStuff){  console.log(anyReturnedStuff);  } );

[ajax投稿からのサーバー側の画像作成を含むように編集]

これらのコード サンプルは ajax base64 imageData を受け取り、c-image-processing-library で処理するためのイメージを作成します。

PHP サーバーを使用している場合:

$img = imagecreatefromstring(base64_decode($imageData));
// and process $img with your image library here

または、asp.net を使用している場合:

byte[] byteArray = System.Convert.FromBase64String(imageData);
Image image;
using(MemoryStream s=new MemoryStream(byteArray){
    image=Image.FromStream(ms);
    // and process image with your image library here
}
于 2013-02-14T22:01:09.613 に答える