JS调用摄像头和桌面通知 #39

Wscats · 2018-05-30T02:58:10Z

摄像头

<video id="camera" autoplay> </video>
<script>
	navigator.mediaDevices.getUserMedia({
			video: true
		})
		.then(function(stream) {
			console.log(stream);
			document.getElementById('camera').src = URL.createObjectURL(stream);
		}).catch(function() {
			alert('could not connect stream');
		});
</script>

将视频绘制到canvas画布上

<video id="camera" autoplay> </video>
<canvas id="canvas"></canvas>
<script>
	var video = document.querySelector('video');
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	navigator.mediaDevices.getUserMedia({
			video: true
		})
		.then(function(stream) {
			console.log(stream);
			document.getElementById('camera').src = URL.createObjectURL(stream);
		}).catch(function() {
			alert('could not connect stream');
		});
	//将视频帧绘制到Canvas对象上,Canvas每60ms切换帧，形成肉眼视频效果
	function drawVideoAtCanvas(video, context) {
		window.setInterval(function() {
			context.drawImage(video, 0, 0, 90, 120);
		}, 60);
	}
	drawVideoAtCanvas(video, context);
</script>

桌面通知

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width">
		<title>HTML5 Web Notification基本效果演示</title>
		<style type="text/css">
			button {
				font-size: 100%;
				height: 2em;
			}
		</style>
	</head>
	<body>
		<p>
			<button id="button">点击出现提示</button>
		</p>
		<p id="result"></p>
		<script>
			if(window.Notification) {
				// 获得权限
				Notification.requestPermission();
				// 点击按钮
				document.querySelector('#button').addEventListener('click', function() {
					new Notification("Hi，帅哥：", {
						body: '可以加你为好友吗？',
						icon: 'https://avatars1.githubusercontent.com/u/17243165?s=460&v=4'
					});
				});
			} else {
				document.getElementById('result').innerHTML = '浏览器不支持Web Notification';
			}
		</script>
	</body>
</html>

直播配合canvas

首先利用navigator.mediaDevices.getUserMedia获取视频源
利用定时器window.setInterval，逐帧将context.drawImage(video, 0, 0, 640, 480)视频源绘制在canvas上
再利用canvas.toDataURL('image/png')将canvas生成的图片配合drawImgAtCanvas再绘制到第二个canvas上

var video = document.querySelector('video');
var canvas = document.querySelectorAll('canvas')[0];

var canvas2 = document.querySelectorAll('canvas')[1];
var context = canvas.getContext('2d');
var context2 = canvas2.getContext('2d');
// console.log(canvas, canvas2)
navigator.mediaDevices.getUserMedia({
    video: true
})
    .then(function (stream) {
        console.log(stream);
        // video.src = URL.createObjectURL(stream);
        video.srcObject = stream;
    })
    .catch(function () {
        alert('could not connect stream');
    });
//将视频帧绘制到Canvas对象上,Canvas每60ms切换帧，形成肉眼视频效果
// video转canvas
function drawVideoAtCanvas(video, context) {
    window.setInterval(function () {
        context.drawImage(video, 0, 0, 640, 480);
        // canvas转为img的地址data:base64
        var dataurl = canvas.toDataURL('image/png');
        drawImgAtCanvas(dataurl);
        console.log(dataurl);
    }, 60);
}
drawVideoAtCanvas(video, context);

// img转canvas
function drawImgAtCanvas(dataurl) {
    let img = new Image();
    img.onload = function () {
        context2.drawImage(img, 0, 0, 640, 480);
    };
    img.src = dataurl;
}

The text was updated successfully, but these errors were encountered:

Wscats changed the title ~~JS调用摄像头~~ JS调用摄像头和桌面通知 Jun 6, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JS调用摄像头和桌面通知 #39

JS调用摄像头和桌面通知 #39

Wscats commented May 30, 2018 •

edited

Loading

JS调用摄像头和桌面通知 #39

JS调用摄像头和桌面通知 #39

Comments

Wscats commented May 30, 2018 • edited Loading

摄像头

桌面通知

直播配合canvas

Wscats commented May 30, 2018 •

edited

Loading