Question

我有一个低延迟（本地）的网络服务器，我想做的是从网络服务器生成视频内容，并允许用户通过点击视频和点击x，y与该视频内容进行交互将转到服务器。

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

我尝试使用图像，每50毫秒重新加载一张图像。在我的MAC上，Chrome使用大约10％的CPU使用率，每50毫秒重新加载图像，在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），这样当用户点击时，相机会向上移动并且视频会发生变化以显示它向上移动。

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

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

1 个答案: