JS打开摄像头并截图上传示例
直入正题，JS打开摄像头并截图上传至后端的一个完整步骤
1. 打开摄像头主要用到getUserMedia方法，然后将获取到的媒体流置入video标签
2. 截取图片主要用到canvas绘图，使用drawImage方法将video的内容绘至canvas中
3. 将截取的内容上传至服务器，将canvas中的内容转为base64格式上传，后端（PHP）通过file_put_contents将其转为图片
要注意的是，在chrome以外的浏览器中，使用摄像头或多或少会出现一些问题，可能也是老问题了，所以以下代码主要基于chrome使用
比如在最新版FireFox中的报错，不知为啥
1. 打开摄像头
getUserMedia 有新版本和旧版本两种，建议使用新版本
旧版本位于navigator 对象下，根据浏览器不同有所不同
// 获取媒体方法（旧方法） navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia;
if (navigator.getMedia) {
navigator.getMedia({
video: true
}, function(stream) {
mediaStreamTrack = stream.getTracks()[0];
video.src = (window.URL || window.webkitURL).createObjectURL(stream);
video.play();
}, function(err) {
console.log(err);
});
}
第一个参数中指示需要使用视频（video）或音频（audio）。
第二个参数中指示调用成功后的回调，其中带一个参数（MediaStream），在旧版本中可以直接通过调用MediaStream.stop() 来关闭摄像头，不过在新版之中已废弃。需要使用MediaStream.getTracks()[index].stop() 来关闭相应的Track
第三个参数指示调用失败后的回调
新版本位于navigator.mediaDevices 对象下
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(function(stream) {
console.log(stream);
mediaStreamTrack = typeof stream.stop === 'function' "htmlcode">
{
video: true,
audio: true
}
想关闭摄像头，就需要调用MediaStream.getTracks()[1].stop();
同理，0对应于audio的track
使用createObjectURL 将MediaStream写入video标签，就能够存储实时的媒体流数据（也可以方便的实时查看画面）
旧版本中webkitURL 对象以不被支持，需要使用URL对象
<video width="200" height="150"></video>
<canvas width="200" height="150"></canvas>
<p>
<button id="snap">截取图像</button>
<button id="close">关闭摄像头</button>
<button id="upload">上传图像</button>
</p>
<img id="uploaded" width="200" height="150" />
2. 截取图像
将内容写入即可
// 截取图像
snap.addEventListener('click', function() {
context.drawImage(video, 0, 0, 200, 150);
}, false);
3. 关闭摄像头
// 关闭摄像头
close.addEventListener('click', function() {
mediaStreamTrack && mediaStreamTrack.stop();
}, false);
4. 上传截取的图像
canvas.toDataURL('image/png')
// 上传截取的图像
upload.addEventListener('click', function() {
jQuery.post('/uploadSnap.php', {
snapData: canvas.toDataURL('image/png')
}).done(function(rs) {
rs = JSON.parse(rs);
console.log(rs);
uploaded.src = rs.path;
}).fail(function(err) {
console.log(err);
});
}, false);
而这里的后端（PHP）则将获取的内容转换成图像文件保存
需要注意的是，要将base64的头部信息字段去掉再保存，否则似乎图像是损坏无法打开滴
<"htmlcode">
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：Vue.js -- 过滤器使用总结
下一篇：Android中Okhttp3实现上传多张图片同时传递参数