webcam 相关问题

网络摄像头是一种视频摄像头,可以通过USB,以太网或Wi-Fi将其图像实时提供给计算机或计算机网络。

Qr 和条形码阅读器 html5 的 javascript 文档

我想进行输入,在使用网络摄像头或手机摄像头扫描二维码或条形码扫描仪后可以自动填写。 对于剧本我想象了这样的事情 我想进行一个输入,在使用网络摄像头或手机摄像头扫描 QR 或条形码扫描仪后可以自动填写。 对于剧本我想象的是这样的 <video autoplay = "true" id = "video-webcam"> </video> <input type = "text" id = "scanresult"> <script> external or internal script for scan qr or barcode. save result in variable = result html DOM getElementById ('scanresult'). value (result); </script> 我希望任何人都可以针对我的问题向我提供建议或反馈。 谢谢你 在此之前感谢 JaromandaX, 我找到了使用网络摄像头在 Html5 上进行条形码扫描仪的脚本。 这是我的index.html <!DOCTYPE html> <html> <head> <title>QR Code Scanner</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <link rel="stylesheet" href="style.css" /> <script src="https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js"></script> </head> <body> <div id="container"> <h1>QR Code Scanner</h1> <a id="btn-scan-qr"> <img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg"> <a/> <canvas hidden="" id="qr-canvas"></canvas> <div id="qr-result" hidden=""> <b>Data:</b> <span id="outputData"></span> </div> </div> <script src="qrCodeScanner.js"></script> </body> </html> qsCodeScanner.js //const qrcode = window.qrcode; const video = document.createElement("video"); const canvasElement = document.getElementById("qr-canvas"); const canvas = canvasElement.getContext("2d"); const qrResult = document.getElementById("qr-result"); const outputData = document.getElementById("outputData"); const btnScanQR = document.getElementById("btn-scan-qr"); let scanning = false; qrcode.callback = res => { if (res) { outputData.innerText = res; scanning = false; video.srcObject.getTracks().forEach(track => { track.stop(); }); qrResult.hidden = false; canvasElement.hidden = true; btnScanQR.hidden = false; } }; btnScanQR.onclick = () => { navigator.mediaDevices .getUserMedia({ video: { facingMode: "environment" } }) .then(function(stream) { scanning = true; qrResult.hidden = true; btnScanQR.hidden = true; canvasElement.hidden = false; video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen video.srcObject = stream; video.play(); tick(); scan(); }); }; function tick() { canvasElement.height = video.videoHeight; canvasElement.width = video.videoWidth; canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height); scanning && requestAnimationFrame(tick); } function scan() { try { qrcode.decode(); } catch (e) { setTimeout(scan, 300); } } 样式.css html { height: 100%; } body { font-family: sans-serif; padding: 0 10px; height: 100%; background: black; margin: 0; } h1 { color: white; margin: 0; padding: 15px; } #container { text-align: center; margin: 0; } #qr-canvas { margin: auto; width: calc(100% - 20px); max-width: 400px; } #btn-scan-qr { cursor: pointer; } #btn-scan-qr img { height: 10em; padding: 15px; margin: 15px; background: white; } #qr-result { font-size: 1.2em; margin: 20px auto; padding: 20px; max-width: 700px; background-color: white; } 有很多更好的库可以做到这一点,但我个人推荐QrScanner,因为它简单且直观。 你的实时二维码扫描仪会是这样的...... 扫描仪.html <div id="holder"> <h3>Scan QR Code from Camera</h3> <div class="make"> <video id="scan"></video> </div> <div> <input type = "text" id = "scanresult"><br> <button id="start">Start</button> <button id="stop">Stop</button> </div> </div> 然后添加一点CSS: 样式.css #holder{ width: 30%; margin:auto; } #holder .make { width: 99%; height: 30vh; margin-bottom: 15px; text-align: center; } video { width: 99%; margin:auto; } 然后添加您的 QrScanner 代码: <script type="module"> import QrScanner from "/path/to/qr-scanner.min.js"; QrScanner.WORKER_PATH = "/path/to/qr-scanner-worker.min.js"; // Scanner Object const scanner = new QrScanner( document.getElementById("scan"), function(result){ document.getElementById("scanresult").value = result; } ); document.getElementById("start").onclick = e => scanner.start(); document.getElementById("stop").onclick = e => scanner.stop(); </script> 然后连接相机并单击开始按钮...

回答 2 投票 0

加载带有 A 型框架的 GLTF 以用于网络摄像头显示

我正在尝试使用 A-Frame 版本“1.5.0”加载 GLTF 模型,并通过网络摄像头在智能手机的浏览器中显示它。我在提供的代码中遇到了三个问题:首先,GLTF...

回答 1 投票 0

WebCam 在 BigBlueButton 中录制的视频中存在问题

我需要帮助将 BBB 集成到我的 LMS 系统中。当在录制过程中同时共享屏幕和网络摄像头 (1) 时,我配置了布局来构建录制的视频,如下所示

回答 1 投票 0

使用较高分辨率时 OpenCV 捕获速度非常慢

我从网络摄像头读取图像并在其中找到一些运动数据。 我写了一个小类,它测量从读取图像、检测运动等所有步骤,然后打印它。 现在当我只是...

回答 2 投票 0

使用 getusermedia 显示 html 视频

我希望在用户单击按钮后使用 getusermedia 显示 html 视频(使用网络摄像头捕获)。视频标签将使用innerhtml 显示。 当用户单击按钮时,视频将显示...

回答 4 投票 0

如何使用ffmpeg从网络摄像头录制视频和音频?

