javascript - 如何更改 tmImage 中的相机输入设备?
问题描述
我最近用 Google Teachable Machine 制作了一个简单的图像检测 AI,我做了很多工作,但我有一个问题。我无法更改相机输入设备。我安装了 Iriun 网络摄像头,无论我做什么它都不想切换到其他输入(我更改了 opera gx 相机设置)。当我阻止或移除 Iriun 网络摄像头时,它没有显示任何内容,它要求摄像头权限然后什么也没发生。我使用了谷歌可教机器的示例代码。任何人都可以帮忙吗?
设置相机的部分:
webcam = new tmImage.Webcam(1280, 720, flip); // width, height, flip
await webcam.setup(); // request access to the webcam
await webcam.play();
window.requestAnimationFrame(loop);
完整代码:
<div>Teachable Machine Image Model</div>
<button type="button" onclick="init()">Start</button>
<div id="webcam-container"></div>
<div id="label-container"></div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
<script type="text/javascript">
// More API functions here:
// https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
// the link to your model provided by Teachable Machine export panel
const URL = "https://teachablemachine.withgoogle.com/models/sDyEbFFcX/";
let model, webcam, labelContainer, maxPredictions;
// Load the image model and setup the webcam
async function init() {
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";
// load the model and metadata
// Refer to tmImage.loadFromFiles() in the API to support files from a file picker
// or files from your local hard drive
// Note: the pose library adds "tmImage" object to your window (window.tmImage)
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
// Convenience function to setup a webcam
const flip = false; // whether to flip the webcam
webcam = new tmImage.Webcam(1280, 720, flip); // width, height, flip
await webcam.setup(); // request access to the webcam
await webcam.play();
window.requestAnimationFrame(loop);
// append elements to the DOM
document.getElementById("webcam-container").appendChild(webcam.canvas);
labelContainer = document.getElementById("label-container");
for (let i = 0; i < maxPredictions; i++) { // and class labels
labelContainer.appendChild(document.createElement("div"));
}
}
async function loop() {
webcam.update(); // update the webcam frame
await predict();
window.requestAnimationFrame(loop);
}
// run the webcam image through the image model
async function predict() {
// predict can take in an image, video or canvas html element
const prediction = await model.predict(webcam.canvas);
for (let i = 0; i < maxPredictions; i++) {
const classPrediction =
prediction[i].className + ": " + prediction[i].probability.toFixed(2);
labelContainer.childNodes[i].innerHTML = classPrediction;
}
}
</script>
解决方案
看这个部分:
// Convenience function to setup a webcam const flip = false; // whether to flip the webcam webcam = new tmImage.Webcam(1280, 720, flip); // width, height, flip -->> await webcam.setup(); // request access to the webcam await webcam.play(); window.requestAnimationFrame(loop); // append elements to the DOM
替换为:
// Convenience function to setup a webcam
const flip = false; //
webcam = new tmImage.Webcam(1280, 720, flip); //
await webcam.setup({ facingMode: "environment" });// <--aca esta la magia
await webcam.play();
window.requestAnimationFrame(loop);
// append elements to the DOM
祝你好运
推荐阅读
- javascript - 在 JavaScript 中获取三个数组的交集
- java - Http URLConnection 等待内部请求
- node.js - MongoDB - Mongoose,在嵌套查询中添加新文档数据
- html - 删除“contentEditable”元素中的第一个单词将破坏 Angular 6 NgFor 绑定
- regex - 英国手机和英国固定电话正则表达式
- javascript - 如何在这段代码中添加到图像的外部链接?
- java - 如何在创建项目的 jar 时将外部 jar 与项目一起导出
- amazon-web-services - 有没有办法在google云平台的虚拟机中打开和修改python文件?
- typescript - TypeScript linter 警告:不推荐使用 no-unused-variable;但我没有使用这个配置
- python - Pandas - 根据另一个表中的值设置行值