13 ms·

TIL: You can access a user’s camera with just HTML

576 points by feross 4y ago

1023bytes 4y ago
Demo is on MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture#examples https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes...
- paulirish 4y ago
  A more minimal demo: https://simpl.info/mediacapture/ https://simpl.info/mediacapture/ (Everything remains local) AFAIK, this feature is mobile only.
murkt 4y ago
I have a webcam for capturing pictures on my "desktop", so browser could use that. Not sure if it would be useful
encryptluks2 4y ago
That is pretty cool. Been wanting to create a site with a blurred backdrop effect around text, but a camera background to simulate an augmented reality style. Wish something like this could work on desktop as well though. It is a shame really that more features don't get encapsulated into elements recently and everything is some JS API that then companies use some bloated framework to utilize.
- bastawhiz 4y ago
  You can't do what you're describing with just HTML, but it's only a handful of lines of js to get a media stream from getUserMedia and pipe it into a video element. In fact, it's probably more HTML than js.
stakkur 4y ago
Reason #368 why I cover all cameras and disable mics by default, and only uncover/enable when in use.
- deleted 4y ago
  [deleted]
- cyral 4y ago
  You cover your phone camera? This only works on mobile and pops up the native Android/iOS camera which requires you to actually take the picture (and at least on iOS, asks you to confirm you would like to use the photo before going back to the website)
  - officialjunk 4y ago
    i do, but only the front facing camera though pointing at my face.
  - Silhouette 4y ago
    I habitually cover the camera on my phone when I'm not using it. It's just common sense for any connected device running complicated software without hardware switches to turn the sensors off reliably. The latter would be better of course but there wasn't a practical option for it last time I was looking for a new phone.
    - ridgered4 4y ago
      Last time I looked only the pinephone had hardware switches, and they were under the case making it kind of clunky to turn them on and off.
      - Silhouette 4y ago
        It's definitely a niche market at the moment. It really shouldn't be given the implications of connected devices, sensors like cameras and microphones, and where those devices get taken by many of their owners. I believe we would have a much safer and more resilient society today if the norm had become for connected devices to follow the principle of least privilege and for there to be complete transparency about how any kinds of sensors and any kind of remote communication operated. But apparently the market has spoken (even though in most cases it was only given one "choice" of what to say).
destructionator 4y ago
Actually a pity it doesn't work on the non-mobile; many of my computers have webcams now and it is kinda convenient to have this (and of course, you ought to always be able to bypass the camera as a user. really perhaps it should be part of the file picker itself but lol those things are so overloaded already)
- humanistbot 4y ago
  Works on my desktop, using Firefox 104.0.1.
  - cyral 4y ago
    Did you by chance click the JavaScript demo that totetsu posted? That demo uses the JavaScript MediaDevices API to stream the camera, which is different than the original post that is a file picker that opens the camera on mobile.
totetsu 4y ago
This is a site that shows the camera feed full screen and inverts in with css https://nega.radioac.dev/ https://nega.radioac.dev/ I hacked it together in half an hour to give people a way to look at the uninverted version of my inverted analogue photos with their phones at exhibitions. most people were more excited to play with it on their phone than by the photos I took days making. :'( [edit oops this javascript ]
- recursive 4y ago
  I'm getting a cert error. Subject is *.fortinet.com, not nega.radioac.dev. Edit, the second: Disregard. It's definitely a corporate middlebox on my end.
  - renewiltord 4y ago
    Works for me.
  - totetsu 4y ago
    Maybe you're behind a firewall with some filtering, and it doesn't like the domain name or something? browsers treat '.dev' domains a bit more strictly than the norm, so the browser doesn't like the redirect?? that's just my guess sorry.
    - unknownaccount 4y ago
      Can you elaborate on how browsers treat .dev differently? its the first im hearing of this and it sounds interesting, thx.
      - mminer237 4y ago
        The entire TLD is on the HSTS preload list, so .dev domains are only accessible via HTTPS. You can't use them unencrypted.
  - Vendan 4y ago
    fortinet is a cyber security software company, that makes a product called fortigate that does SSL MITM to decrypt and monitor/filter your traffic. Probably want to poke your IT team or get very concerned about your ISP...
hughes 4y ago
I feel like the default file input behavior is more user-friendly. Giving the user a choice between taking a new photo or uploading an existing one just seems way more flexible, and this is already how the file input works without the `capture` attribute.
- spicybright 4y ago
  Same. Phones have really good default native UIs for these "old" style input forms.
