9
I know there’s a way (I’ve even used it on at least 5 systems I’ve developed) to open the webcam by HTML5 and capture a photo (I do it using the canvas).
Example Camera Capture with Html5
But I had a question: I can capture this image from the camera, save it to a temporary video file and then send it to the server?
1
To audio/video capture has been the "Holy Grail" of web development long ago. For many years, we have used browser plug-ins (Flash or Silverlight) to do this. But everything has changed and is updated over time, come on !
History of getUserMedia()
If you don’t know the story, it’s worth saying that the way we came to API getUserMedia() is an interesting tale.
In recent years, several variations of "Apis of media capture". Many colleagues recognized the need for be able to access native devices on the web, but this led to development of a new specification. Things got so confused that the W3C finally decided to form a working group. The goal? Clean up the mess. The DAP Working Group (API Policy device) had the task of consolidating and standardizing the variety of proposals.
Example: HTML Media Capture
The capture of HTML media was the first attempt of the DAP to standardize the capture of media on the web. It works by overlapping
<input type="file">and adding new values for the Accept parameter.Users can take a screenshot on their own with webcam using capture=camera:
<input type="file" accept="image/*;capture=camera">Recording a video or audio is similar:
<input type="file" accept="video/*;capture=camcorder"> <input type="file" accept="audio/*;capture=microphone">Pretty good, isn’t it? I particularly like the reuse of a file entry. Semantically, this makes a lot of sense. The point weak of that specific "API" is in its ability to create effects in real time (for example, processing live webcam data on a and apply Webgl filters). HTML media capture only allows record a media file or take a screenshot at a time.
Support:
Android Browser 3.0 - one of the first implementations. Check out this video to see it in action. Google Chrome for Android (0.16) My recommendation is not to use it unless you are working with one of the mobile browsers above. Suppliers are migrating to getUserMedia(). It is very unlikely that anyone else implement long-term HTML media capture.
To get deeper, access the hyperlinks that have been passed!
Browser other questions tagged javascript html5 video
You are not signed in. Login or sign up in order to post.
Does that help you? https://www.html5rocks.com/pt/tutorials/getusermedia/intro/
– Rafael Augusto
https://github.com/aojsamurai/Webcam-html5-record-video-audio-getUserMedia
– Rafael Augusto
There’s also this library: Recordrtc. Capture in various formats and containers (gif, webm, vp8, vp9, webm...)
– nunks
<H3>Practical solution: Open Source</H3> There is a Recordrtc-to-PHP open-source project, records audio and video, and transfers the data via POST php: Rcordrtc-to-PHP-and-Ffmpeg.
– Renato Junior