html5 device - audio capture in browsers

In the latest specifications of html there are many interesting buns and one of them, about which, so far, no one says - this is the device element . It provides access to devices such as a camera or microphone. And, although this element is not yet supported by any of the browsers, this is the future of web development.

 interface HTMLDeviceElement : HTMLElement { attribute DOMString type; readonly attribute any data; }; 

HTML5 is a new generation standard for browsers, the latest development of the WHATWG and today implemented by browser developers. The development of the specification took more than five years and it is still under development. HTML5 has made a big step in turning the browser into a stronger application platform with some new features. WebSockets and Server-sent events are open to flexible network applications, and media elements and the canvas element can be used to seamlessly embed new content types on web pages. What will be the next step in HTML?

The answer to the above question will give the opportunity to control new types of input devices. The device html element provides access to a device that provides access to devices such as a microphone or webcam. The code snippet below shows how the device element and the Stream API can be used to record a short audio clip. Please note that the device element and its associated APIs are not yet available in any browser and they can change before the browser appears. In any case, while the code looks like this:
')

 <p>Select device: <device type="audio_capture" id="media_device"></p> <input type="button" id="record_ctl_but" value="Record" disabled></input> 

The page markup contains a link to the device indicated by the device tag and a button. The attribute tag device "type" is specified as "audio_capture" in order to select a device for recording audio.

 // in window.onload document.getElementById("media_device").onchange = function () { // ready to record audioStream = this.data; recordCtlBut.disabled = false; }; 

When a device is selected, a change event is triggered, to which you can hang a callback to react to changes. The data property is a Stream object that represents the selected device.

 // in window.onload recordCtlBut = document.getElementById("record_ctl_but"); recordCtlBut.onclick = function () { if (!recorder) { // start recording recordCtlBut.value = "Stop"; recorder = audioStream.record(); // set the maximum audio clip length to 10 seconds recordTimer = setTimeout(stopRecording, 10000); } else stopRecording(); }; 

The button is used for both start and end recording, and by clicking on it we change the inscription from play to pause and vice versa. When we call the record method, the Stream object starts recording and returning the StreamRecorder object. With the help of a timer, we limit the record length to 10 seconds.

 function stopRecording() { clearTimeout(recordTimer); var audioFile = recorder.stop(); useAudioFile(audioFile); // reset to allow new recording session recorder = null; recordCtlBut.value = "Record"; } 

Recording stops when the “stop” button is pressed or 10 seconds have passed. Recorded audio data is retrieved from the StreamRecorder object by invoking the “stop” method. Recorded audio data is presented as a File object ( W3C File API ). Now the choice is yours what to do with the recorded video, perhaps you will publish it on the web server.

As mentioned above, device elements for an audio device can be an unlimited number. In a similar way, this can be used to select other types of devices, such as a webcam, in which case a video element will be used to display what it sees. Then you can make an online conference based on new fashion tags.
In conclusion, I want to say that the device element and its associated API are open for adding new devices that can be accessed using plug-ins in the browser. The browser becomes a powerful platform, meanwhile having the advantage of better portability of the application. Looking forward to the development of the specification.