hardnose 4y ago
Hyper Text Markup Language ...why is a markup language for hypertext able to control my device's camera? Why have all the relevant standards bodies associated with this language and protocol gotten on board with turning a markup display language into a full-blown OS?
- jrockway 4y ago
  Because it's the easiest way to distribute software. The alternative to standards is every browser vendor doing their own thing, and "this website only works on IE". Remember the bad old days of the web where every bank required Windows because their UI was implemented with ActiveX? Standards killed that and now you can view your bank account on Linux. WebRTC has its security downsides, but probably better than running a binary from the Chinese government as root so you can video call someone.
  - unixbane 4y ago
    > Because it's the easiest way to distribute software. Not really, webdev is a pain just as much as making a native Windows app or Go binary. Programming is bullshit all the way down. The moment you try to do anything correct in absolutely any modern software stack or framework, you will have to do a bunch of hacks to indirectly force stuff into doing what's needed for your program to be correct. Of course in practice everyone just skips this part, contributing to the said problem. > Standards killed that and now you can view your bank account on Linux. But I literally can't view certain bank websites with Firefox.
    - jrockway 4y ago
      > webdev is a pain just as much as making a native Windows app or Go binary I didn't mean to imply it was easier for the programmer. It's harder! But it's easier for the end user. Click link, app loads. Next best thing to being bundled with the OS.
- cyral 4y ago
  It's not really controlling the camera. You need the JavaScript MediaDevices API for that. It just launches the mobile camera and requests that you take a picture, and the picture of never returned to the site until you confirm it. (Similar to any app that shows the "Take a Picture" or "Choose from Gallery" dialog when uploading an image. That is actually the default if you don't specify that the photo should come from the filesystem or camera) Regarding the web becoming its own OS.. there is no easier way to make cross platform applications these days. If every OS vendor could agree on some standard desktop API, there would be a lot more native apps.
tialaramex 4y ago
Hmm. I couldn't find an indication of whether this requires Secure Context (ie only works with HTTPS or localhost) ? Secure Context seems (coupled with the permission check) like it's an appropriate requirement here but I didn't see whether it's actually enforced, and obviously as an HTML attribute rather than say a Javascript API it might have been forgotten.
- MrStonedOne 4y ago
  Secure context has never applied for form data and i see no reason why it would here. If it's acceptable to send the picture as a file upload over http then i see no reason why it wouldn't be acceptable to send a webcam captured picture. Why do you think it should or would?
- advisedwang 4y ago
  MDN [1] does not list the Screen Capture API, so presumably the capture HTML element is not included either. [1] https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts https://developer.mozilla.org/en-US/docs/Web/Security/Secure...
Waterluvian 4y ago
A lot of totally valid opinions out there about this, but I personally _love_ how the browser is becoming a very well-featured sandbox for shipping applications. For personal fun and learning, I'm making a complete 2D video game in ideally less than 1MB. It has 60fps graphics, full spatial audio, and gamepad support, all because the browser has a lot of these APIs that didn't exist when I was starting out my career. The only issue I'm having so far with the user experience is the desire to assume complete control of your keyboard the way a traditional PC game would, because browsers really don't want you to own _every_ key.
- djbusby 4y ago
  Are you using A-Frame? https://aframe.io/ https://aframe.io/
  - Waterluvian 4y ago
    Wow that's snazzy! But no, I'm using PixiJS because my game is 2D.
- croes 4y ago
  >because browsers really don't want you to own _every_ key. Wouldn't be really a sandbox anymore if they could
- cyral 4y ago
  And theres a LOT more APIs than people realize: https://developer.mozilla.org/en-US/docs/Web/API https://developer.mozilla.org/en-US/docs/Web/API Some interesting ones: - Screen recording/capture - Battery status - Barcode Detection - Bluetooth - Sensors (e.g. Accelerometer) - Wake/screen lock - Color picker - Vibration - MIDI - USB - Contacts picker - Presentation (AirPlay, Chromecast) - Virtual reality
  - shusaku 4y ago
    Any former geocities member us surely aware of the MIDI capability!
l1am0 4y ago
Would be good to replace the screenshot in the article with a live updating can i use widget: https://caniusewidgets.com/html-media-capture https://caniusewidgets.com/html-media-capture
- hn92726819 4y ago
  This doesn't work at all without JavaScript. I much prefer the picture to a blank region. Slightly tangent, but it seems like more services are no longer offering fallbacks. Twitter recently got rid of its tweet text fallback, and the caniusewidgets doesn't offer a png fallback (at first glance). https://github.com/badges/shields https://github.com/badges/shields uses svg so you can do this without complaining about bandwidth too. Would be funny to include this in an article about yet another privacy-breaking feature of web.
0xbadcafebee 4y ago
There are several websites that offer both screen capture and camera video/audio capture, and thus recording, purely through HTML5. It's pretty slick.
doliveira 4y ago
In this topic, I wish more tools like databases, Big Data services, etc used WebSocket-based protocols. It would unlock so many cool applications straight within the browser.
pmontra 4y ago
> all of those unsupported browsers are actually desktop browsers where there isn’t a front facing or back facing camera Any laptop sold in the last 10+ years?
- _carbyau_ 4y ago
  I have a desktop computer. But thanks to COVID days even I have a webcam attached. Limiting it to non-desktop/laptop use does seem to be an oversight.
