# 纯启动摄像头：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用摄像头</title>
<script>
function accessCamera() {
const video = document.getElementById("video");
// 创建一个媒体流请求对象
const constraints = {
video: true,
audio: false
};
// 使用getUserMedia方法访问摄像头
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
// 将视频流赋值给video元素的src属性，以显示摄像头的视频
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(error) {
console.error("访问摄像头失败：", error);
});
}
</script>
</head>
<body>
<h1>使用摄像头</h1>
<button onclick="accessCamera()">访问摄像头</button>
<video id="video" width="50%" height="50%" autoplay></video>
</body>
</html>
启动摄像头并拍照保存本地：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用摄像头</title>
<script>
function accessCamera() {
const video = document.getElementById("video");
// 创建一个媒体流请求对象
const constraints = { video: true, audio: false };
// 使用getUserMedia方法访问摄像头
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
// 将视频流赋值给video元素的src属性，以显示摄像头的视频
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(error) {
console.error("访问摄像头失败：", error);
});
}
function takePhoto() {
const video = document.getElementById("video");
// 使用canvas捕获图像数据
const canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0);
// 将图像数据保存为图片文件
const dataUrl = canvas.toDataURL();
saveAs(canvas.toDataURL(), "photo.jpg");
}
function saveAs(data, filename) {
const link = document.createElement("a");
link.href = data;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</head>
<body>
<h1>使用摄像头</h1>
<button onclick="accessCamera()">访问摄像头</button>
<button onclick="takePhoto()">拍照保存</button>
<video id="video" width="50%" height="50%" autoplay></video>
</body>
</html>
录制视频并保存：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Recorder</title>
</head>
<body>
<h1>Video Recorder</h1>
<div>
<button id="startRecord">Start Recording</button>
<button id="stopRecord" disabled>Stop Recording</button>
</div>
<div>
<video id="videoPlayer" width="640" height="480" controls></video>
</div>
<script>
let mediaRecorder;
let recordedChunks = [];
const startButton = document.getElementById('startRecord');
const stopButton = document.getElementById('stopRecord');
const videoPlayer = document.getElementById('videoPlayer');
startButton.addEventListener('click', startRecording);
stopButton.addEventListener('click', stopRecording);
async function startRecording() {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = function(event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
mediaRecorder.onstop = function() {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
videoPlayer.src = url;
};
mediaRecorder.start();
startButton.disabled = true;
stopButton.disabled = false;
}
function stopRecording() {
mediaRecorder.stop();
startButton.disabled = false;
stopButton.disabled = true;
}
</script>
</body>
</html>
共享屏幕和录频并保存在本地：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screen Recorder</title>
</head>
<body>
<h1>Screen Recorder</h1>
<div>
<button id="startRecord">Start Recording</button>
<button id="stopRecord" disabled>Stop Recording</button>
</div>
<div>
<video id="videoPlayer" width="640" height="480" controls></video>
</div>
<div>
<button id="saveVideo">Save Video</button>
</div>
<script>
let mediaRecorder;
let recordedChunks = [];
const startButton = document.getElementById('startRecord');
const stopButton = document.getElementById('stopRecord');
const videoPlayer = document.getElementById('videoPlayer');
const saveButton = document.getElementById('saveVideo');
startButton.addEventListener('click', startRecording);
stopButton.addEventListener('click', stopRecording);
saveButton.addEventListener('click', saveVideo);
async function startRecording() {
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = function(event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
mediaRecorder.onstop = function() {
const blob = new Blob(recordedChunks, { type: 'video/mp4' });
const url = URL.createObjectURL(blob);
videoPlayer.src = url;
};
mediaRecorder.start();
startButton.disabled = true;
stopButton.disabled = false;
}
function stopRecording() {
mediaRecorder.stop();
startButton.disabled = false;
stopButton.disabled = true;
}
function saveVideo() {
const blob = new Blob(recordedChunks, { type: 'video/mp4' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'screen_recording.mp4';
const clickHandler = () => {
setTimeout(() => {
URL.revokeObjectURL(url);
a.removeEventListener('click', clickHandler);
}, 150);
};
a.addEventListener('click', clickHandler, false);
a.click();
}
</script>
</body>
</html>
