使用 webRTC + canvas 通过 jQuery 捕获图像

Question

当我执行此代码时，收到此错误消息：

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)

$(document).ready(function () {
  window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  var Video = $('#CaptureImage');
  var Canvas = $('#Canvas');
  var Image = $('.Photo_BDD');
  var Take = $('.Take');
  var ImageContext = Canvas[0].getContext('2d');
  var Width = Video.width() - 2;
  var Height = Video.height() - 2;
  Canvas.width = Width;
  Canvas.height = Height;
  var MediaSizeConstraints = {
    mandatory: {
      minWidth: Width,
      minHeight: Height,
      maxWidth: Width,
      maxHeight: Height
    }
  };
  var LocalStream = null;
  var VideoConstraints = {
    audio: false,
    video: true,
    video: MediaSizeConstraints
  };
  $('.Capture').click(function () {
    Start();
    Take.click(function () {
      if (LocalStream) {
        ImageContext.drawImage(Video, 0, 0, Canvas.width, Canvas.height);
        Image.attr('src', Canvas.toDataURL('image/png'));
      }
    });
  });
  function Start() {
    try {
      navigator.getUserMedia(VideoConstraints, successCallback, errorCallback);
    } catch (e) {
      throw new Exception('Error:GetUserMedia not execute');
    }
  }
  function Stop() {
    Video.trigger("pause");
    Video.attr('Src', '');
    LocalStream.stop();
  }
  function successCallback(Stream) {
    LocalStream = Stream;
    if (window.URL) {
      Video.attr('Src', URL.createObjectURL(Stream));
    } else {
      Video.attr('Src', Stream);
    }
    Video.attr('autoplay', true);
  }
  function errorCallback() {
    console.error('An error occurred: [CODE ' + error.code + ']');
  }
});

Answer 1

var Video = $('#CaptureImage'); 是一个 jQuery 对象，不能直接传递给 drawImage。请改用 Video.get(0)。

使用 webRTC + canvas 通过 jQuery 捕获图像

Capture image with webRTC + canvas via jQuery

jquery

html5-canvas

webrtc