USB百科
通过网页打开本地USB摄像头并实现录制-WebCamera
2023-09-07
703
2
将以下源代码使用记事本存储，并保存为.html文件。用浏览器打开：
这样就可以看打开本地摄像头的预临览。可以实现录制，保存等功能。
当然这个与WEBUSB是否有关，暂不知。。
本站演示地址：https://www.usbzh.com/tool/webcamera.html
源工程地址：https://jsrun.net/rxgKp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>网页调取USB摄像头，播放、截图、录制等功能 - USB中文网</title>
<body>
<button id='snap'>获取</button>
<button id='stop'>暂停</button>
<button id='record-start'>开始录制</button>
<button id='record-stop'>结束录制</button>
<p>
<video id='video'></video>
<canvas id='canvas'></canvas>
<img id="img">
<video id='record-video'></video>
<script>
window.addEventListener('DOMContentLoaded', function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
video = document.getElementById('video'),
img = document.getElementById('img'),
mediaStream = null; // 原始媒体流
// 访问用户媒体设备的兼容方法
function getUserMedia(constrains, success, error) {
if (navigator.mediaDevices.getUserMedia) {
// 最新标准API
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
// webkit内核浏览器
navigator.webkitGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.mozGetUserMedia) {
// Firefox浏览器
navigator.mozGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.getUserMedia) {
// 旧版API
navigator.getUserMedia(constrains).then(success).catch(error);
}
}
// 成功的回调函数
function success(stream) {
mediaStream = stream;
try {
// 最新的方法，把流传给video对象
video.srcObject = stream;
} catch (error) {
// 兼容webkit内核浏览器
var CompatibleURL = window.URL || window.webkitURL;
// 将视频流设置为video元素的源
video.src = CompatibleURL.createObjectURL(stream);
}
// 播放视频
video.play();
}
// 异常的回调函数
function error(error) {
console.log("访问用户媒体设备失败：", error.name, error.message);
}
if ((navigator.mediaDevices && navigator.mediaDevices.getUserMedia) || navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia) {
// 调用用户媒体设备，访问摄像头
getUserMedia({
video: {
width: 640,
height: 480
}
}, success, error);
} else {
alert("你的浏览器不支持访问用户媒体设备");
}
// 注册拍照按钮的单击事件
document.getElementById("snap").addEventListener("click", function () {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0);
img.src = canvas.toDataURL("image/jpeg");
});
// 暂停按钮的单击事件
document.getElementById("stop").addEventListener("click", function () {
if (video.paused) {
video.play();
} else {
video.pause();
}
});
let recorder, chunks = [];
// 开始录制的单击事件
document.getElementById("record-start").addEventListener("click", function () {
chunks.length = 0;
recorder = new MediaRecorder(mediaStream);
recorder.ondataavailable = (e) => {
chunks.push(e.data);
}
recorder.start(100);
});
// 结束录制的单击事件
document.getElementById("record-stop").addEventListener("click", function () {
recorder.stop();
let recorderFile = new Blob(chunks, { type: recorder.mimeType });
let recorderVideo = document.getElementById('record-video');
recorderVideo.autoplay = true;
recorderVideo.width = video.videoWidth;
recorderVideo.height = video.videoHeight;
try {
recorderVideo.srcObject = recorderFile;
} catch (error) {
var CompatibleURL = window.URL || window.webkitURL;
recorderVideo.src = CompatibleURL.createObjectURL(recorderFile);
}
});
}, false);
</script>
</body>
</html>
HID人机交互QQ群：564808376
UAC音频QQ群：218581009
UVC相机QQ群：331552032
BOT&UASP大容量存储QQ群：258159197
STC-USB单片机QQ群：315457461
USB技术交流QQ群2:580684376
USB技术交流QQ群：952873936
