JS 利用 webcam访问摄像头上传到服务器

webcam JS 较为详细的指南

定义标题

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to capture picture from webcam with Webcam.js</title>

</head>
<body>

<meta> 标签用于设置页面的视口（viewport），
content 属性指定了视口的宽度为设备的宽度，并启用了初始缩放比例为 1.0。这样可以确保页面在不同设备上以适当的方式显示。
<title> 标签定义了页面的标题，显示在浏览器的标签页或标题栏上，本例中标题为 “How to capture picture from webcam with Webcam.js”。

定义my_camera样式

	<!-- CSS -->
    <style>	<!-- 定义my_camera样式 -->
    #my_camera{
        width: 320px;
        height: 240px;
        border: 1px solid black;
    }
	</style>

这段代码定义了一个样式规则，在 HTML 页面中为 id 为 “my_camera” 的元素应用了该样式。
在样式规则中，width 属性设置了元素的宽度为 320 像素，height 属性设置了元素的高度为 240 像素，border 属性设置了元素的边框为 1 像素的黑色实线。
这段代码可以用于定义一个相机显示区域的样式，使其具有固定的宽度和高度，并且有一个黑色的边框。

JS.div

HTML 的 <div> 是一个块级元素。它是一个无语义的容器元素，用于将其他元素分组在一起，以便样式和布局的目的。
<div> 元素没有默认的样式或行为，仅仅提供了一个空的盒子，可以通过 CSS 来自定义其外观和行为。
<div> 元素可以包含其他任意元素，包括文本、图片、表单等等。

define a device

	<!-- -->
	<div id="my_camera"></div>
	<input type=button value="Configure" onClick="configure()">
	<input type=button value="Take Snapshot" onClick="take_snapshot()">
	<input type=button value="Save Snapshot" onClick="saveSnap()">
	
    <div id="results"  ></div>

这段代码是一个 HTML 页面的主体部分，包含了一个用于显示摄像头视频的容器、三个按钮和一个用于显示结果的容器。
<div id="my_camera"></div> 是一个空的 <div> 元素，它的 id 属性被设置为 “my_camera”。这个元素用于显示摄像头视频，后面的 JavaScript 代码会将摄像头视频渲染到这个元素中。
<input> 元素是用来创建按钮的，有三个按钮分别是 “Configure”、“Take Snapshot” 和 “Save Snapshot”。每个按钮都有一个 onClick 属性，用于指定按钮被点击时所触发的 JavaScript 函数。
接下来的代码 <div id="results"></div> 是另一个空的 <div> 元素，它的 id 属性被设置为 “results”。这个元素用于显示操作结果，例如当用户点击 “Save Snapshot” 按钮时，JavaScript 代码会将截取的照片显示在这个元素中。

define js action

	<!-- Script -->
	<script type="text/javascript" src="webcamjs/webcam.min.js"></script>
	...
	</script>

这行代码是在 HTML 页面中引入了一个外部的 JavaScript 文件。
通过使用 <script> 标签和 src 属性，可以将 webcam.min.js 文件加载到页面中。
这个文件是 webcam.js 库的压缩版本，它提供了一些用于操作和控制摄像头的函数和方法，以便在网页中捕捉图像或视频。通过引入这个 JavaScript 文件，可以在后续的代码中使用这个库提供的功能。

webcam.min.js

set style of camera

	<!-- Code to handle taking the snapshot and displaying it locally -->
	<script language="JavaScript">
		
		// Configure a few settings and attach camera
		function configure(){
			Webcam.set({
				width: 320,
				height: 240,
				image_format: 'jpeg',
				jpeg_quality: 90
			});
			Webcam.attach( '#my_camera' );
		}
		// A button for taking snaps

navigator

navigator 是 JavaScript 中的一个内置对象，用于提供有关浏览器环境和用户代理的信息。它包含了一系列的属性和方法，可以用来获取和操作与浏览器相关的信息。下面是一些 navigator 对象的常用属性：

navigator.userAgent：返回包含浏览器用户代理字符串的字符串。
navigator.language：返回当前浏览器环境的首选语言。
navigator.platform：返回运行浏览器的操作系统平台。
navigator.appVersion：返回浏览器的版本号和操作系统信息。

通过使用 navigator 对象，可以根据浏览器的不同特性和功能来进行相关的逻辑判断和操作，从而提供更好的用户体验或调整功能的实现方式。

		// preload shutter audio clip
		var shutter = new Audio();
		shutter.autoplay = false;
		shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';

take snapshot

		function take_snapshot() {
			// play sound effect
			shutter.play();

			// take snapshot and get image data
			Webcam.snap( function(data_uri) {
				// display results in page
				document.getElementById('results').innerHTML = 
					'<img id="imageprev" src="'+data_uri+'"/>';
				console.log('Capture successfully');
			} );

			Webcam.reset();
		}

Question what’s data_uri

在JavaScript中，data URI（Uniform Resource Identifier）是一种用来嵌入小型数据的方式。它是一种特殊的URL格式，可以将数据直接嵌入到HTML、CSS、JavaScript等文件中，而无需引用外部资源文件。

* Data URI的格式如下：

data:[mediatype][;base64],<data>

其中，mediatype是数据的MIME类型（例如，image/jpeg表示JPEG格式的图像，text/plain表示纯文本），base64是可选的，表示是否使用base64编码，<data>是实际的数据内容。

* 例如，一个包含了纯文本的data URI如下：

data:text/plain,Hello%20World!

* 一个包含了base64编码图像的data URI如下：

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD...（以下省略）

Display

上面的id="imageprev"的datauri如下，严格按照 😊 base64编码的图像格式 😊
在这里插入图片描述

data URI的优点是可以减少HTTP请求数量，提高网页的加载速度。但是，由于数据直接嵌入到文件中，会增加文件的大小，可能导致文件变得更大，在一些情况下可能不适用。另外，不同浏览器对data URI的限制也有所不同，需要注意兼容性问题。

savesnap

		function saveSnap(){
			// Get base64 value from <img id='imageprev'> source
			var base64image =  document.getElementById("imageprev").src;

			Webcam.upload( base64image, 'upload.php', function(code, text) {
				console.log('Save successfully');
				//console.log(text);
            });

		}
	</script>
	
</body>
</html>

upload.php

<?php

// new filename
$filename = 'pic_'.date('YmdHis') . '.jpeg';

$url = '';
if( move_uploaded_file($_FILES['webcam'][$filename],'upload/'.$filename) ){
	$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/upload/' . $filename;
}

// Return image url
echo $url;
?>

upload.js

尚未成功

```javascript 
// 获取base64图片数据
var base64Image = document.getElementById('imageprev').src;

// 将base64图片数据转换为Blob对象
var byteCharacters = atob(base64Image.split(',')[1]);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blobImage = new Blob([byteArray], { type: 'image/jpeg' });

// 创建一个FormData对象
var formData = new FormData();
formData.append('webcam', blobImage, 'image.jpeg');

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 定义请求完成后的回调函数
xhr.onload = function() {
  if (xhr.status === 200) {
    var imageUrl = xhr.responseText;
    console.log('图像已上传，URL为：', imageUrl);
  } else {
    console.log('上传图像时发生错误');
  }
};

// 发送POST请求到服务器的/upload文件夹
xhr.open('POST', '/upload', true);
xhr.send(formData);