webrtc学习笔记三（截屏快照）

最新推荐文章于 2024-05-07 03:47:21 发布

linux内核控

最新推荐文章于 2024-05-07 03:47:21 发布

阅读量1.3k

点赞数

分类专栏： webrtc 文章标签： webrtc

本文链接：https://blog.csdn.net/leafrenchleaf/article/details/84743121

版权

webrtc 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

需要注意的问题：
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>

参考官方：
[url]http://www.html5rocks.com/en/tutorials/getusermedia/intro/[/url]

linux内核控

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webrtc学习笔记三（截屏快照）

需要注意的问题：sizeCanvas这个方法帮助解决的chrome在获取屏幕的时候会缺失很多。[code="java"]screenshot.videostream, #cssfilters-stream, #screenshot { width: 307px; height: 250px;}.videostream, #cssfilte...
复制链接

扫一扫

专栏目录