0

私は低遅延 (ローカル) の Web サーバーを持っています。私がしたいことは、Web サーバーからビデオ コンテンツを生成し、ユーザーがビデオをクリックしてそのビデオ コンテンツと対話できるようにすることです。サーバー。

ユーザーがクリックした場所によって、動画の動作が決まります。また、ビデオはクリックを待つために一時停止するのではなく、再生を続ける必要があります。

50ミリ秒ごとに単一の画像をリロードするために、画像を試しました。私の MAC では、Chrome は約 10% の CPU 使用率を使用して、50 ミリ秒ごとにイメージをリロードし、イメージは PHP で生成されます。それはかなり良いです、10% は良いですが、もっと良い方法があると思いますか?

また、後でユーザーのクリックの XY 座標を送信できるようにする必要がありますが、URL を使用してそれを行うことができます。

  <script type="text/javascript">

function reloadIt() {
  var n = Math.floor(Math.random()*1000001);
  $("#topaz").attr("src", "image.php?n=" + n);
  setTimeout(reloadIt, 50);
}

$(document).ready(function() {
  // Handler for .ready() called.
  setTimeout(reloadIt, 50);
});

  </script>

この問題を考える別の方法は、ユーザーがカメラを制御できる Web カメラ クライアント側をどのようにプログラムできるかということです。HTML5でそれをどのように行いますか? （フラッシュではありません）、ユーザーが上をクリックすると、カメラが上に移動し、ビデオが上に移動するように変化します。

HTML5 でこのようなビデオ ストリーミングを行う方法はありますか? Canva を使用してブラウザにデータをストリーミングすることは役に立ちますか? ...

4

1 に答える 1

1

このような点傾斜カメラの錯覚を作成できます

キャンバスにビデオを表示するコードが既にあるかどうか、あなたの投稿からはわかりませんでした。キャンバスにビデオを表示する方法を知る必要がある場合は、次のチュートリアルをご覧ください: http://html5doctor.com/video-canvas-magic/

その後、ソースが 640x480 のオフスクリーン画像 (またはビデオ) と 320x240 の小さなキャンバスがあるとします。

<img width=640 height=480>
<canvas width=320 height=480>

その画像の小さな部分をキャンバスに表示します。

// grab a smaller part of the source and display it in the canvas
context.drawImage(source,X,Y,source.width,source.height,0,0,canvas.width,canvas.height);

次に、ユーザーがクリックしたときに、ソースのどの部分を表示しているかを調整するだけです

// change the portion of the source you’re displaying
if(mouseX<canvas.width/2 && x>0){ x-=10; }
if(mouseX>=canvas.width/2 && x<canvas.width){ x+=10; }
if(mouseY<canvas.height/2 && y>0){ y-=10; }
if(mouseY>=canvas.height/2 && y<canvas.height){ y+=10; }

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/3KYC5/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var img=new Image();
    img.onload=function(){
        draw();
    }
    img.src="http://dsmy2muqb7t4m.cloudfront.net/tuts/218_Trace_Face/10B.jpg";

    var x=200;
    var y=200;
    function draw(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(img,x,y,canvas.width,canvas.height,0,0,canvas.width,canvas.height);
    }

    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      if(mouseX<canvas.width/2 && x>0){ x-=10; }
      if(mouseX>=canvas.width/2 && x<canvas.width){ x+=10; }
      if(mouseY<canvas.height/2 && y>0){ y-=10; }
      if(mouseY>=canvas.height/2 && y<canvas.height){ y+=10; }
      draw();
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});

}); // end $(function(){});
</script>

</head>

<body>
    <p>Click in the image to reveal in the direction of the click</p>
    <canvas id="canvas" width=320 height=240></canvas>
</body>
</html>
于 2013-04-06T16:31:16.687 に答える