zikduruqe 4y ago
https://critter.camera https://critter.camera
- uneoneuno 4y ago
  Have you used this before? This looks great - much lower overhead than what I was doing with a Pi, USB camera, and motionpi
  - zikduruqe 4y ago
    I have, but limited usage. Just for monitoring the dogs when I'd run to the store or something. I've had it bookmarked for years in the event one day I needed it for something.
- spicybright 4y ago
  What an awesome idea! Was thinking of doing raspi craziness for capturing birds out my window. Why do that when you can duct tape an old phone to the window lol
  - _tom_ 4y ago
    There are apps for turning old phones into dashcams and security cams, too. Why waste an old phone?
    - Starmina 4y ago
      Not the same but for a more pro approach and allowing to stream to a RTSP Server I use LARIX Broadcaster, which is both available on android and iOS and it's just superb to turn an old phone into a camera, ofc you'd need an other software to actually detect movement and such from the RTSP feed. Scrypted can do that (for example)
      - zikduruqe 4y ago
        A friend of mine swears by https://zoneminder.com https://zoneminder.com
rektide 4y ago
Great seeing coherent cool capabiliites mase so east, taking & growing thr input element like this. It does make me more than a bit sad how the web is bifurcating between mobile & desktop. We keep justifying it to ourselves, saying, yeah, that's not as important on desktop, and nit implementing. This pile of discrepancies built by non-implementations keeps growing though & it's not cool. Web Share & Web Share Target not being on desktop is another mobile only example, of more tech that's just good for PWA's in general/everywhere.
TechSquidTV 4y ago
The one and only Feross randomly gracing our presence :clap:
j7j7j7j7 4y ago
Has been available for a long time.... I like https://meet.jit.si/ https://meet.jit.si/ or zoom.com when I have to
Linda703 4y ago
[dead]
polyrand 4y ago
HTML media capture is superb. I have successfully used it in production, and I was surprised by how simple it was and how well it worked. I learned about it from here[0]. It's cool because if you have an app that requires users uploading pictures, you just need an HTML <form>, an <input> with `capture`, and a few lines of code in the backend. I thought I would need to do some JavaScript gymnastics, and it ended up taking just an afternoon to design, develop, and deploy. [0]: https://anssiko.github.io/html-media-capture/ https://anssiko.github.io/html-media-capture/
- aesyondu 4y ago
  Hmm, I don't get it. In the site you linked I see "It appears @capture is not supported and @accept is supported." for Safari, Firefox and Chrome on MacOS. I see two buttons, Choose File and Upload. Upload is just a placeholder that shows a 405 error so I'll ignore that. Choose File just lets me choose a file, but there's no option to take a picture. What am I missing here? EDIT: nvm I see that it only works on mobile: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture#examples https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes...
sam1r 4y ago
Anyone else denied access to the page due to rate limiting?? >> Check back later once traffic has gone down.
- taftster 4y ago
  Yup. This happens sometimes when a site is linked from the HN home page.
- dtparr 4y ago
  Yeah, looks like it's been slashdotted. (Or whatever the appropriate verbing of an aggregation site is in 2022).
  - matbatt38 4y ago
    I think its "hugged to death" nowdays
- EastSmith 4y ago
  So not only Cloudflare does not serve the website, it also serve another site with links to Cloudflare.
bob1029 4y ago
We've been using this approach for a long time in a B2B setting. The fallback to a file picker is really elegant for our use cases wherein some users operate on an old-school desktop PC rather than a mobile device. The state of the modern web is pretty incredible now. There really isn't any kind of application that I would feel uncomfortable building this way in 2022. For me, native has evolved into pure overhead (unless you need to light up some shiny device-specific feature that will inevitably become deprecated within 2-3 years). I also understand those who believe their product's main selling point is that it exists as an offering in the various app stores. For us, we actually have a value proposition beyond "it has a native app icon". If I had to attribute my confidence in the web to any one specific aspect, it would have to be CSS grid by a very wide margin. Realizing that I could achieve the exact layout I want on any range of viewport without having to pull down a 3rd party dependency was a huge step for me.
- quintussss 4y ago
  This mindset is exactly why we all have to suffer with slugish electron apps and bloated websites instead of using fast, native apps written in something like Qt.
  - moring 4y ago
    The actual reason is that nobody (probably not even you) wants to pay the substantially higher price of developing native apps, nor do they want the suffer the loads of crash bugs that inevitably come with using lower-level technology. The mindset of developers is what it is because the requirements demand so.
    - account42 4y ago
      Oh please, "loads of crash bugs" are not and were never inevitable. And for the user experience, an exception that prevents you from doing what you want is not even that much better than a hard crash. And let's not pretent that users are ever given a choice in the quality vs. cost tradeoff except for looking for a different program entirely. And even that is often not an option because the software needs to interact with systems that are actively hostile towards third-party clients. We shouldn't excuse mediocre software just because the market puts up with mediocrity.
