需要注意的问题：
sizeCanvas这个方法帮助解决的
chrome在获取屏幕的时候会缺失很多。
<!DOCTYPE html>
<html>
<head>
<title>screenshot</title>
<style>
.videostream, #cssfilters-stream, #screenshot {
width: 307px;
height: 250px;
}
.videostream, #cssfilters-stream {
background: rgba(255,255,255,0.5);
border: 1px solid #ccc;
}
#screenshot {
vertical-align: top;
}
.blur {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
.brightness {
-webkit-filter: brightness(5);
-moz-filter: brightness(5);
-o-filter: brightness(5);
-ms-filter: brightness(5);
filter: brightness(5);
}
.contrast {
-webkit-filter: contrast(8);
-moz-filter: contrast(8);
-o-filter: contrast(8);
-ms-filter: contrast(8);
filter: contrast(8);
}
.hue-rotate {
-webkit-filter: hue-rotate(90deg);
-moz-filter: hue-rotate(90deg);
-o-filter: hue-rotate(90deg);
-ms-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
.hue-rotate2 {
-webkit-filter: hue-rotate(180deg);
-moz-filter: hue-rotate(180deg);
-o-filter: hue-rotate(180deg);
-ms-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.hue-rotate3 {
-webkit-filter: hue-rotate(270deg);
-moz-filter: hue-rotate(270deg);
-o-filter: hue-rotate(270deg);
-ms-filter: hue-rotate(270deg);
filter: hue-rotate(270deg);
}
.saturate {
-webkit-filter: saturate(10);
-moz-filter: saturate(10);
-o-filter: saturate(10);
-ms-filter: saturate(10);
filter: saturate(10);
}
.grayscale {
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
filter: grayscale(1);
}
.sepia {
-webkit-filter: sepia(1);
-moz-filter: sepia(1);
-o-filter: sepia(1);
-ms-filter: sepia(1);
filter: sepia(1);
}
.invert {
-webkit-filter: invert(1);
-moz-filter: invert(1)
-o-filter: invert(1)
-ms-filter: invert(1)
filter: invert(1)
}
</style>
</head>
<body>
<video id="screenshot-stream" class="videostream" autoplay></video>
<img id="screenshot" src="">
<canvas id="screenshot-canvas" style="display:none;"></canvas>
<button id="screenshot-button">Capture</button> <button id="screenshot-stop-button">Stop</button>
<script type="text/javascript">
'use strict';
var video = document.querySelector('#screenshot-stream');
var button = document.querySelector('#screenshot-button');
var canvas = document.querySelector('#screenshot-canvas');
var img = document.querySelector('#screenshot');
var ctx = canvas.getContext('2d');
var localMediaStream = null;
function sizeCanvas() {
// video.onloadedmetadata not firing in Chrome so we have to hack.
// See crbug.com/110938.
setTimeout(function() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
img.height = video.videoHeight;
img.width = video.videoWidth;
}, 100);
}
function snapshot() {
ctx.drawImage(video, 0, 0);
img.src = canvas.toDataURL('image/webp');
}
var errorCallback = function(e) {
console.log('Reeeejected!', e);
};
button.addEventListener('click', function(e) {
if (localMediaStream) {
snapshot();
return;
}
if (navigator.getUserMedia) {
navigator.getUserMedia('video', function(stream) {
video.src = stream;
localMediaStream = stream;
sizeCanvas();
button.textContent = 'Take Shot';
}, errorCallback);
} else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
sizeCanvas();
button.textContent = 'Take Shot';
}, errorCallback);
} else {
errorCallback({target: video});
}
}, false);
video.addEventListener('click', snapshot, false);
document.querySelector('#screenshot-stop-button').addEventListener('click', function(e) {
video.pause();
localMediaStream.stop(); // Doesn't do anything in Chrome.
}, false);
</script>
</body>
</html>
参考官方：
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
分享到：
相关推荐
### WebRTC学习笔记_Demo收集 #### 一、WebRTC现状与历史背景 WebRTC（Web Real-Time Communication）是一项开放的、免费的技术框架，旨在使Web浏览器能够在无需插件的情况下进行实时音视频通信。该技术最初由...
WebRTC（Web Real-Time Communication）是一项核心技术，允许网页浏览器实现实时的音频、视频通信，无需用户安装额外的插件。这项技术源自谷歌对GlobalIP Solutions公司的收购，它包含了一系列的组件，旨在构建一个...
这篇“webrtc学习笔记一”主要关注的是视频流处理，是WebRTC技术中的核心部分。在深入讨论之前，先了解一下WebRTC的基本架构和组成部分。 1. **基础概念**： - **Peer Connection**: 是WebRTC的核心组件，负责...
在"WebRTC学习笔记01-最简单实现一对一视频通讯代码"中，我们将探讨WebRTC的基础知识以及如何通过简单的代码实现一对一视频通话。 首先，WebRTC的核心组件包括： 1. **RTCPeerConnection**：这是WebRTC中最关键的...
在本项目“WebRTC学习之三：录音和播放”中，我们将探讨如何利用C++来实现WebRTC的功能，特别是录音和播放操作，并结合Qt库创建用户界面。 1. WebRTC基础： WebRTC提供了包括音频、视频和数据共享在内的实时通信...
Webrtc源码开发笔记1 —Webrtc视频编码打包流程模块图解 梳理webrtc从transceiver到transport流程，从而宏观上了解webrtc视频采集，编码，打包发送等相关流程与相关模块的对应关系，为开发和快速定位问题提供参考。
使用WebRTC实现了最简单的语言聊天 详见博客：http://blog.csdn.net/caoshangpa/article/details/53889057
WebRTC 学习资源
webrtc 272489源码系列（27之3），内含depot_tools、vs2013工程文件。 自解压文件，需要下载此系列其他26个文件后解压。
WebRTC的屏幕截图 此屏幕共享扩展程序与Acquire实时聊天软件一起使用。进行此扩展的主要原因是为了提供额外的客户支持选项，以便无缝无缝地即时共享客户的屏幕，同时保留视频聊天，语音呼叫和文本聊天功能。客户需要...
webrtc_vs2015,已经成功编译。内含完整webrtc源码 第三部分
WebRTC三件套之一 WebRTCDemo-debug.apk； WebRTC三件套之二 OpenSlDemo-debug.apk； WebRTC三件套之三 AppRTCDemo-debug.apk； 基于ADT+NDK，包含JNI脚本，直接导入eclipse项目即运行。
webRTC的AEC实例，可直接运行，便于初学者学习了解webRTC。
WebRTC（Web Real-Time Communication）是一种开放的网络通信框架，允许网页浏览器进行实时通信，无需插件或额外软件。在本项目中，我们将探讨如何利用WebRTC-Streamer来实现直播功能，前端则采用Vue3技术栈。 ...
WebRTC（Web Real-Time Communication）是一种开放的网络标准，它允许在浏览器之间进行实时通信，无需插件或第三方软件。这个技术广泛应用于视频聊天、在线会议、直播播放等领域。在这个场景下，我们讨论的是一个...
WebRTC 是一个支持网络浏览器进行实时语音对话或视频对话的软件架构。...《Learning WebRTC 中文版》适合有一定HTML 和JavaScript 经验，希望了解WebRTC 并想学习实时通信工作原理的开发者参考阅读。
WebRTC（Web Real-Time Communication）是一项开放的技术标准，旨在实现浏览器之间的实时通信，无需借助插件或第三方软件。这份“中文版WebRTC教程”对于初学者或是希望深入了解WebRTC技术的人来说，无疑是一份宝贵...
WebRTC系统由三大部分组成：客户端堆栈、服务器信令以及数据传输。客户端堆栈包括采集模块（捕获音频和视频）、编码和解码模块、传输模块（如SRTP）以及渲染模块。信令服务器用于建立和管理连接，数据传输则负责音...