The MediaStream represents synchronized streams of media. If there is no audio tracks, it returns an empty array and it will check video stream, if webcam connected, stream.getVideoTracks() returns an array of one MediaStreamTrack representing the stream from the webcam.function gotStream(stream) {    window.AudioContext = window.AudioContext || window.webkitAudioContext;    var audioContext = new AudioContext();    // Create an AudioNode from the stream    var mediaStreamSource = audioContext.createMediaStreamSource(stream);        // Connect it to destination to hear yourself    // or any other node for processing!    mediaStreamSource.connect(audioContext.destination); } navigator.getUserMedia({audio:true}, gotStream);

Web RTC introduced by World Wide Web Consortium (W3C). That supports browser-to-browser applications for voice calling, video chat, and P2P file sharing.Web RTC implements three API's as shown below −MediaStream − get access to the user's camera and microphone. RTCPeerConnection − get access to audio or video calling facility. RTCDataChannel − get access to peer-to-peer communication.Web RTC required peer-to-peer communication between browsers. This mechanism required signaling, network information, session control and media information. Web developers can choose a different mechanism to communicate between the browsers such as SIP or XMPP or any two-way communications

Web Workers allow for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions and allows long tasks to be executed without yielding to keep the page responsive.Web Workers don't stop by themselves but the page that started them can stop them by calling terminate() method.worker.terminate();A terminated Web Worker will no longer respond to messages or perform any additional computations. You cannot restart a worker; instead, you can create a new worker using the same URL.

Yes, it is possible. Create a pattern using the image, and then set the pattern to fillStyle.Here, obj is our image object −var context = canvas.getContext("2d"); var pattern = context.createPattern(obj, "repeat"); context.fillStyle = pattern;You need to manipulate the image to fit an arbitrary polygon −context.save(); context.setTransform(m11, m12, m21, m22, dx, dy); context.drawImage(obj); context.restore();

You can try to run the following code to detect folders in Safari −Array.prototype.forEach.call(e.dataTransfer.files, function (file) {    var r = new FileReader();    r.onload = function (event) {       addFile(file);    };    r.onerror = function (event) {       alert("Uploading folders isn't supported in Safari browser!");    }    r.readAsDataURL(file); });

Flash provides amazing GUI and lots of visual features for animations. It allows the user build everything inside a particular platform without a full integration into the browser wrapped inside the browser with the main scopes that are multimedia and other kinds of animation.HTML5 element gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions or do simple (and not so simple) animations.Here is a simple element which has only two specific attributes width and height plus all the core HTML5 attributes like id, name, and ... Read More

For HTML5 Canvas degree symbol, try to run the following code −                          body {             margin:5em;             background:#eee;             text-align:center          }          canvas {             background:#fff;             border:2px solid #ccc;             display:block;             margin:3em auto          }                              var c = document.getElementsByTagName('canvas')[0];          c.width = c.height = 300;          var context = c.getContext('2d');          context.font = "20px sans-serif";          context.fillText("212° Fahrenheit", 100, 100);          

To stop dragend’s default behavior, you need to detect if the mouse is over the drop target where you want to drop.This is what you should do only if you are hovering over my list − listContainer.insertBefore(source, myNode);Use jQuery −if ($(mylist).parent().find(":hover")) {    listContainer.insertBefore(source, myNode); }

A flex container is always the parent and a flex item is always the child. The scope of a flex formatting context is limited to a parent/child relationship. Descendants of a flex container beyond the children are not part of flex layout and will not accept flex properties. There are certain flex properties that apply only to flex containers − justify-content, flex-wrap andflex-direction There are certain flex properties that apply only to flex items” align-self flex-grow flex Always apply display: flex or display: inline-flex to a parent in order to apply flex properties to the child. Let ... Read More

To scale fonts, let us see an example.Canvas: 800px Font Size: 60pxYou need to use the following code for our example to scale font size based on canvas −var fontBase = 800; var fontSize = 60; function getFont() {    var ratio = fontSize / fontBase;    var cSize = canvas.width * ratio;    return (cSize |0) + 'px sans-serif'; }