sunjester 4y ago
"This website has been temporarily rate limited"
- alwillis 4y ago
  Same. But it’s in Google’s cache and I was able to read it from there.
tambourine_man 4y ago
I’m getting a Cloudflare rate limit warning. I didn’t know this was a thing.
- crtasm 4y ago
  It's not just proxying the site, it's using https://workers.cloudflare.com/ https://workers.cloudflare.com/
mrb 4y ago
Mirror: https://web.archive.org/web/20220906155028/https://austingil.com/html-capture-attribute/ https://web.archive.org/web/20220906155028/https://austingil...
elina123 4y ago
elina123 4y ago
buro9 4y ago
Archive link: https://web.archive.org/web/20220902181141/https://austingil.com/html-capture-attribute/ https://web.archive.org/web/20220902181141/https://austingil...
acejam 4y ago
"This website has been temporarily rate limited" TIL you shouldn't run a blog on Cloudflare Workers due to rate limiting.
- judge2020 4y ago
  This only applies to the free plan[0] - Higher plans work for excessive RPS, but of course it'll balloon your bill with millions of requests. Given this is a blog, a better solution would've been Cloudflare Pages[1], which is their own static site hosting service and provides unlimited requests/bandwidth for free. 0: https://developers.cloudflare.com/workers/platform/pricing/ https://developers.cloudflare.com/workers/platform/pricing/ 1: https://pages.cloudflare.com/#pricing https://pages.cloudflare.com/#pricing
dakrulski 4y ago
I can't get over the fact, that he is using "a public internet URL" to tunnel the traffic to his local server, just to watch it on his phone. What he should have done: - Make his local server listen on his local ip like <<local-lan-ip>>:3000 instead of just 127.0.0.1:3000 - Connect his cellphone to his local lan with wifi. - Look at the site on <<local-lan-ip>>:3000 on his cellphone. I would never make a connection from a public Domain to my local machine just to test something. It's just too risky.
- jonas-w 4y ago
  Same. It's very weird that he did that. It is even more work and doesn't bring him any benefit. I want to know if he had any reason to do so.
- bot41 4y ago
  Maybe he can't connect his phone to the same network the local server is on? Maybe he wants to share the URL to people not on the same network?
- water8 4y ago
  You know that a URL can be mapped to any IP including private address ranges via DNS right?
kazinator 4y ago
Currently doesn't work on the desktop: you get a file picker. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes... If you care about desktop users at all, you can't use this, except in a mobile-only version of your site or application.
superasn 4y ago
Another cool website that I came across a few days ago is https://vdo.ninja/ https://vdo.ninja/ (create reusable invite option) which also uses the HTML camera APIs to connect your mobile phone to OBS. Both the audio and video quality I get from my phone is at par or sometimes even superior to my laptop's webcam. This video tutorial(1) explains the setup really well. Kudos to whoever made this free site and also the modern browser tech for making this possible. (1) https://www.youtube.com/watch?v=ArVDKf2QK1s https://www.youtube.com/watch?v=ArVDKf2QK1s
- AgentME 4y ago
  VDO Ninja is great. I've used it to stream on Twitch with a friend, so that each of us could have a live video capture in the Twitch stream. (The main streamer uses OBS, added a browser source pointing to a VDO Ninja room, and then the other person joins the VDO Ninja room and streams their own video feed into it.)
mxfh 4y ago
This and the Web Speech API were quite unexpected things to discover lately. Even quite robust browser support, besides speech recognition missing on Firefox. Didn't expect to have that easy access to TTS/Speech Synthesis. https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_... https://www.google.com/intl/de/chrome/demos/speech.html https://www.google.com/intl/de/chrome/demos/speech.html
- mmastrac 4y ago
  I suspect we're still waiting on Firefox's multi-language speech database in Common Voice to get processed into some useful offline learning models. We can't be that far away from a googleless speech input world.
- vgel 4y ago
  The TTS apis are really fun. They allow pitch control, too: "twin=75 kill=75 twin=115 kill=115 lit=130 till=130 star=110 how=100 i=100 won=90 dur=90 what=85 you=80=2 are=70".split(" ").map(s=>{u=new SpeechSynthesisUtterance((t=s.split('='))[0]);u.pitch=parseInt(t[1]||100)/100;u.rate=parseFloat(t[2]??1.5);speechSynthesis.speak(u)})
