Html 通过浏览器访问相机

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6336641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:05:42  来源:igfitidea点击:

Camera access through browser

ioshtmlcamera

提问by Julia

We are creating an HTML5 website for mobile and need to get camera access through the web browser without being a native app. We are having trouble making this work in iOS. Is anyone aware of a solution for this?

我们正在为移动设备创建一个 HTML5 网站,需要通过网络浏览器访问相机,而不是本机应用程序。我们在 iOS 中无法完成这项工作。有没有人知道这个解决方案?

回答by Xeroxoid

You could try this:

你可以试试这个:

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

but it has to be iOS 6+to work. That will give you a nice dialogue for you to choose either to take a picture or to upload one from your album i.e.

但它必须是 iOS 6+才能工作。这会给你一个很好的对话让你选择是拍照还是从你的相册上传一张照片,即

Screenhot

截图

An example can be found here: Capturing camera/picture data without PhoneGap

可以在此处找到示例: Capturing camera/picture data without PhoneGap

回答by Simon East

As of 2015, it now just works.

截至 2015 年,它现在可以正常工作了

<input type="file">

This will ask user for the upload of any file. On iOS 8.x this can be a camera video, camera photo, or a photo/video from Photo Library.

这将要求用户上传任何文件。在 iOS 8.x 上,这可以是相机视频、相机照片或照片库中的照片/视频。

iOS/iPhone photo/video/file upload

iOS/iPhone 照片/视频/文件上传

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

This is as above, but limits the uploads to photosonly from camera or library, no videos.

这是如上,但限制上传照片只能从相机或库,没有视频。

回答by user295691

In iOS6, Apple supports this via the <input type="file">tag. I couldn't find a useful link in Apple's developer documentation, but there's an example here.

在 iOS6 中,Apple 通过<input type="file">标签支持这一点。我找不到苹果的开发者文档中一个有益的联系,但有一个例子在这里

It looks like overlays and more advanced functionality is not yet available, but this should work for a lot of use cases.

看起来叠加层和更高级的功能尚不可用,但这应该适用于很多用例。

EDIT: The w3c has a spec that iOS6 Safari seems to implement a subset of.The captureattribute is notably missing.

编辑:w3c 有一个规范,iOS6 Safari 似乎实现了它的一个子集。capture属性明显缺失。

回答by siniradam

I think this one is working. Recording a video or audio;

我认为这个是有效的。录制视频或音频;

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

or (new method)

或(新方法)

<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
  function update(stream) {
    document.querySelector('video').src = stream.url;
  }
</script>

If it is not, probably will work on ios6, more detail can be found at get user media

如果不是,可能会在 ios6 上工作,更多细节可以在get user media找到

回答by rakensi

The Picupapp is a way to take pictures from an HTML5 page and upload them to your server. It requires some extra programming on the server, but apart from PhoneGap, I have not found another way.

PICUP应用程序是由HTML5网页拍照并上传到服务器的方式。它需要在服务器上进行一些额外的编程,但除了PhoneGap,我还没有找到其他方法。

回答by Christoph

This question is already a few years old but in that time some additional possibilities have evolved, like accessing the camera directly, displaying a preview and capturing snapshots (e.g. for QR code scanning).

这个问题已经有几年了,但在那个时候一些额外的可能性已经发展,比如直接访问相机、显示预览和捕获快照(例如用于二维码扫描)。

This Google Developersarticle provides an in-depth explaination of all (?) the ways how to get image/camera data into a web application, from "work everywhere" (even in desktop browsers) to "work only on modern, up-to-date mobile devices with camera". Along with many useful tips.

这篇Google Developers文章深入解释了如何将图像/相机数据导入 Web 应用程序的所有(?)方法,从“无处不在”(甚至在桌面浏览器中)到“仅在现代的、最新的- 带摄像头的移动设备日期”。以及许多有用的提示。

Explained methods:

说明方法:

  • Ask for a URL
  • File input (covered by most other posts here)
  • Drag and drop (useful for desktop browsers)
  • Paste from clipboard
  • Access the camera interactively (necessary if application needs to give instant feedback on what it "sees", like QR codes)
  • 求一个网址
  • 文件输入(此处包含大多数其他帖子)
  • 拖放(适用于桌面浏览器)
  • 从剪贴板粘贴
  • 以交互方式访问相机(如果应用程序需要对其“看到”的内容提供即时反馈,例如二维码,则这是必要的)