WebRTC–getUserMedia & Canvas

下面是一个使用getUserMedia接口和Canvas的drawImage方法实现的截图功能（截取视频中的一帧）。

基本思路是这样子的：

1. getUserMedia获取一个MediaStream, stream
2. stream作为video的输入源
3. 提供一个button按钮。当用户点击时，使用canvas的drawImage方法绘制video的一帧数据

源代码位于gitlab上

index.html代码

  
WebRTC Demo getUserMedia to canvas - 拍照

  
  拍照
  

  
使用canvas元素的drawImage()方法绘制video元素的一帧数据。

  
canvas, video and stream三个变量是全局的，用户可以从console中查看。

  查看源代码-gitlab.baidu.com
  

  

main.js代码

// 全局变量
button = document.querySelector("button");
video = document.querySelector("video");
canvas = document.querySelector("canvas");

canvas.width = 480;
canvas.height = 360;

// 点击事件处理
// 在canvas上画一帧画像
button.onclick = function(){
  canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
}

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

var constraints = {audio: false, video: true};
var video = document.querySelector("video");

function successCallback(stream){
  window.stream = stream; // stream available to console
  if (window.URL) {
    video.src = window.URL.createObjectURL(stream);
  } else {
    video.src = stream;
  }
}

function errorCallback(error){
  console.log("navigator.getUserMedia error: ", error);
}

navigator.getUserMedia(constraints, successCallback, errorCallback);

drawImage方法定义如下：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

img - 规定要使用的图像、画布或视频

sx - 开始剪切的x位置

sy - 开始剪切的y位置

swidth - 被剪切的宽度

sheight - 被剪切的高度

转载于:https://www.cnblogs.com/lotushy/p/3964353.html