欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webrtc学习笔记三(截屏快照)

程序员文章站 2022-07-08 16:44:27
...
需要注意的问题:
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