未来的IT工程师有两种 ,端工程师 ,云工程师
前情回顾
上篇文章大致总结了成为技术负责人需要的能力
。今天本来聊一下web端的拍照方案
方案。web端的拍照方案大致有以下两种,一是我们比较常见的图片上传的方案<input type="file" capture=camera/>
可以调起摄像头。另外一种就不太常见了,利用webrtc
的api方法navigator.mediaDevices.getUserMedia
。
具体思路
在界面上放置一个video
标签,同时在界面上渲染一个canvas
,然后点击按钮调起getUserMedia
方法获取媒体流信息,在video
标签中实时播放媒体流数据,同时点击拍照按钮时将video
标签中的画面绘制到canvas
中即可。
具体代码可能如下
- HTML标记
<div class="camera">
<video id="video">Video stream not available.</video>
<button id="startbutton">Take photo</button>
</div>
<canvas id="canvas" style="display:none;">
</canvas>
<div class="output">
<img id="photo" alt="The screen capture will appear in this box.">
</div>
- js代码
var width = 320; // We will scale the photo width to this
var height = 0; // This will be computed based on the input stream
var streaming = false;
var video = null;
var canvas = null;
var photo = null;
var startbutton = null;
function startup() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');
startbutton = document.getElementById('startbutton');
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(err) {
console.log("An error occurred: " err);
});
video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
startbutton.addEventListener('click', function(ev){
takepicture();
ev.preventDefault();
}, false);
clearphoto();
}
// Fill the photo with an indication that none has been
// captured.
function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
} else {
clearphoto();
}
}
总结
- 有很多jsApi我们在实际的工作中都没有用到过,但是有时候似乎又是需要了解的,所以还是要多思考一下问题的解决方案,不同的人的实现思路不一样,用了不同的API实现的方式也不一样。
还是要不断扩充自己的知识面
javascript基础知识总结