直接看代码。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截图的更多相关文章

  1. 使用canvas截图或者改变灰度

    简述 html5新添加的canvas API可以让我们对画布进行开发应用,典型的是可以使用canvas截图或者 手工绘制“迷你图”(即嵌入在文本中的高清小图片). 实现截图的方法很简单,就是创建一个c ...

  2. WebRTC–getUserMedia & Canvas

    下面是一个使用getUserMedia接口和Canvas的drawImage方法实现的截图功能(截取视频中的一帧). 基本思路是这样子的: getUserMedia获取一个MediaStream, s ...

  3. 小程序canvas截图组件

    最近做一个小程序的过程中,需要用到截图功能,网上搜了一下,发现没有符合要求的,就自己搞了个组件,方便复用. 目前功能很简单,传入宽高和图片路径即可,宽高是为了计算截图的比例,只支持缩放和移动. 实现思 ...

  4. 使用canvas截图网页为图片并解决跨域空白以及模糊问题

    前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地. 首先对于网页截图,我用的是canvas实现,获取你需要截图的模块的div,从而使用canvas对你需要的模块进行截图. ...

  5. Wx-小程序-使用canvas截图保存

    1. wxml 页面 使用画布来站位,并给按钮添加绑定事件 <button class='btn btn-theme' bindtap='setSaveImage'>保存图片到本地< ...

  6. 利用canvas将网页元素生成图片并保存在本地

    利用canvas将网页元素生成图片并保存在本地 首先引入三个文件: 1.<script type="text/javascript" src="js/html2ca ...

  7. 使用canvas保存网页为pdf文件支持跨域

    前言 之前上一篇随笔说了Canvas截图网页为图片,下来个新需求,把网页截图后保存为PDF文件供用户下载. 前文 Canvas截图网页为图片:https://www.cnblogs.com/bubub ...

  8. 带你从0到1实现canvas的undo和redo功能

    不知不觉又到了周末,又到了Fly写文章的日子,今天给大家介绍下一个web中很常见的功能, 就是撤销和复原这样一个功能,对于任何一个画图软件,或者是建模软件.没有撤销和复原.这不是傻了对啊吧,所以本篇文 ...

  9. 用js实现web端录屏

    用js实现web端录屏 原创2021-11-14 09:30·无意义的路过 随着互联网技术飞速发展,网页录屏技术已趋于成熟.例如可将录屏技术运用到在线考试中,实现远程监考.屏幕共享以及录屏等:而在我们 ...

随机推荐

  1. SettingsTortoiseSVN

      迁移时间:2017年5月20日11:16:05CreateTime--2016年9月18日18:20:15Author:Marydon在windows下安装SVN软件 说明:64位的系统只能安装6 ...

  2. 各种HTTPS站点的SSL证书 ,扩展SSL证书,密钥交换和身份验证机制汇总

    各种HTTPS站点的SSL证书 ,扩展SSL证书,密钥交换和身份验证机制汇总 一份常见的 HTTPS 站点使用的证书和数据加密技术列表,便于需要时比较参考,将持续加入新的 HTTP 站点,这里给出的信 ...

  3. web.xml文件头出错

    原先将web.xml文件头设置为如下格式 <?xml version="1.0" encoding="UTF-8"?><web-app ver ...

  4. 浅析iOS tableview的selectRowAtIndexPath选中无效（默认选中cell无效）

    可能很多人都遇到过这种情况: tableview列表,有时加载完,需要默认选中某一行,给予选中效果:或者需要执行某行的点击事件. 我们举例: 比如我想默认选中第一行 可能我们第一个想法就是这样: [m ...

  5. message 弹出窗口

    import  javax.swing.JOptionPane;public class gong {    public static void main(String [] args){      ...

  6. 细说 ASP.NET控制HTTP缓存[转]

    阅读目录 开始 正常的HTTP请求过程 缓存页的请求过程 缓存页的服务端编程 什么是304应答? 如何编程实现304应答 如何避开HTTP缓存 在上篇博客[细说 ASP.NET Cache 及其高级用 ...

  7. Quartz2之入门示例

    环境:XP+Myeclipse6.5+JDK1.6 quartz官网:http://www.quartz-scheduler.org/ 参考资料 1 Quartz任务调度快速入门 http://www ...

  8. Winform下让你的DataGridView控件支持点语法(即显示list中的子对象属性)

    前言: 不想看前言的直接去看正文吧!另外文末有彩蛋. DataGridView可以支持多种数据源格式,比如DataTable和List. DataTable没啥特殊的,本身就是一张二维的表,可以和Da ...

  9. 开源 java CMS - FreeCMS2.2 单位管理

    项目地址:http://www.freeteam.cn/ 单位管理 FreeCMS支持多单位同一时候使用,并支持无限树级管理. 1. 加入根单位 从左側管理菜单点击单位管理进入. 点击"加入 ...

  10. GO1.6语言学习笔记1-基础篇

    一.GO语言优势   可直接编译成机器码,Go编译生成的是一个静态可执行文件,除了glibc外没有其他外部依赖 静态类型语言,但是有动态语言的感觉 语言层面支持并发.Goroutine和channel ...