WebRTC–getUserMedia & Canvas
下面是一个使用getUserMedia接口和Canvas的drawImage方法实现的截图功能(截取视频中的一帧)。
基本思路是这样子的:
- getUserMedia获取一个MediaStream, stream
- stream作为video的输入源
- 提供一个button按钮。当用户点击时,使用canvas的drawImage方法绘制video的一帧数据
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的更多相关文章
- webRTC结合canvas截图
直接看代码.css基础弱鸡,将就看吧.慢慢学习 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- WebRTC互联网实时通信
muaz-khan/WebRTC-Experiment WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!! Updated ...
- 【特别推荐】Web 开发人员必备的经典 HTML5 教程
对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西.唯一的问题是,你需要跟上这个领域的发展脚步,因此,你必须不断的学习,不断的前进.本文将分享能够帮助您快速掌 ...
- qrcode render 二维码扫描读取
著名的 qrcode 是 zxing https://github.com/zxing/zxing 基于 java, java 真的是轮子多啊... zxing 的 javascript 版本是 ht ...
- 课堂管理系统;在线教辅平台;java课设
# 白泽智慧教辅平台 **说明:** 运行时需要修改位置: bzedu\src\main\resources\application.properties bzedu\src\main\resourc ...
- WebRTC开发基础(WebRTC入门系列1:getUserMedia)
什么是WebRTC WebRTC由IETF(Internet Engineering Task Force——互联网工程任务组)和W3C(World Wide Web Consortium——万维网联 ...
- Safari支不支持HTML5录音? 现在浏览器中最好的解决方案是WebRTC下的 navigator.getUserMedia API。
先放结论:Safari支不支持HTML5录音? ——据我调查,不支持. 现在浏览器中最好的解决方案是WebRTC下的 navigator.getUserMedia API. 可是当使用Can I us ...
- WebRTC从摄像头获取图片传入canvas
WebRTC从摄像头获取图片传入canvas 前面我们已经能够利用WebRTC的功能,通过浏览器打开摄像头,并把预览的图像显示在video元素中. 接下来我们尝试从视频中截取某一帧,显示在界面上. h ...
- WebRTC Demo - getUserMedia()
WebRTC介绍 WebRTC提供三类API: MediaStream,即getUserMedia RTCPeerConnection RTCDataChannel getUserMedia已经由Ch ...
随机推荐
- hive原生和复合类型的数据载入和使用
原生类型 原生类型包含TINYINT,SMALLINT,INT,BIGINT,BOOLEAN,FLOAT,DOUBLE,STRING,BINARY (Hive 0.8.0以上才可用),TIMESTAM ...
- Android杂谈--ListView之BaseAdapter的使用
话说开发用了各种Adapter之后感觉用的最舒服的还是BaseAdapter,尽管使用起来比其他适配器有些麻烦,但是使用它却能实现很多自己喜欢的列表布局,比如ListView.GridView.Gal ...
- XML方式实现Spring声明式事务管理
1.首先编写一个实体类 public class Dept { private int deptId; private String deptName; public int getDeptId() ...
- Problem A: Artificial Intelligence?
Description Physics teachers in high school often think that problems given as text are more demandi ...
- 求新的集合 A=AUB(顺序表)
#include<stdio.h> typedef int A; const int LIST_INIT_SIZE=100; const int LISTINCREMENT=10; typ ...
- 利用python进行数据分析之pandas库的应用(一)
一.pandas的数据结构介绍 Series Series是由一种类似于一维数组的对象,它由一组数据以及一组与之相关的数据索引构成.仅由一组数据可产生最简单的Series. obj=Series([4 ...
- fork出的子进程和父进程的继承关系【转载】
[原文地址]http://blog.163.com/dengjingniurou@126/blog/static/53989196200962924412524/ fork出的子进程和父进程的继承关系 ...
- C单链表实现
/* * LinkNode.c * * Created on: Jan 14, 2014 * Author: root */ #include <stdlib.h> #include &l ...
- (C#)Windows Shell 编程系列3 - 上下文菜单(iContextMenu)(一)右键菜单
原文 (C#)Windows Shell 编程系列3 - 上下文菜单(iContextMenu)(一)右键菜单 接上一节:(C#)Windows Shell 编程系列2 - 解释,从“桌面”开始展开这 ...
- perl5 第一章 概述
第一章 概述 by flamephoenix 一.Perl是什么?二.Perl在哪里?三.运行四.注释 一.Perl是什么? Perl是Practical Extraction and Re ...