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

基本思路是这样子的：

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

源代码位于gitlab上

index.html代码

<!DOCTYPE html>

<html>

<head>

<meta name="keywords" content="WebRTC, HTML5, JavaScript" />

<meta name="description" content="WebRTC Demo." />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="chrome=1" />

<base target="_blank">

<title>getUserMedia to canvas - Snapshot</title>

<link rel="stylesheet" href="../css/main.css" />

</head>

<body>

<div id="container">

  <h1><a href="#" title="WebRTC Demo homepage">WebRTC Demo</a> <span>getUserMedia to canvas - 拍照</span></h1>

  <video autoplay></video>

  <button>拍照</button>

  <canvas></canvas>

  <p>使用canvas元素的<code>drawImage()</code>方法绘制video元素的一帧数据。</p>

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

  <a href="#" title="在gitlab上查看源代码" id="viewSource">查看源代码-gitlab.baidu.com</a>

  </div>

  <script src="js/main.js"></script>

</body>

</html>

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 - 被剪切的高度

WebRTC–getUserMedia & Canvas的更多相关文章

  1. webRTC结合canvas截图

    直接看代码.css基础弱鸡,将就看吧.慢慢学习 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  2. WebRTC互联网实时通信

    muaz-khan/WebRTC-Experiment WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!! Updated ...

  3. 【特别推荐】Web 开发人员必备的经典 HTML5 教程

    对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西.唯一的问题是,你需要跟上这个领域的发展脚步,因此,你必须不断的学习,不断的前进.本文将分享能够帮助您快速掌 ...

  4. qrcode render 二维码扫描读取

    著名的 qrcode 是 zxing https://github.com/zxing/zxing 基于 java, java 真的是轮子多啊... zxing 的 javascript 版本是 ht ...

  5. 课堂管理系统；在线教辅平台；java课设

    # 白泽智慧教辅平台 **说明:** 运行时需要修改位置: bzedu\src\main\resources\application.properties bzedu\src\main\resourc ...

  6. WebRTC开发基础（WebRTC入门系列1：getUserMedia）

    什么是WebRTC WebRTC由IETF(Internet Engineering Task Force——互联网工程任务组)和W3C(World Wide Web Consortium——万维网联 ...

  7. Safari支不支持HTML5录音？ 现在浏览器中最好的解决方案是WebRTC下的 navigator.getUserMedia API。

    先放结论:Safari支不支持HTML5录音? ——据我调查,不支持. 现在浏览器中最好的解决方案是WebRTC下的 navigator.getUserMedia API. 可是当使用Can I us ...

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

    WebRTC从摄像头获取图片传入canvas 前面我们已经能够利用WebRTC的功能,通过浏览器打开摄像头,并把预览的图像显示在video元素中. 接下来我们尝试从视频中截取某一帧,显示在界面上. h ...

  9. WebRTC Demo - getUserMedia()

    WebRTC介绍 WebRTC提供三类API: MediaStream,即getUserMedia RTCPeerConnection RTCDataChannel getUserMedia已经由Ch ...

随机推荐

  1. 关于oracle spfile配置文件问题

    $ORACLE_SID决定spfile dbs 默认 在启动Oracle数据库时报错,如下: [oracle@localhost ~]$ sqlplus / as sysdba SQL*Plus: R ...

  2. 如何注册成为uber司机 快速成为优步司机网上注册流程攻略 2015最新

    [目前开通Uber的城市]:北京.上海.天津.广州.成都.深圳.杭州.重庆.武汉.青岛.南京.苏州.长沙.宁波.西安.佛山等.济南,烟台和厦门正在秘密的招第一批司机. [车辆要求]:要求裸车价8万以上 ...

  3. Candy----HDU4465----数学题

    题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=4465 题目意思: 有两个箱子,每个箱子装有N个糖果 打开第一个箱子的概率是P,另外一个就是1-P 当小 ...

  4. sql语句开发使用---update

    单表的更新大家都用过了,现在说下实际开发过程中,需要多表的查询更新状态,或者跨数据库的更新状态. 东西需要学习了才会懂得,所以站在巨人的肩膀看的更远. sql 语法; UPDATE 表名称 SET 列 ...

  5. c 转置字符串You are a so cheap man ->man cheap so a are You

    解题思路: 1.将字符串转置 2.对转置后的字符串中单词转置 #include<stdio.h> #include<string.h> #include<stdlib.h ...

  6. 使用coding.net来托管源码(可以免费存放私有项目的哦)(转载)

    coding.net是国内新兴的一个项目管理平台,功能主要包括:代码托管.在线运行环境.监控代码质量,兼有一定的社交功能.在线运行环境支持Java.Ruby.Node.js.PHP.Python.Go ...

  7. input输入框只能输入数字的功能

    Html代码 收藏代码 <input type="text" style="ime-mode:disabled;" onpaste="retur ...

  8. C++中引用

    在C语言中&这个符号表示了取地址符,但是在C++中它却有着不同的用途,掌握C++的&符号,是提高代码执行效率和增强代码质量的一个很好的办法.一.引用简介 引用就是某一变量(目标)的一个 ...

  9. (转)Windows重启延迟删除,重命名技术原理

    所谓重启延迟删除技术,就是在操作系统启动前删除或者替换文件! 说起重启延迟删除,大家可能都很陌生,但是实际上,该功能已经被各种软件所采用:如安装Windows 补丁程序(如:HotFix.Servic ...

  10. 获取json格式字符串的简单方法

    有的时候需要找一些Json格式的字符串,可以打开任意一个网页进入到调试模式,然后看network相关的访问信息,就可以获取到. 比如: 在记笔记的时候,点击保存后,会发出一些请求,然后有相应的相应,任 ...