我可以将使用 getUserMedia 收到的值传输到输入文件吗？
Posted
技术标签:
【中文标题】我可以将使用 getUserMedia 收到的值传输到输入文件吗？【英文标题】：Can I transfer the value received with getUserMedia to the input file? 【发布时间】：2021-10-28 02:59:33 【问题描述】：我有一个在 webview 下运行的 html5 网络应用程序。
我想通过从用户的相机拍照来发送带有表单 enctype multipart/form-data 的数据。
我在输入类型文件中尝试了一些东西，但不幸的是，当我在所有这些文件中按“选择文件”时，它会打开相机和文件选择列表。
<form action="/upload.asp" method="post" enctype="multipart/form-data">
<input type="file" id="cameraPic" accept="image/*;capture=camera" /><br>
<input type="file" id="cameraPic" capture="environment" accept="image/*"/><br>
<input type="file" id="cameraPic" capture="user" accept="image/*"/><br>
<input type="file" id="cameraPic" name="profile_pic" accept=".jpg, .jpeg"/><br>
<input type="submit">
</form>
所以我想尝试使用“mediaDevices.getUserMedia”捕获并上传相机。
使用下面的代码，我可以拍照并在页面上查看。但是如何将图像从页面发送到后端？
输入文件值的分配（我认为这不是出于安全原因） 找到Base64代码并上传到Textarea并发送。 将“上传”按钮放在“拍照”按钮旁边。我不确定要做什么以及如何去做？
我不知道我的路径是否正确。
另一个问题是“getUserMedia”后置摄像头无法打开。
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Take Photo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,body,video margin:0;padding:0;
button height:3em;width:10em;left:0;top:0;position:fixed;
video height:3em;width:10em;right:0;top:0;position:fixed;
#takePhotoCanvas width:100vw;height:100vh;left:0;top:3em;position:fixed;
</style>
</head>
<body>
<button onclick="takePhotoButton()">Take Photo</button>
<video autoplay=""></video>
<canvas id="takePhotoCanvas"></canvas>
<script>
var imageCapture;
navigator.mediaDevices.getUserMedia(video: true)
.then(mediaStream =>
document.querySelector('video').srcObject = mediaStream;
const track = mediaStream.getVideoTracks()[0];
imageCapture = new ImageCapture(track);
)
.catch(error => console.log(error));
function grabFrameButton()
imageCapture.grabFrame()
.then(imageBitmap =>
const canvas = document.querySelector('#grabFrameCanvas');
drawCanvas(canvas, imageBitmap);
)
.catch(error => console.log(error));
;
function takePhotoButton()
imageCapture.takePhoto()
.then(blob => createImageBitmap(blob))
.then(imageBitmap =>
const canvas = document.querySelector('#takePhotoCanvas');
drawCanvas(canvas, imageBitmap);
)
.catch(error => console.log(error));
;
/* Utils */
function drawCanvas(canvas, img)
canvas.width = getComputedStyle(canvas).width.split('px')[0];
canvas.height = getComputedStyle(canvas).height.split('px')[0];
let ratio = Math.min(canvas.width / img.width, canvas.height / img.height);
let x = (canvas.width - img.width * ratio) / 2;
let y = (canvas.height - img.height * ratio) / 2;
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,
x, y, img.width * ratio, img.height * ratio);
;
</script>
</body>
</html>
【问题讨论】：
您可能会发现查看这些WebRTC Samples 会有所帮助。它们向您展示了有关图像捕获和相机选择的一些信息。 这能回答你的问题吗？ How can I capture an image via the user's webcam using getUserMedia? @O.Jones 它在我的代码中捕获和传输画布图像。但我需要将画布上的图像发布到服务器。 【参考方案1】：这个MDN tutorial值得。
看来你需要canvas.toBlob()。
这样的事情可能会奏效。
canvas.toBlob(function (blob)
const fd = new FormData();
fd.append('fname', 'pic.jpg');
fd.append('data', blob);
$.ajax(
type: 'POST',
url: '/uploadedendpoint ',
data: fd,
processData: false,
contentType: false
)
.done(function(data)
console.log(data);
, 'image/jpeg')
这使用 jquery ajax 调用从画布发布编码的 jpeg 图片。
未调试...这取决于您。
【讨论】：
以上是关于我可以将使用 getUserMedia 收到的值传输到输入文件吗？的主要内容，如果未能解决你的问题，请参考以下文章
38 py改变函数参数的值关键字参数和参数默认值函数中可变参数将序列中的元素值作为函数对应的参数值传
React Native：Webview getUserMedia无法正常工作（onPermissionRequest覆盖？）