webrtc学习笔记三（截屏快照）
程序员文章站
2022-07-08 16:44:27
...
需要注意的问题：
sizeCanvas这个方法帮助解决的
chrome在获取屏幕的时候会缺失很多。
参考官方：
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
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/