我想使用 ffmpeg 从网络摄像头录制视频和音频, 我使用以下代码来了解哪些设备可用: ffmpeg -list_devices true -f dshow -i 虚拟 并得到结果...

回答 1 投票 0

opencv 使用时相机没有响应[已关闭]

我写了以下代码 将 cv2 导入为 cv 上限=cv.VideoCapture(0) fourcc=cv.VideoWriter_fourcc(*'XVID') #out=cv.VideoWriter('输出.avi',fourcc,20.0,(640,840)) 而(真): ret,frame=cap.read(...

回答 1 投票 0

WebRTC:如何以数据流形式获取网络摄像头数据?

我有一个简单的网页,您可以在其中流式传输网络摄像头。我想获取这个流并将其发送到某个地方,但显然我无法真正访问该流本身。我有这个代码来运行

回答 2 投票 0

无法在 WebGL 构建 Unity 上设置 WebcamTexture 的分辨率

我一直在为 Windows 开发这个应用程序,最近的任务是将其切换到 WebGL。 一切都很顺利,除了网络摄像头分辨率,我似乎无法正常工作......

回答 1 投票 0

使用 navigator.mediaDevices.getUserMedia 来自用户网络摄像头的角度视频

我正在尝试使用带有视频元素的 navigator.mediaDevices.getUserMedia 从用户网络摄像头获取运行的视频。我想从网络摄像头捕获图像并制作图像文件。但我被卡住了...

回答 1 投票 0

网络摄像头与stm32接口

我想使用 STM32F4 微控制器接收视频流,然后使用 rtsp 协议通过以太网进行流式传输。 我需要你们告诉我哪种电路最适合接口......

回答 3 投票 0

Lenovo Ideapad 3 中的网络摄像头在 Ubuntu 20.04 中的分辨率太糟糕了

年底拿到了Lenovo Ideapad 3。在上面安装了ubuntu 20.04。网络摄像头“有效”,但图像无法区分(基本上是一个不起眼的斑点,我看起来还不错)。可以手跑...

回答 1 投票 0

移植 r5u870 驱动程序,但 v4l2 合规性返回“VIDIO_QUERYCAP 失败,设备的 ioctl 不适当”

我正在尝试重新使用旧的笔记本电脑网络摄像头,它使用 USB 接口进行通信,是带有芯片组 r5u870 的理光相机。 我在 github 上发现了一个我分叉的存储库,因为它不能与

回答 1 投票 0

Vuforia:在图像目标的特定位置渲染模型

我想知道图像目标位置是如何工作的,因为我想在图像目标的特定位置或点上渲染模型。如何使用笔记本电脑外接摄像头解决此问题? 当...

回答 1 投票 0

React 录制的视频未在视频标签中播放

我正在创建一个 React 应用程序,用于对候选人进行网络摄像头面试。候选人还可以“重新开始”或“完成”他们的面试。 显示记录的数据...

回答 1 投票 0

如何使 navigator.mediaDevices.getUserMedia({ video: true }) 在移动设备上工作

我正在尝试用手机录制视频并将其用作我正在构建的网站的背景。目标是对视频流进行处理,但首先我需要能够渲染它。 ...

回答 1 投票 0

移动 Adobe Flash AIR 上的摄像机和 Stage3D。 AIR 上的增强现实

快速提问 如何使用Stage3D在Adobe AIR应用程序上快速显示网络摄像头? 详细问题 关于 我的目标是创建 AR(增强现实)移动应用程序的原型。我选择了

回答 1 投票 0

从网络摄像头捕获图像并保存

大家好,我正在尝试保存从我的网络摄像头拍摄的照片。 我实际上使用这个代码 使用系统; 使用 System.Collections.Generic; 使用 System.Linq; 使用系统.Web; 使用 System.Web.UI; 你...

回答 2 投票 0

Next.js 有没有办法设置视频和音频权限?

我想在单击按钮时设置权限。我想要这样的场景。首先,方法首先工作并允许按下按钮。 我的代码: 我想在单击按钮时设置权限。我想要这样的场景。首先,方法首先起作用并允许按下按钮。 我的代码: <button onClick={requestPermission} className=" ring-1 hover:bg-blue-500 transition-all duration-300 active:bg-blue-600 rounded-lg px-4 py-2 text-xl font-semibold text-white bg-blue-700 flex items-center " > <span className="mr-4">İzin ver</span>{" "} <FontAwesomeIcon icon={faVideoCamera} /> </button> // Permissions const requestPermission = useCallback(async () => { console.log("bu func. calisti"); try { const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true, }); webcamRef.current.srcObject = stream; setPermissionGranted(true); } catch (error) { if (!hideQuestion) { console.error("Webcam ve mikrofon izni reddedildi:", error); toast.warn("Lütfen Webcam İzinlerini Veriniz..."); } setPermissionGranted(false); } }, [hideQuestion]); useEffect(() => { requestPermission(); }, []); 将视频/音频权限设置为“已授予”状态的唯一方法是尝试调用 getUserMedia。这是为了击败网络怪人。您无法保存状态并稍后通过 Javascript 代码恢复它。 某些浏览器(但不是全部)(尤其是 iOS / iPadOS Safari)会保存每个网站来源的状态。

回答 1 投票 0

使用 Chrome、Selenium 和 Python 更改假网络摄像头文件 (.y4m) 设备名称

我正在尝试使用伪造的网络摄像头文件打开 Chrome,该文件为 .y4m,如下所示: 从硒导入网络驱动程序 从 selenium.webdriver.chrome.service 导入服务 来自 selenium.webdriver.c...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.