hirebackenddev 4y ago
sssusie 4y ago
fine
kixpanganiban 4y ago
"You can access a user's camera with just HTML" is really misleading, imo. The outlined approach lets you access an image (or video) that is the output of the platform's camera, but you don't actually get to access the camera itself.

576 points by feross 4y ago

Demo is on MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture#examples https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes...

paulirish 4y ago
A more minimal demo: https://simpl.info/mediacapture/ https://simpl.info/mediacapture/ (Everything remains local) AFAIK, this feature is mobile only.

murkt 4y ago

I have a webcam for capturing pictures on my "desktop", so browser could use that. Not sure if it would be useful

encryptluks2 4y ago

That is pretty cool. Been wanting to create a site with a blurred backdrop effect around text, but a camera background to simulate an augmented reality style. Wish something like this could work on desktop as well though. It is a shame really that more features don't get encapsulated into elements recently and everything is some JS API that then companies use some bloated framework to utilize.

bastawhiz 4y ago
You can't do what you're describing with just HTML, but it's only a handful of lines of js to get a media stream from getUserMedia and pipe it into a video element. In fact, it's probably more HTML than js.

stakkur 4y ago

Reason #368 why I cover all cameras and disable mics by default, and only uncover/enable when in use.

deleted 4y ago
[deleted]
cyral 4y ago
You cover your phone camera? This only works on mobile and pops up the native Android/iOS camera which requires you to actually take the picture (and at least on iOS, asks you to confirm you would like to use the photo before going back to the website)
- officialjunk 4y ago
  i do, but only the front facing camera though pointing at my face.
- Silhouette 4y ago
  I habitually cover the camera on my phone when I'm not using it. It's just common sense for any connected device running complicated software without hardware switches to turn the sensors off reliably. The latter would be better of course but there wasn't a practical option for it last time I was looking for a new phone.
  - ridgered4 4y ago
    Last time I looked only the pinephone had hardware switches, and they were under the case making it kind of clunky to turn them on and off.
    - Silhouette 4y ago
      It's definitely a niche market at the moment. It really shouldn't be given the implications of connected devices, sensors like cameras and microphones, and where those devices get taken by many of their owners. I believe we would have a much safer and more resilient society today if the norm had become for connected devices to follow the principle of least privilege and for there to be complete transparency about how any kinds of sensors and any kind of remote communication operated. But apparently the market has spoken (even though in most cases it was only given one "choice" of what to say).

destructionator 4y ago

Actually a pity it doesn't work on the non-mobile; many of my computers have webcams now and it is kinda convenient to have this (and of course, you ought to always be able to bypass the camera as a user. really perhaps it should be part of the file picker itself but lol those things are so overloaded already)

humanistbot 4y ago
Works on my desktop, using Firefox 104.0.1.
- cyral 4y ago
  Did you by chance click the JavaScript demo that totetsu posted? That demo uses the JavaScript MediaDevices API to stream the camera, which is different than the original post that is a file picker that opens the camera on mobile.

totetsu 4y ago

This is a site that shows the camera feed full screen and inverts in with css https://nega.radioac.dev/ https://nega.radioac.dev/ I hacked it together in half an hour to give people a way to look at the uninverted version of my inverted analogue photos with their phones at exhibitions. most people were more excited to play with it on their phone than by the photos I took days making. :'( [edit oops this javascript ]

recursive 4y ago
I'm getting a cert error. Subject is *.fortinet.com, not nega.radioac.dev. Edit, the second: Disregard. It's definitely a corporate middlebox on my end.
- renewiltord 4y ago
  Works for me.
- totetsu 4y ago
  Maybe you're behind a firewall with some filtering, and it doesn't like the domain name or something? browsers treat '.dev' domains a bit more strictly than the norm, so the browser doesn't like the redirect?? that's just my guess sorry.
  - unknownaccount 4y ago
    Can you elaborate on how browsers treat .dev differently? its the first im hearing of this and it sounds interesting, thx.
    - mminer237 4y ago
      The entire TLD is on the HSTS preload list, so .dev domains are only accessible via HTTPS. You can't use them unencrypted.
- Vendan 4y ago
  fortinet is a cyber security software company, that makes a product called fortigate that does SSL MITM to decrypt and monitor/filter your traffic. Probably want to poke your IT team or get very concerned about your ISP...

hughes 4y ago

I feel like the default file input behavior is more user-friendly. Giving the user a choice between taking a new photo or uploading an existing one just seems way more flexible, and this is already how the file input works without the `capture` attribute.

spicybright 4y ago
Same. Phones have really good default native UIs for these "old" style input forms.

hardnose 4y ago

Hyper Text Markup Language ...why is a markup language for hypertext able to control my device's camera? Why have all the relevant standards bodies associated with this language and protocol gotten on board with turning a markup display language into a full-blown OS?

