Aloha to the last part of the series. I hope you’re prepared with the improvement surroundings. You recognize, secret Santa informed me that you’re very excited to leap in and construct the app.
On this article we’ll check out HTML5’s cool options resembling getUserMedia(), canvas and changing canvas paint into BLOB and for the sake of simplicity and lucid writing, I’ve divided the code right into a small chunk.
Primary HTML markup (index.html)
<!DOCTYPE html> <html> <head> <hyperlink href="type.css" rel="stylesheet" sort="textual content/css" /> <title>Feelings API Demo</title> </head> <physique> ... ... ... <video width="70%" autoplay></video> <canvas id="canvas" width="200" peak="200"></canvas> <span id="seize-button">Seize</span> <span id="use-this">Use this</span> ... ... ... <script src="lib/jquery-2.1.four.js"></script> <script src="script.js"></script> </physique> </html>
Primary CSS styling (fashion.css)
video, canvas background: #f9f9f9; border: strong 1px #f1f1f1; border-radius: 3px; margin: 20px zero; span show: inline-block; background: tomato; padding: 10px; margin: 20px zero; shade: #fff; border-radius: 3px; cursor: pointer; -webkit-consumer-choose: none; -moz-consumer-choose: none;
JavaScript (script.js)
1. getUserMedia() technique
The primary activity is to examine getUserMedia() technique in numerous browsers and normalize it by storing it within the navigator.getUserMedia.
// examine the varied vendor prefixed variations
navigator.mozGetUserMedia activity is to examine whether or not it's supported on that browser or not. For this, we'll use a easy if-else situation. Whether it is supported then we'll proceed, in any other case an alert message will seem. As per the MDN, the browser compatibility with getUserMedia() is sweet with the seller prefix.
// Verify that the browser helps getUserMedia.
// If it does not present an alert, in any other case proceed.
if (navigator.getUserMedia)
//code will go right here
else
alert('Sorry, your browser doesn't help getUserMedia');
Word: On the time of
The post Construct Reside Feelings Seize App Utilizing Feelings API (Half II) appeared first on DICKLEUNG DESIGN GROUP.
沒有留言:
張貼留言