如何使用HTML5在网页上制作互动视频？

Question

我有一个具有低延迟(本地)的web服务器，我希望做的是从web服务器生成视频内容，并允许用户通过点击视频与该视频内容进行交互，点击x，y将转到服务器。

用户点击的位置将决定视频将执行的操作。此外，视频不会暂停等待点击，它需要继续播放。

我试着用图片，每50毫秒重新加载一张图片。在我的MAC上，Chrome每隔50毫秒就会使用10%的CPU来重新加载图像，其中图像是用PHP生成的。这是相当好的，百分之十是好的，但我在想有没有更好的方法？

另外，稍后我需要能够发送用户点击的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>

你可以考虑这个问题的另一种方式是，你如何编写一个网络摄像头客户端，让用户可以控制摄像头？如何使用HTML5做到这一点呢？(而不是Flash)，这样当用户单击up时，相机就会向上移动，视频也会发生变化，以显示相机向上移动。

有没有办法在HTML5中实现这样的视频流？使用Canva和流式传输数据到浏览器会有帮助吗？

Answer 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>