jrockway 4y ago
Because it's the easiest way to distribute software. The alternative to standards is every browser vendor doing their own thing, and "this website only works on IE". Remember the bad old days of the web where every bank required Windows because their UI was implemented with ActiveX? Standards killed that and now you can view your bank account on Linux. WebRTC has its security downsides, but probably better than running a binary from the Chinese government as root so you can video call someone.
- unixbane 4y ago
  > Because it's the easiest way to distribute software. Not really, webdev is a pain just as much as making a native Windows app or Go binary. Programming is bullshit all the way down. The moment you try to do anything correct in absolutely any modern software stack or framework, you will have to do a bunch of hacks to indirectly force stuff into doing what's needed for your program to be correct. Of course in practice everyone just skips this part, contributing to the said problem. > Standards killed that and now you can view your bank account on Linux. But I literally can't view certain bank websites with Firefox.
  - jrockway 4y ago
    > webdev is a pain just as much as making a native Windows app or Go binary I didn't mean to imply it was easier for the programmer. It's harder! But it's easier for the end user. Click link, app loads. Next best thing to being bundled with the OS.
cyral 4y ago
It's not really controlling the camera. You need the JavaScript MediaDevices API for that. It just launches the mobile camera and requests that you take a picture, and the picture of never returned to the site until you confirm it. (Similar to any app that shows the "Take a Picture" or "Choose from Gallery" dialog when uploading an image. That is actually the default if you don't specify that the photo should come from the filesystem or camera) Regarding the web becoming its own OS.. there is no easier way to make cross platform applications these days. If every OS vendor could agree on some standard desktop API, there would be a lot more native apps.

tialaramex 4y ago

Hmm. I couldn't find an indication of whether this requires Secure Context (ie only works with HTTPS or localhost) ? Secure Context seems (coupled with the permission check) like it's an appropriate requirement here but I didn't see whether it's actually enforced, and obviously as an HTML attribute rather than say a Javascript API it might have been forgotten.

MrStonedOne 4y ago
Secure context has never applied for form data and i see no reason why it would here. If it's acceptable to send the picture as a file upload over http then i see no reason why it wouldn't be acceptable to send a webcam captured picture. Why do you think it should or would?
advisedwang 4y ago
MDN [1] does not list the Screen Capture API, so presumably the capture HTML element is not included either. [1] https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts https://developer.mozilla.org/en-US/docs/Web/Security/Secure...

Waterluvian 4y ago

A lot of totally valid opinions out there about this, but I personally _love_ how the browser is becoming a very well-featured sandbox for shipping applications. For personal fun and learning, I'm making a complete 2D video game in ideally less than 1MB. It has 60fps graphics, full spatial audio, and gamepad support, all because the browser has a lot of these APIs that didn't exist when I was starting out my career. The only issue I'm having so far with the user experience is the desire to assume complete control of your keyboard the way a traditional PC game would, because browsers really don't want you to own _every_ key.

djbusby 4y ago
Are you using A-Frame? https://aframe.io/ https://aframe.io/
- Waterluvian 4y ago
  Wow that's snazzy! But no, I'm using PixiJS because my game is 2D.
croes 4y ago
>because browsers really don't want you to own _every_ key. Wouldn't be really a sandbox anymore if they could
cyral 4y ago
And theres a LOT more APIs than people realize: https://developer.mozilla.org/en-US/docs/Web/API https://developer.mozilla.org/en-US/docs/Web/API Some interesting ones: - Screen recording/capture - Battery status - Barcode Detection - Bluetooth - Sensors (e.g. Accelerometer) - Wake/screen lock - Color picker - Vibration - MIDI - USB - Contacts picker - Presentation (AirPlay, Chromecast) - Virtual reality
- shusaku 4y ago
  Any former geocities member us surely aware of the MIDI capability!

l1am0 4y ago

Would be good to replace the screenshot in the article with a live updating can i use widget: https://caniusewidgets.com/html-media-capture https://caniusewidgets.com/html-media-capture

hn92726819 4y ago
This doesn't work at all without JavaScript. I much prefer the picture to a blank region. Slightly tangent, but it seems like more services are no longer offering fallbacks. Twitter recently got rid of its tweet text fallback, and the caniusewidgets doesn't offer a png fallback (at first glance). https://github.com/badges/shields https://github.com/badges/shields uses svg so you can do this without complaining about bandwidth too. Would be funny to include this in an article about yet another privacy-breaking feature of web.

0xbadcafebee 4y ago

There are several websites that offer both screen capture and camera video/audio capture, and thus recording, purely through HTML5. It's pretty slick.

doliveira 4y ago

In this topic, I wish more tools like databases, Big Data services, etc used WebSocket-based protocols. It would unlock so many cool applications straight within the browser.

pmontra 4y ago

> all of those unsupported browsers are actually desktop browsers where there isn’t a front facing or back facing camera Any laptop sold in the last 10+ years?

