Question

我使用getUserMedia HTML 5功能将视频流式传输到视频标签。使用画布来自＆lt;视频＆gt;标签被绘制到canvas.In my     我只能在画布上一次只绘制一个图像。让我说我点击了多次相机按钮，在此     案例最新图片将在画布上绘制。     我想做的是：     将多个图像绘制到画布＆gt;动态生成画布元素以捕获多个屏幕截图。

请建议任何方法来实现同样的目标。

由于

var videoStream = null;
var video = document.getElementById("video");
var createSrc = window.URL ? window.URL.createObjectURL : function(stream) {
  return stream;
};

document.getElementById('camera').addEventListener('click', function() {
  navigator.getUserMedia({
      video: true,
      audio: false
    },
    function(stream) {

      videoStream = stream;
      // Stream the data
      video.src = createSrc(stream);
      video.play();
    },
    function(error) {
      console.log("Video capture error: ", error.code);
      alert("error in streaming");
    });

});
document.getElementById('screenshot').addEventListener('click', function() {

  var canvas = document.querySelector('#tagCanvas');
  var ctx = canvas.getContext('2d');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  ctx.drawImage(video, 0, 0);
  try {
    var imageUrl = canvas.toDataURL();

  } catch (e) {
    alert("Error in getting canvas url");
  }


});

<video id="video" autoplay="autoplay" style="background-color: lightgray; 
     width:80%; height:60%; margin-top:-4em">
</video>
<canvas id="tagCanvas" style="background-color: gray; width: 50%">
</canvas>
<button data-theme="d" id="screenshot">Screen Shot</button>
<button data-theme="d" id="camera">Start Camera</button>

Answer 1

您在屏幕上选择画布的位置：

var canvas = document.querySelector('#tagCanvas');

替换为canvas元素的创建：

var canvas = document.createElement("div");

将其放在页面上：

document.getElementsByTagName("body")[0].appendChild(canvas);

记住设置正确的样式，宽度和高度，以便可以看到画布。

Answer 2

如果您需要，可以在每个画布上绘制多个屏幕截图：

javascript

$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var cw=canvas.width;
    var ch=canvas.height;

    var position=0;

        var v = document.getElementById('v');
        v.addEventListener( "loadedmetadata", function(e){
            // resize canvas
            cw=canvas.width=v.videoWidth;
            ch=canvas.height=v.videoHeight;
            // play the video
            v.play();
        }, false );   


    $('#snap').click(function(){

        var x,y;
        if(position==0){ x=0;y=0; }
        if(position==1){ x=cw/2;y=0; }
        if(position==2){ x=0;y=ch/2; }
        if(position==3){ x=cw/2;y=ch/2; }

        ctx.clearRect(v,x,y,cw/2,ch/2);
        ctx.drawImage(v,x,y,cw/2,ch/2);

        position++;
        if(position>3){ position=0; }

    });

}); // end $(function(){});

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<button id=snap>Capture</button>
<br>
<h4>Captured Snapshots -- 4 snapshots per canvas</h4>
<canvas id="canvas" width=300 height=300></canvas>
<h4>Video Element below</h4>
<video id=v controls loop>
    <source src=yourClip.mp4 type=video/mp4>
</video>

使用getUserMedia捕获图像并将其绘制到画布上

2 个答案: