node-tutorial
node-tutorial copied to clipboard
Wscats
JS调用摄像头和桌面通知
摄像头
<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;
}
