subscribeImageCapture

Subscribe Image Capture

This example demonstrates capturing a still of the playback by using the drawImage API of CanvasRenderingContext2D.

Please refer to the Basic Subscriber Documentation to learn more about the basic setup.

Example Code

• index.html
• index.js

Running the Example

Click on the video playback to generate a still image of the video and display it below the video preview.

Using drawImage

function clearCanvas(targetElement, canvasElement) {
  var context = canvasElement.getContext('2d')
  context.fillStyle = '#a1a1a1'
  context.fillRect(0, 0, targetElement.offsetWidth, targetElement.offsetHeight)
}

function drawOnCanvas(targetElement, canvasElement) {
  var context = canvasElement.getContext('2d')
  canvasElement.width = targetElement.offsetWidth
  canvasElement.height = targetElement.offsetHeight
  context.drawImage(
    targetElement,
    0,
    0,
    targetElement.offsetWidth,
    targetElement.offsetHeight
  )
}

captureTarget.addEventListener('click', function () {
  clearCanvas(videoElement, canvasElement)
  drawOnCanvas(videoElement, canvasElement)
})

More information: CanvasRenderingContext2D.drawImage from MDN