WebRTC从摄像头获取图片传入canvas

前面我们已经能够利用WebRTC的功能,通过浏览器打开摄像头,并把预览的图像显示在video元素中。

接下来我们尝试从视频中截取某一帧,显示在界面上。

html

先准备一下界面,摆上控件。下面是关键部分的代码。

<video playsinline autoplay></video>
<button id="showVideo">打开摄像头</button>
<button id="takeSnapshot">截取</button>
<button id="clearList">清除记录</button>
<canvas id="mainCanvas"></canvas>
<div id="list" style="display: grid; grid-template-columns: repeat(auto-fill, 100px);
column-gap: 20px; row-gap: 20px;"></div>
  • video 用来预览视频
  • 3个button,分别拿来打开摄像头,截取图片和清除记录
  • canvas 用来显示截取的图片
  • 下面的div是拿来存放多个截取图片记录的。给它指定了grid,显示多个图片时候比较好看一些

照例,需要引入adapter-latest.js

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

js

准备实现功能。

打开摄像头并预览

和之前的打开摄像头类似,还是要用到getUserMedia方法。拿到视频流后交给video去播放。

const video = document.querySelector('video');
const constraints = {
audio: false,
video: true
};
// .... function openCamera(e) {
navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(onError);
} function gotStream(stream) {
window.stream = stream;
video.srcObject = stream;
} function onError(error) {
console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
}

截取图片

拿到界面中的canvas,先预定一个尺寸(不预定也行)。

const mCanvas = window.canvas = document.querySelector('#mainCanvas');
mCanvas.width = 480;
mCanvas.height = 360; // 开始截取
mCanvas.width = video.videoWidth;
mCanvas.height = video.videoHeight;
mCanvas.getContext('2d').drawImage(video, 0, 0, mCanvas.width, mCanvas.height);

发起截取后,使用getContext获取到CanvasRenderingContext2D对象。然后调用它的drawImage方法。

把video中的视频帧绘制进去。

除了绘制这一个canvas,我们可以在每次发起(点击按钮)的时候创建新的canvas,把它们像相册一样展示出来。

const list = document.querySelector('#list'); // 拿来存放多个元素

  // 新增1张
var divItem = document.createElement("div");
divItem.style.display = "block";
divItem.width = 100;
divItem.height = divItem.width * video.videoHeight / video.videoWidth; // 计算一下比例
divItem.style.width = divItem.width + "px";
divItem.style.height = divItem.height + "px";
console.log("div item size: ", divItem.width, divItem.height); var c1 = document.createElement("canvas");
c1.width = divItem.width;
c1.height = divItem.height;
c1.getContext('2d').drawImage(video, 0, 0, mCanvas.width, mCanvas.height, 0, 0, c1.width, c1.height); divItem.appendChild(c1);
list.appendChild(divItem);

子项的存放方式是div包裹canvas。先用document.createElement("div")创建divItem

按照视频的宽高,计算调整divItem的大小,并设置style。

document.createElement("canvas")创建c1,它的宽高设置为前面divItem的宽高。然后把图片绘制进去。

drawImage时,前面传入的是视频(源)的范围,后面的4个参数是自己的绘制范围。

这样一个子项就生成完毕了。添加到我们准备好的列表(div)中。

清除记录

清除div(list)里的子项。用一个循环获取并移除子项。

var child = list.lastElementChild;
while (child) {
list.removeChild(child);
child = list.lastElementChild;
}

小结

打开摄像头,显示视频。把视频绘制到canvas上。创建多个canvas,做成历史记录的效果。

主要利用的还是canvas的绘制方法。绘制的时候注意传入的参数,能够指定绘制的边界。

也就是说只绘制视频大小中的一部分也是可行的。

示例中用到的关键方法

  • getUserMedia
  • getContext
  • drawImage
  • createElement

预览

简易的预览链接