_carbyau_ 4y ago
I have a desktop computer. But thanks to COVID days even I have a webcam attached. Limiting it to non-desktop/laptop use does seem to be an oversight.

zikduruqe 4y ago

https://critter.camera https://critter.camera

uneoneuno 4y ago
Have you used this before? This looks great - much lower overhead than what I was doing with a Pi, USB camera, and motionpi
- zikduruqe 4y ago
  I have, but limited usage. Just for monitoring the dogs when I'd run to the store or something. I've had it bookmarked for years in the event one day I needed it for something.
spicybright 4y ago
What an awesome idea! Was thinking of doing raspi craziness for capturing birds out my window. Why do that when you can duct tape an old phone to the window lol
- _tom_ 4y ago
  There are apps for turning old phones into dashcams and security cams, too. Why waste an old phone?
  - Starmina 4y ago
    Not the same but for a more pro approach and allowing to stream to a RTSP Server I use LARIX Broadcaster, which is both available on android and iOS and it's just superb to turn an old phone into a camera, ofc you'd need an other software to actually detect movement and such from the RTSP feed. Scrypted can do that (for example)
    - zikduruqe 4y ago
      A friend of mine swears by https://zoneminder.com https://zoneminder.com

rektide 4y ago

Great seeing coherent cool capabiliites mase so east, taking & growing thr input element like this. It does make me more than a bit sad how the web is bifurcating between mobile & desktop. We keep justifying it to ourselves, saying, yeah, that's not as important on desktop, and nit implementing. This pile of discrepancies built by non-implementations keeps growing though & it's not cool. Web Share & Web Share Target not being on desktop is another mobile only example, of more tech that's just good for PWA's in general/everywhere.

TechSquidTV 4y ago

The one and only Feross randomly gracing our presence :clap:

j7j7j7j7 4y ago

Has been available for a long time.... I like https://meet.jit.si/ https://meet.jit.si/ or zoom.com when I have to

Linda703 4y ago

[dead]

polyrand 4y ago

HTML media capture is superb. I have successfully used it in production, and I was surprised by how simple it was and how well it worked. I learned about it from here[0]. It's cool because if you have an app that requires users uploading pictures, you just need an HTML <form>, an <input> with `capture`, and a few lines of code in the backend. I thought I would need to do some JavaScript gymnastics, and it ended up taking just an afternoon to design, develop, and deploy. [0]: https://anssiko.github.io/html-media-capture/ https://anssiko.github.io/html-media-capture/

aesyondu 4y ago
Hmm, I don't get it. In the site you linked I see "It appears @capture is not supported and @accept is supported." for Safari, Firefox and Chrome on MacOS. I see two buttons, Choose File and Upload. Upload is just a placeholder that shows a 405 error so I'll ignore that. Choose File just lets me choose a file, but there's no option to take a picture. What am I missing here? EDIT: nvm I see that it only works on mobile: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture#examples https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes...

sam1r 4y ago

Anyone else denied access to the page due to rate limiting?? >> Check back later once traffic has gone down.

taftster 4y ago
Yup. This happens sometimes when a site is linked from the HN home page.
dtparr 4y ago
Yeah, looks like it's been slashdotted. (Or whatever the appropriate verbing of an aggregation site is in 2022).
- matbatt38 4y ago
  I think its "hugged to death" nowdays
EastSmith 4y ago
So not only Cloudflare does not serve the website, it also serve another site with links to Cloudflare.

bob1029 4y ago

We've been using this approach for a long time in a B2B setting. The fallback to a file picker is really elegant for our use cases wherein some users operate on an old-school desktop PC rather than a mobile device. The state of the modern web is pretty incredible now. There really isn't any kind of application that I would feel uncomfortable building this way in 2022. For me, native has evolved into pure overhead (unless you need to light up some shiny device-specific feature that will inevitably become deprecated within 2-3 years). I also understand those who believe their product's main selling point is that it exists as an offering in the various app stores. For us, we actually have a value proposition beyond "it has a native app icon". If I had to attribute my confidence in the web to any one specific aspect, it would have to be CSS grid by a very wide margin. Realizing that I could achieve the exact layout I want on any range of viewport without having to pull down a 3rd party dependency was a huge step for me.

quintussss 4y ago
This mindset is exactly why we all have to suffer with slugish electron apps and bloated websites instead of using fast, native apps written in something like Qt.
- moring 4y ago
  The actual reason is that nobody (probably not even you) wants to pay the substantially higher price of developing native apps, nor do they want the suffer the loads of crash bugs that inevitably come with using lower-level technology. The mindset of developers is what it is because the requirements demand so.
  - account42 4y ago
    Oh please, "loads of crash bugs" are not and were never inevitable. And for the user experience, an exception that prevents you from doing what you want is not even that much better than a hard crash. And let's not pretent that users are ever given a choice in the quality vs. cost tradeoff except for looking for a different program entirely. And even that is often not an option because the software needs to interact with systems that are actively hostile towards third-party clients. We shouldn't excuse mediocre software just because the market puts up with mediocrity.

