html5 相机输入可以在 Windows 10 平板电脑上使用吗?

2024-02-26

TL;DR

html5 相机输入可以在 Windows 10 平板电脑上使用吗?

Details

  • 设备:Dell Venue 8 Pro 平板电脑
  • 操作系统:Windows 10
  • 浏览器:Chrome

Setup

使用以下 html 创建并托管一个页面并在 Chrome 中打开:

<input type="file" accept="image/*" capture="camera">

确保 Windows 10 已允许应用程序使用相机。

Problem

单击输入不会启动相机。它会启动一个文件浏览器。

调查

上面的代码在 Android 和 iOS 设备上运行良好。

我连接了一个网络摄像头 JavaScript 库,它可以在 Win10 平板电脑上运行。我怀疑 Windows 不会像 Android/iOS 那样将其集成摄像头识别为摄像头,而是认为它是网络摄像头(因为移动 Windows 10 本质上只是外形较小的桌面 Windows 10)

Help

有谁知道使 html5 定义在 Windows 10 中工作的方法吗?我真的不想检测操作系统并提供网络摄像头逻辑。


from: https://developers.google.com/web/fundamentals/native-hardware/capturing-images/ https://developers.google.com/web/fundamentals/native-hardware/capturing-images/

<input type="file" accept="image/*" capture>
此方法适用于所有 平台。在桌面上,它将提示用户上传图像文件 从文件系统。在 iOS 上的 Safari 中,此方法将打开 相机应用程序,允许您捕获图像然后将其发送回 网页;在 Android 上,此方法将为用户提供以下选择: 在将图像发送回之前使用哪个应用程序来捕获图像 网页。

然后可以将数据附加到 a 或使用 JavaScript 通过监听输入元素上的 onchange 事件并 然后读取事件目标的文件属性。

也许你应该使用图像捕获 API,如下所述:https://developers.google.com/web/updates/2016/12/imagecapture https://developers.google.com/web/updates/2016/12/imagecapture如果我能弄清楚我会上传我的代码

另一件需要考虑的事情是 HTTP VS HTTPS 谷歌浏览器可能会阻止 HTTP 上的摄像头

谷歌浏览器和 HTTPS 如果您使用的是最新版本的 Google Chrome,最近进行了安全更改,只有通过 HTTPS 提供内容时才能访问网络摄像头。您仍然可以在本地(或通过本地主机)进行开发和测试,但除非您使用安全的 HTTPS 连接,否则您将无法“在野外”测试它。

source https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm

您可以通过使用未被阻止的 localhost 来确定这是问题所在

在 Windows 操作系统中,我使用视频捕获(在 HTTPS 或本地主机上) 这是使用相机,然后你应该添加代码来捕获它

<video autoplay></video>
<script>
const constraints = {
          video: true
};
const video = document.querySelector('video');
function handleSuccess(stream) {
   video.srcObject = stream;
}
function handleError(error) {
console.error('Reeeejected!', error);
}
navigator.mediaDevices.getUserMedia(constraints).
then(handleSuccess).catch(handleError);
</script>