WebRTC从摄像头获取图片传入canvas的更多相关文章

  1. 利用opencv从USB摄像头获取图片

    由于opencv自带的VideoCapture函数直接从usb摄像头获取视频数据,所以用这个来作为实时的图像来源用于实体检测识别是很方便的. 1. 安装opencv 安装的步骤可以按照之前这个文章操作 ...

  2. ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结

    相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直 ...

  3. ios中摄像头/相册获取图片压缩图片上传服务器方法总结

    本文章介绍了关于ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结,有需要了解的同学可以参考一下下.     这几天在搞iphone上面一个应用的开发,里面有需要摄像头/相册编程和图片上传的问 ...

  4. js canvas获取图片base64 dataUrl

    function getImgBase64(path, callback) { var img = new Image(); img.src = path; //图片加载完成后触发 img.onloa ...

  5. iOS 使用AFN 进行单图和多图上传 摄像头/相册获取图片,压缩图片

    图片上传时必要将图片进行压缩,不然会上传失败 首先是同系统相册选择图片和视频.iOS系统自带有UIImagePickerController,可以选择或拍摄图片视频,但是最大的问题是只支持单选,由于项 ...

  6. 识别快递单号(2) - 加载图片到canvas

    传送门: 识别快递单号(1) - 图像处理   转载请注明出处: http://www.cnblogs.com/zaiyuzhong/p/load-image-to-canvas.html 上篇说到我 ...

  7. 教你做炫酷的碎片式图片切换 (canvas)

    前言 老规矩,先上 DEMO 和 源码.图片区域是可以点击的,动画会从点击的位置开始发生. 本来这个效果是我3年前做的,只是当是是用无数个 div 标签完成的,性能比较成问题,在移动端完全跑不动.最近 ...

  8. 图片在 canvas 中的 选中/平移/缩放/旋转,包含了所有canvas的2D变化,让你认识到数学的重要性

    1.介绍 canvas 已经出来好久了,相信大家多少都有接触. 如果你是前端页面开发/移动开发,那么你肯定会有做过图片上传处理,图片优化,以及图片合成,这些都是可以用 canvas 实现的. 如果你是 ...

  9. JavaScript获取图片的原始尺寸

    页面里的img元素,想要获取它的原始尺寸,以宽度为例可能首先想到的就是width,如下 <img src="http://img11.360buyimg.com/da/g14/M07/ ...

随机推荐

  1. javascriptRemke之原型的重要性

    前言:JavaScript的原型对象一直是新人学习js的一大重大阻碍,但是原型的知识往往又是面试中常常会被深挖的一个点,为什么会这样呢?本文带你揭秘JavaScript原型的重要性,了解重要性之后再进 ...

  2. 洛谷3703 SDOI2017树点涂色(LCT+线段树+dfs序)

    又一道好题啊qwqqqq 一开始看这个题,还以为是一个树剖的什么毒瘤题目 (不过的确貌似可以用树剖啊) qwq这真是一道\(LCT\)维护颜色的好题 首先,我们来一个一个操作的考虑. 对于操作\(1\ ...

  3. Spring Security OAuth2 微服务认证中心自定义授权模式扩展以及常见登录认证场景下的应用实战

    一. 前言 [APP 移动端]Spring Security OAuth2 手机短信验证码模式 [微信小程序]Spring Security OAuth2 微信授权模式 [管理系统]Spring Se ...

  4. 脚本注入1(boolean&&get)

    现在,我们回到之前,练习脚本支持的布尔盲注(get型). 布尔盲注的应用场景是查询成功和失败时回显不同,且存在注入点的地方. 这里以Less-8为例: 发现查询成功时,会显示:失败则无回显. 同时发现 ...

  5. tomcat内存马原理解析及实现

    内存马 简介 ​ Webshell内存马,是在内存中写入恶意后门和木马并执行,达到远程控制Web服务器的一类内存马,其瞄准了企业的对外窗口:网站.应用.但传统的Webshell都是基于文件类型的,黑客 ...

  6. SpringBoot 整合 Thymeleaf & 如何使用后台模板快速搭建项目

    如果你和我一样,是一名 Java 道路上的编程男孩,其实我不太建议你花时间学 Thymeleaf,当然他的思想还是值得借鉴的.但是他的本质在我看来就是 Jsp 技术的翻版(Jsp 现在用的真的很少很少 ...

  7. MySQL:怒刷牛客网“sql实战”

    MySQL:怒刷牛客网"sql实战" 在对MySQL有一定了解后,抽空刷了一下 牛客网上的 数据库SQL 实战,在此做一点小小的记录 SQL1 查找最晚入职员工的所有信息 sele ...

  8. 解决git clone慢问题

    解决git clone慢 关于Git克隆或是上传代码龟速的问题真是让人很恼火,这里对于网上的两种解决方案进行摘录. 利用码云克隆github项目 亲测有效 进入码云,新建一个仓库: 在创建的最后选择导 ...

  9. Idea Maven auto Import

  10. [CSP-S 2021] 回文

    题目描述: 给定正整数 n 和整数序列 a1, a2,-,a2n,在这 2n 个数中,1, 2,-,n 分别各出现恰好 2 次.现在进行 2n 次操作,目标是创建一个长度同样为 2n 的序列 b 1, ...