sunjester 4y ago

"This website has been temporarily rate limited"

alwillis 4y ago
Same. But it’s in Google’s cache and I was able to read it from there.

tambourine_man 4y ago

I’m getting a Cloudflare rate limit warning. I didn’t know this was a thing.

crtasm 4y ago
It's not just proxying the site, it's using https://workers.cloudflare.com/ https://workers.cloudflare.com/

mrb 4y ago

Mirror: https://web.archive.org/web/20220906155028/https://austingil.com/html-capture-attribute/ https://web.archive.org/web/20220906155028/https://austingil...

elina123 4y ago

buro9 4y ago

Archive link: https://web.archive.org/web/20220902181141/https://austingil.com/html-capture-attribute/ https://web.archive.org/web/20220902181141/https://austingil...

acejam 4y ago

"This website has been temporarily rate limited" TIL you shouldn't run a blog on Cloudflare Workers due to rate limiting.

judge2020 4y ago
This only applies to the free plan[0] - Higher plans work for excessive RPS, but of course it'll balloon your bill with millions of requests. Given this is a blog, a better solution would've been Cloudflare Pages[1], which is their own static site hosting service and provides unlimited requests/bandwidth for free. 0: https://developers.cloudflare.com/workers/platform/pricing/ https://developers.cloudflare.com/workers/platform/pricing/ 1: https://pages.cloudflare.com/#pricing https://pages.cloudflare.com/#pricing

dakrulski 4y ago

I can't get over the fact, that he is using "a public internet URL" to tunnel the traffic to his local server, just to watch it on his phone. What he should have done: - Make his local server listen on his local ip like <<local-lan-ip>>:3000 instead of just 127.0.0.1:3000 - Connect his cellphone to his local lan with wifi. - Look at the site on <<local-lan-ip>>:3000 on his cellphone. I would never make a connection from a public Domain to my local machine just to test something. It's just too risky.

jonas-w 4y ago
Same. It's very weird that he did that. It is even more work and doesn't bring him any benefit. I want to know if he had any reason to do so.
bot41 4y ago
Maybe he can't connect his phone to the same network the local server is on? Maybe he wants to share the URL to people not on the same network?
water8 4y ago
You know that a URL can be mapped to any IP including private address ranges via DNS right?

kazinator 4y ago

Currently doesn't work on the desktop: you get a file picker. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes... If you care about desktop users at all, you can't use this, except in a mobile-only version of your site or application.

superasn 4y ago

Another cool website that I came across a few days ago is https://vdo.ninja/ https://vdo.ninja/ (create reusable invite option) which also uses the HTML camera APIs to connect your mobile phone to OBS. Both the audio and video quality I get from my phone is at par or sometimes even superior to my laptop's webcam. This video tutorial(1) explains the setup really well. Kudos to whoever made this free site and also the modern browser tech for making this possible. (1) https://www.youtube.com/watch?v=ArVDKf2QK1s https://www.youtube.com/watch?v=ArVDKf2QK1s

AgentME 4y ago
VDO Ninja is great. I've used it to stream on Twitch with a friend, so that each of us could have a live video capture in the Twitch stream. (The main streamer uses OBS, added a browser source pointing to a VDO Ninja room, and then the other person joins the VDO Ninja room and streams their own video feed into it.)

mxfh 4y ago

This and the Web Speech API were quite unexpected things to discover lately. Even quite robust browser support, besides speech recognition missing on Firefox. Didn't expect to have that easy access to TTS/Speech Synthesis. https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_... https://www.google.com/intl/de/chrome/demos/speech.html https://www.google.com/intl/de/chrome/demos/speech.html

mmastrac 4y ago
I suspect we're still waiting on Firefox's multi-language speech database in Common Voice to get processed into some useful offline learning models. We can't be that far away from a googleless speech input world.
vgel 4y ago
The TTS apis are really fun. They allow pitch control, too: "twin=75 kill=75 twin=115 kill=115 lit=130 till=130 star=110 how=100 i=100 won=90 dur=90 what=85 you=80=2 are=70".split(" ").map(s=>{u=new SpeechSynthesisUtterance((t=s.split('='))[0]);u.pitch=parseInt(t[1]||100)/100;u.rate=parseFloat(t[2]??1.5);speechSynthesis.speak(u)})

hirebackenddev 4y ago

sssusie 4y ago

fine

kixpanganiban 4y ago

"You can access a user's camera with just HTML" is really misleading, imo. The outlined approach lets you access an image (or video) that is the output of the platform's camera, but you don't actually get to access the camera itself.