代码来源https://www.html5rocks.com/en/tutorials/getusermedia/intro/ https://www.html5rocks.com/en/tutorials/getusermedia/intro/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html5 相机输入可以在 Windows 10 平板电脑上使用吗? 的相关文章

  • 如何将此 HTML 表格布局解决方案转换为浮动 div 解决方案?

    我经常需要列出各种尺寸的项目images在左边和text在右边 像这样 替代文本 http www deviantsart com upload 7s01l5 png http www deviantsart com upload 7s01
  • 如何使用 JavaScript 获取没有 HTML 元素的纯文本?

    我的 HTML 中有 1 按钮和一些文本 如下所示 function get content I don t know how to do in here
  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r
  • 如何获取 UIWebView 中元素的位置?

    我在 iPad 程序中加载了 html 的 UIWebView 通过使用 webkit column width 我将 html 分为几列 padding 0px height 1024px webkit column gap 0px we
  • 单击引导分页链接时调用 jquery 函数

    我想在单击引导分页链接时调用 jquery 函数 假设我想从第1页遍历到第2页 应该调用一个jquery函数 我正在使用以下代码 但它不起作用 ul pagination on click li function alert page ch
  • LinkedIn 共享网站时不获取元数据

    我在 LinkedIn 上共享正在处理的网站时遇到问题 LinkedIn 不会从该页面获取任何数据 该网站的元数据遵循以下建议他们的文档 https help linkedin com app answers detail a id 466
  • jQuery:查找文本并替换为 HTML

    我尝试查找并替换文本 使用 jQuery 实际上我正在尝试在文本周围添加一个 span 元素 我还应该能够再次删除跨度而不会丢失里面的文本 例如 假设我有以下情况 span This is a span element span 我希望能够
  • html 中的输入字段可以有多少个字符?

    html 输入字段中允许的 自然 字符数是多少 多谢 根据评论添加 我不需要通过邮寄或获取将其发送到服务器 我将通过 JS 解析字符串 因此 如果输入是无限的 就像 sAc 所说 这会给我带来两个进一步的问题 JS 最长的 String 可
  • 右下角对齐的更好方法

    有没有更好的方法来对齐单元格右下角的某些内容 我有一个 div 只包含一个背景图像 10px x 10px 我使用以下样式将其放在右下角 我所在的单元格高 40 像素 这样做会导致我失去 div 上方的 30px 我还使用它作为单击的对象
  • 在服务器端生成 HTML Canvas 图像数据?

    这个问题的标题可能有点误导 但我不确定最好的标题是什么 因为我还无法猜测解决方案 基本上我正在开发的系统很大程度上依赖于画布图 这些图表是通过 javascript 生成的 并使用通过 ajax 从 API 服务器提取的数据制作 棘手的部分
  • Ionic 2 占位符文本样式

    我正在使用 Ionic 2 rc0 开发一个应用程序 并且整个应用程序中有几个仍然需要样式设置的输入字段
  • 为整个网站设置单个图标

    目前我正在使用这段代码将网站图标添加到网站 但是 必须将此代码添加到每个 HTML 页面中 有谁知道如何设置全局图标 我看过的所有地方都告诉我必须将其添加到每个页面 UPDATE Chrome 在根目录中搜索 favicon ico 文件
  • SASS如何在旋转body时使页面完整的高度和宽度?

    我必须旋转我的身体并做到这一点全高 and 全屏宽度 嗯 我用的是vh公制并且非常适合width但身高还是不太合适 我不得不旋转 90 度但是height and width仍然指相同的方向not rotate PS 我添加了 red以便更
  • jQuery .val() 返回单选按钮的未定义

    我正在尝试获取 jQuery 中选中的单选按钮值 但它返回的值是 未定义 我搜索了这个问题的解决方案 但对我来说没有任何作用 我的 HTML 代码
  • PHP函数返回值到html标签

    我想获取函数的返回值并将其显示到特定的id 在我的 Class php 中 我有一个名为 login 的函数 用于验证密码是否正确 不正确
  • 如何从顺序键盘导航中删除 Vuetify 附加图标

    在带有 Vuetify 的 Vue js 应用程序中 我有一组用v text field并且其中有一个append icon为了切换文本可见性 如下所示
  • css 计数器在 Internet Explorer 中无法工作以获取隐藏内容 - 如何修复?

    我们想要一些编号列表 并发现了这个很酷的计数器 您可以在 css 中使用它来让浏览器为您计算数字 ol instructions counter reset instructions section ol instructions gt l
  • 使用 html5 分块上传文件

    我正在尝试使用 html5 的文件 API 分块上传文件 然后在服务器端用 php 重新组装它 我正在上传视频 但是当我在服务器端合并文件时 大小增加了 并且它变成了无效文件 请注意 以下 html5 代码仅适用于 chrome 浏览器 在
  • 加载另一个 JS 脚本后加载

    这是我的代码 very big js file lots of html stuff 问题是 这些是异步加载的 有没有办法等待第二个脚本直到第一个脚本加载 如果您使用 jQuery 有一个非常简单的方法可以通过获取脚本 https api
  • MYSQL 按喜欢/不喜欢和受欢迎程度排序

    我有评论表 其中包括喜欢和不喜欢的内容 现在我在正确的顺序上遇到了问题 实际上 我的系统在顶部显示了最多点赞的评论 我正在 youtube 上寻找类似系统的东西 这意味着 100like 100dislikes 的评论的顺序高于 1 1 我

随机推荐