webRTC结合canvas截图
直接看代码。css基础弱鸡，将就看吧。慢慢学习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<style type="text/css">
body{
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
}
a{
color: black;
}
canvas{
background: gray;
}
button{
background: red;
}
</style>
</head>
<body>
<div id='container'>
<h1><a href="39.106.209.45/VideoTalk/webRTCCavans">getUserMedia with Canvas</a></h1>
<video autoplay="true"></video>
<button>Take snapshot</button>
<canvas></canvas>
<p>Draw a frame from the video onto the canvas element using the <code>drawImage()</code></p>
</div>
<script type="text/javascript" src=".//js//main.js"></script>
</body>
</html>
index.html
var video=document.querySelector('video');
var canvas=window.canvas=document.querySelector('canvas');
canvas.width=480;
canvas.height=360;
var button =document.querySelector('button');
button.onclick=function(){
canvas.width=video.videoWidth;
canvas.height=video.videoHeight;
canvas.getContext('2d').drawImage(video,0,0,canvas.width,canvas.height);
};
var constraints={
audio:false,
video:true
};
function handleSuccess(stream){
window.stream=stream;
video.srcObject=stream;
}
function handleError(error){
console.log('navigator.getUserMedia error: ',error);
}
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
main.js
通过canvas的darwImage方法，把video正在播放的视频进行截图。
webRTC结合canvas截图的更多相关文章
- 使用canvas截图或者改变灰度
简述 html5新添加的canvas API可以让我们对画布进行开发应用,典型的是可以使用canvas截图或者 手工绘制“迷你图”(即嵌入在文本中的高清小图片). 实现截图的方法很简单,就是创建一个c ...
- WebRTC–getUserMedia & Canvas
下面是一个使用getUserMedia接口和Canvas的drawImage方法实现的截图功能(截取视频中的一帧). 基本思路是这样子的: getUserMedia获取一个MediaStream, s ...
- 小程序canvas截图组件
最近做一个小程序的过程中,需要用到截图功能,网上搜了一下,发现没有符合要求的,就自己搞了个组件,方便复用. 目前功能很简单,传入宽高和图片路径即可,宽高是为了计算截图的比例,只支持缩放和移动. 实现思 ...
- 使用canvas截图网页为图片并解决跨域空白以及模糊问题
前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地. 首先对于网页截图,我用的是canvas实现,获取你需要截图的模块的div,从而使用canvas对你需要的模块进行截图. ...
- Wx-小程序-使用canvas截图保存
1. wxml 页面 使用画布来站位,并给按钮添加绑定事件 <button class='btn btn-theme' bindtap='setSaveImage'>保存图片到本地< ...
- 利用canvas将网页元素生成图片并保存在本地
利用canvas将网页元素生成图片并保存在本地 首先引入三个文件: 1.<script type="text/javascript" src="js/html2ca ...
- 使用canvas保存网页为pdf文件支持跨域
前言 之前上一篇随笔说了Canvas截图网页为图片,下来个新需求,把网页截图后保存为PDF文件供用户下载. 前文 Canvas截图网页为图片:https://www.cnblogs.com/bubub ...
- 带你从0到1实现canvas的undo和redo功能
不知不觉又到了周末,又到了Fly写文章的日子,今天给大家介绍下一个web中很常见的功能, 就是撤销和复原这样一个功能,对于任何一个画图软件,或者是建模软件.没有撤销和复原.这不是傻了对啊吧,所以本篇文 ...
- 用js实现web端录屏
用js实现web端录屏 原创2021-11-14 09:30·无意义的路过 随着互联网技术飞速发展,网页录屏技术已趋于成熟.例如可将录屏技术运用到在线考试中,实现远程监考.屏幕共享以及录屏等:而在我们 ...
随机推荐
- python之函数用法id(),了解即可
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法id(),了解即可 #http://www.cnblogs.com/hongfei/p ...
- Centos 7 minimal install 后的基础配置
Centos 7 基础设置: 修改默认语言: 不再是修改 /etc/sysconfig/i18n, 而是要修改 /etc/locale.conf, 以及 /etc/yum/pluginconf.d/l ...
- 执行Android项目时指定特定的AVD进行測试
一个Androidproject空间能够创建一个或多个AVD来对指定的Android项目进行測试,假设仅仅创建了一个AVD则执行Android项目时自然启动该AVD,但是假设创建了多个AVD那么我们该 ...
- no !/ in spec
问题: 在学习hibernate的过程中涉及到hibernate.cfg.xml和hibernate.hbm.xml配置文件的编写,写完之后配置文件出现黄色感叹号,鼠标悬停在感叹号上时显示no !/ ...
- Chrome浏览器桌面通知提示设置
版本 24.0.1312.56 m 老版本23.* 桌面通知,也可以由用户在Chrome浏览器中自定义:板手 -> 选项 -> 高级选项 –> 通知 (管理例外情况…).
- Total Commander：文件管理工具，共享软件
http://xbeta.info/tc/ Total Commander V8.0:文件管理工具,共享软件,适用于Windows® 95/98/ME/NT/2000/XP/Vista/7 和 Win ...
- VI打开和编辑多个文件的命令
http://www.05112.org/school/xtrm/linux/2013/0625/4280.htmlVI打开和编辑多个文件的命令 可分两种情况: 1.在同一窗口中打开多个文件: v ...
- 史上最简单的ButterKnife配置教程
网上的教程感觉都是抄来抄去,没一个靠谱的 还是自己丰衣足食搞一个ButterKnife配置教程吧.. 我的Android Studio版本是3.3. 1.dependencies中添加依赖 imple ...
- RabbitMQ与.net core(五) topic类型 与 headers类型 的Exchange
1.topic类型的Exchange 我们之前说过Topic类型的Exchange是direct类型的模糊查询模式,可以通过routkey来实现模糊消费message,topic的模糊匹配有两种模式: ...
- JMeter学习笔记--详解JMeter配置元件
JMeter配置元件可以用来初始化默认值和变量,以便后续采样器使用.将在其作用域的初始化阶段处理. CSV Data Set Config:被用来从文件中读取数据,并将它们拆分后存储到变量中,适合处理 ...