Search completed in 1.29 seconds.
MediaDevices.enumerateDevices() - Web APIs
the media
devices method enumerate
devices() requests a list of the available media input and output
devices, such as microphones, cameras, headsets, and so forth.
... the returned promise is resolved with a mediadeviceinfo array describing the
devices.
... syntax var enumeratorpromise = navigator.media
devices.enumerate
devices(); return value a promise that receives an array of mediadeviceinfo objects when the promise is fulfilled.
...And 5 more matches
MediaDevices.getUserMedia() - Web APIs
the media
devices.getusermedia() method prompts the user for permission to use a media input which produces a mediastream with tracks containing the requested types of media.
... generally, you will access the media
devices singleton object using navigator.media
devices, like this: async function getmedia(constraints) { let stream = null; try { stream = await navigator.media
devices.getusermedia(constraints); /* use the stream */ } catch(err) { /* handle the error */ } } similarly, using the raw promises directly, the code looks like this: navigator.media
devices.getusermedia(constraints) .then...
...(function(stream) { /* use the stream */ }) .catch(function(err) { /* handle the error */ }); note: if the current document isn't loaded securely, navigator.media
devices will be undefined, and you cannot use getusermedia().
...And 18 more matches
MediaDevices.ondevicechange - Web APIs
the media
devices.ondevicechange property is an eventhandler which specifies a function to be called when the devicechange event occurs on a media
devices instance.
... this happens whenever the set of media
devices available to the user agent and, by extension, to the web site or app has changed.
... you can at any time use enumerate
devices() to get the updated list of available
devices.
...And 12 more matches
USB.getDevices() - Web APIs
the get
devices method of the usb interface returns a promise that resolves with an array of usbdevice objects for paired attached
devices.
... for information on pairing
devices, see usb.requestdevice().
... syntax usb.get
devices() parameters none.
...And 3 more matches
Bluetooth.getDevices() - Web APIs
the get
devices() method of bluetooth interface of web bluetooth api exposes the bluetooth
devices this origin is allowed to access.
... syntax var readerpromise = bluetooth.get
devices(); parameters none.
... return value a promise that resolves with an array of bluetooth
devices.
... specifications specification status comment web bluetooththe definition of 'get
devices()' in that specification.
MediaDevices.getDisplayMedia() - Web APIs
the media
devices interface's getdisplaymedia() method prompts the user to select and grant permission to capture the contents of a display or portion thereof (such as a window) as a mediastream.
... syntax var promise = navigator.media
devices.getdisplaymedia(constraints); parameters constraints optional an optional mediastreamconstraints object specifying requirements for the returned mediastream.
... async function startcapture(displaymediaoptions) { let capturestream = null; try { capturestream = await navigator.media
devices.getdisplaymedia(displaymediaoptions); } catch(err) { console.error("error: " + err); } return capturestream; } this uses await to asynchronously wait for getdisplaymedia() to resolve with a mediastream which contains the display contents as requested by the specified options.
... specifications specification status comment screen capturethe definition of 'media
devices.getdisplaymedia()' in that specification.
MediaDevices - Web APIs
the media
devices interface provides access to connected media input
devices like cameras and microphones, as well as screen sharing.
... enumerate
devices() obtains an array of information about the media input and output
devices available on the system.
...var video = document.queryselector('video'); var constraints = window.constraints = { audio: false, video: true }; var errorelement = document.queryselector('#errormsg'); navigator.media
devices.getusermedia(constraints) .then(function(stream) { var videotracks = stream.getvideotracks(); console.log('got stream with constraints:', constraints); console.log('using video device: ' + videotracks[0].label); stream.onremovetrack = function() { console.log('stream ended'); }; window.stream = stream; // make variable available to browser console video.srcobject = stream; }) .c...
...{ if (error.name === 'constraintnotsatisfiederror') { errormsg('the resolution ' + constraints.video.width.exact + 'x' + constraints.video.height.exact + ' px is not supported by your device.'); } else if (error.name === 'permissiondeniederror') { errormsg('permissions have not been granted to use your camera and ' + 'microphone, you need to allow the page access to your
devices in ' + 'order for the demo to work.'); } errormsg('getusermedia error: ' + error.name, error); }); function errormsg(msg, error) { errorelement.innerhtml += '<p>' + msg + '</p>'; if (typeof error !== 'undefined') { console.error(error); } } specifications specification status comment media capture and streamsthe definition of 'media
devices' in th...
Navigator.mediaDevices - Web APIs
the navigator.media
devices read-only property returns a media
devices object, which provides access to connected media input
devices like cameras and microphones, as well as screen sharing.
... syntax var media
devices = navigator.media
devices; return value the media
devices singleton object.
... usually, you just use this object's members directly, such as by calling navigator.media
devices.getusermedia().
... specifications specification status comment media capture and streamsthe definition of 'navigatorusermedia.media
devices' in that specification.
MediaDevices.getSupportedConstraints() - Web APIs
the getsupportedconstraints() method of the media
devices interface returns an object based on the mediatracksupportedconstraints dictionary, whose member fields each specify one of the constrainable properties the user agent understands.
... syntax var supportedconstraints = navigator.media
devices.getsupportedconstraints(); parameters none.
... html <p>the following media constraints are supported by your browser:</p> <ul id="constraintlist"> </ul> css body { font: 15px arial, sans-serif; } javascript let constraintlist = document.getelementbyid("constraintlist"); let supportedconstraints = navigator.media
devices.getsupportedconstraints(); for (let constraint in supportedconstraints) { if (supportedconstraints.hasownproperty(constraint)) { let elem = document.createelement("li"); elem.innerhtml = "<code>" + constraint + "</code>"; constraintlist.appendchild(elem); } } result specifications specification status comment media capture and streamsthe definition o...
USBDevice.deviceSubclass - Web APIs
the
devicesubclass read only property of the usbdevice interface one of three properties that identify usb
devices for the purpose of loading a usb driver that will work with that device.
... syntax var serialnumber = usbdevice.
devicesubclass value a number.
... specifications specification status comment webusbthe definition of '
devicesubclass' in that specification.
MediaDevices: devicechange event - Web APIs
a devicechange event is sent to a media
devices instance whenever a media device such as a camera, microphone, or speaker is connected to or removed from the system.
... bubbles no cancelable no interface event event handler ondevicechange example you can use the devicechange event in an addeventlistener method: navigator.media
devices.addeventlistener('devicechange', function(event) { updatedevicelist(); }); or use the ondevicechange event handler property: navigator.media
devices.ondevicechange = function(event) { updatedevicelist(); } specifications specification status media capture and streamsthe definition of 'devicechange' in that specification.
Index - Web APIs
it is an audionode that can represent different kinds of filters, tone control
devices, and graphic equalizers.
... 315 deviceclass api, bluetooth, bluetoothdevice, non-standard, obsolete, property, reference, web bluetooth api, deviceclass the bluetoothdevice.deviceclass read-only property returns a number representing the bluetooth
devices "class of device".
... 826 detecting device orientation api, device orientation, intermediate, mobile, motion, orientation, reference increasingly, web-enabled
devices are capable of determining their orientation; that is, they can report data indicating changes to their orientation with relation to the pull of gravity.
...And 68 more matches
Mobile accessibility - Learn web development
previous overview: accessibility next with web access on mobile
devices being so popular and renowned platforms such as ios and android having full-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms.
... objective: to understand what problems exist with accessibility on mobile
devices, and how to overcome them.
... accessibility on mobile
devices the state of accessibility — and support for web standards in general — is good in modern mobile
devices.
...And 12 more matches
Mozilla Application Framework in Detail - Archive of obsolete content
the gecko rendering engine gecko is the revolutionary rendering engine that offers advanced features for internet browsing anywhere across applications, computing platforms and
devices.
...as personal connectivity expands from the desktop computer to new web-enabled products and
devices, gecko is a browser engine that has been designed from the ground up to power a new generation of desktop browsers and browsing
devices and to accelerate the growth and development of the next-generation internet.
... small, fast and standards compliant, gecko is easily embeddable across platforms in browsers, desktop applications and browsing
devices and delivers full-functionality browsing to them all.
...And 9 more matches
Mobile first - Progressive web apps (PWAs)
this article offers some related ideas, looking at the concept of mobile first — the practice of designing a website so that the default layout/configuration is for mobile
devices, and layouts and features for desktop browsers are then layered on top of that default.
...this means that mobiles (often the target
devices with the least available memory, bandwidth or processing power available) can be given an experience suitable for them as quickly as possible, and as free as possible of extraneous information.
...this way, mobile
devices don't have to load assets and other information twice.
...And 8 more matches
Strategies for carrying out testing - Learn web development
instead, you should try to make sure your site works on the most important target browsers and
devices, and then code defensively to give your site the widest support reach it can be expected to have.
... the aim is to build up a chart of browsers/
devices you can refer to as you test.
...to do this, you will probably use a combination of actual physical
devices, and emulated environments (using either an emulator or a virtual machine).
...And 7 more matches
Capabilities, constraints, and settings - Web APIs
the constraint exerciser lets you experiment with the results of different constraint sets being applied to the audio and video tracks coming from the computer's a/v input
devices (such as its webcam and microphone).
... overview the process works like this (using mediastreamtrack as an example): if needed, call media
devices.getsupportedconstraints() to get the list of supported constraints, which tells you what constrainable properties the browser knows about.
... determining if a constraint is supported if you need to know whether or not a given constriant is supported by the user agent, you can find out by calling navigator.media
devices.getsupportedconstraints() to get a list of the constrainable properties which the browser knows, like this: let supported = navigator.media
devices.getsupportedconstraints(); document.getelementbyid("framerateslider").disabled = !supported["framerate"]; in this example, the supported constraints are fetched, and a control that lets the user configure the frame rate is disabled if the framerate ...
...And 7 more matches
Signaling and video calling - Web APIs
webrtc allows real-time, peer-to-peer, media exchange between two
devices.
...a form of discovery and media format negotiation must take place, as discussed elsewhere, in order for two
devices on different networks to locate one another.
... this process is called signaling and involves both
devices connecting to a third, mutually agreed-upon server.
...And 7 more matches
Inputs and input sources - Web APIs
to that end, webxr provides support for a variety of kinds of input
devices.
... input device types webxr supports a variety of different types of
devices to handle targeting and action inputs.
... these
devices include but aren't limited to: screen taps (particularly but not necessarily only on phones or tablets) can be used to simultaneously perform both targeting and selection.
...And 7 more matches
WebXR Device API - Web APIs
the webxr device api implements the core of the webxr feature set, managing the selection of output
devices, render the 3d scene to the chosen device at the appropriate frame rate, and manage motion vectors created using input controllers.
... webxr-compatible
devices include fully-immersive 3d headsets with motion and orientation tracking, eyeglasses which overlay graphics atop the real world scene passing through the frames, and handheld mobile phones which augment reality by capturing the world with a camera and augment that scene with computer-generated imagery.
... to accomplish these things, the webxr device api provides the following key capabilities: find compatible vr or ar output
devices render a 3d scene to the device at an appropriate frame rate (optionally) mirror the output to a 2d display create vectors representing the movements of input controls at the most basic level, a scene is presented in 3d by computing the perspective to apply to the scene in order to render it from the viewpoint of each of the user's eyes by computing the position of each eye and rendering the scene from that position, looking in the direction the user is currently facing.
...And 7 more matches
Using media queries - CSS: Cascading Style Sheets
all suitable for all
devices.
...although websites are commonly designed with screens in mind, you may want to create styles that target special
devices such as printers or audio-based screenreaders.
...} you can also target multiple
devices.
...And 6 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
169 gecko firefox os, gecko, glossary, infrastructure, intro, mozilla gecko is the layout engine developed by the mozilla project and used in many apps/
devices, including firefox and firefox os.
...this protocol lets two peers find and establish a connection with one another even though they may both be using network address translator (nat) to share a global ip address with other
devices on their respective local networks.
... 296 ota glossary, infrastructure, intro, ota, over the air, updates over the air (ota) refers to automatic updating of software on connected
devices from a central server.
...And 5 more matches
Introduction to cross browser testing - Learn web development
you need to think about: different browsers other than the one or two that you use regularly on your
devices, including slightly older browsers that some people might still be using, which don't support all the latest, shiniest css and javascript features.
... different
devices with different capabilities, from the latest greatest tablets and smartphones, through smart tvs, right down to cheap tablets and even older feature phones that may run browsers with limited capabilities.
...you can make some informed calls as to what browsers and
devices your users will be using (as we'll discuss in the second article in the series — see gotta test 'em all?), but you can't guarantee everything.
...And 5 more matches
Responsive Design Mode - Firefox Developer Tools
responsive design is the practice of designing a website so it looks and works properly on a range of different
devices — particularly mobile phones and tablets as well as desktops and laptops.
...responsive design mode gives you a simple way to simulate these factors, to test how your website will look and behave on different
devices.
...from left to right, the display includes: name of the selected device - a drop-down list that includes whatever
devices you have selected from the device settings screen.
...And 5 more matches
Pointer events - Web APIs
however, since many
devices support other types of pointing input
devices, such as pen/stylus and touch surfaces, extensions to the existing pointing device event models are needed.
...they are designed to create a single dom event model to handle pointing input
devices such as a mouse, pen/stylus or touch (such as one or more fingers).
...some sensing
devices can detect the close proximity of the input device, and the state is expressed as a hover following the mouse.
...And 5 more matches
Fundamentals of WebXR - Web APIs
webxr additionally provides support for accepting inputs from control
devices such as handheld vr controllers or specialized mixed reality gamepads.
... field of view the term field of view (fov) is one which applies to any visual technology, from old film cameras to modern digital video cameras, including the cameras in computers and mobile
devices.
... field of view and mixed reality
devices to achieve a wide enough field of view that the user's eyes are tricked into believing that the virtual world completely surrounds them, the fov needs to at least approach the width of the binocular vision area.
...And 5 more matches
Media container formats (file types) - Web media technologies
3gp the 3gp or 3gpp media container is used to encapsulate audio and/or video that is specifically intended for transmission over cellular networks for consumption on mobile
devices.
... video codecs supported by 3gp codec browser support chrome edge firefox safari avc (h.264) yes1,2 h.263 yes1 mpeg-4 part 2 (mp4v-es) yes1 vp8 yes1 [1] firefox only supports 3gp on openmax-based
devices, which currently means the boot to gecko (b2g) platform.
...p codec browser support chrome edge firefox safari amr-nb yes1 amr-wb yes1 amr-wb+ yes1 aac-lc yes1,2 he-aac v1 yes1,2 he-aac v2 yes1,2 mp3 yes1 [1] firefox only supports 3gp on openmax-based
devices, which currently means the boot to gecko (b2g) platform.
...And 5 more matches
WebVR — Virtual Reality for the Web - Game development
vr
devices with the popularity of oculus rift and a lot of other
devices in production coming soon to the market, the future looks bright — we already have sufficient technology to make the vr experience "good enough" for playing games.
... there are many
devices to chose from: desktop ones like oculus rift or htc vive, through consoles with playstation vr (which admittedly doesn't support webvr at this time), to mobile experiences like gear vr or google cardboard.
... the webvr api the webvr api is the central api for capturing information on vr
devices connected to a computer and headset position/orientation/velocity/acceleration information, and converting that into useful data you can use in your games and other applications.
...And 4 more matches
Introduction to automated testing - Learn web development
previous overview: cross browser testing next manually running tests on several browsers and
devices, several times per day, can get tedious, and time-consuming.
... the basics: manual tests the browserstack live dashboard allows you to choose what device and browser you want to test on — platforms in the left column,
devices on the right.
...pinch/zoom, two fingers to scroll) on the touchpads of supporting
devices (e.g.
...And 4 more matches
MediaDeviceInfo.groupId - Web APIs
two
devices have the same group identifier if they belong to the same physical device; for example, a monitor with both a built-in camera and microphone.
... syntax var groupid = mediadeviceinfo.groupid; value a domstring which uniquely identifies the group of related
devices to which this device belongs.
... examples in this example, we assemble a list of the
devices which are part of the same group as a given device.
...And 4 more matches
Graphic design for responsive sites - Progressive web apps (PWAs)
this really depends on what target
devices you have to support, how complex the graphics need to be, and how much interactivity your graphics require.
...this is because in general mobile
devices will have less processing power and bandwidth available, so you want to reduce the processing and downloads.
... in addition, mobile
devices have smaller screen sizes, so it makes sense to reduce visual clutter on a mobile layout.
...And 4 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
if the content, layout, and functionality need to change greatly for different
devices, it may not be such a good approach.
...but this doesn't help us responsible web developers, who have written small screen layouts into our css using media queries and want mobile
devices to display those!
...yes, you want the images to be contained inside the app ui whether you are using it on desktop or mobile, but you should also consider that mobile apps have much smaller viewport dimensions available than desktop apps, so you should try to give mobile
devices a smaller image to download.
...And 4 more matches
The HTML5 input types - Learn web development
you can also use the multiple attribute in combination with the email input type to allow several email addresses to be entered in the same input (separated by commas): <input type="email" id="email" name="email" multiple> on some
devices — notably, touch
devices with dynamic keyboards like smart phones — a different virtual keypad might be presented that is more suitable for entering email addresses, including the @ key.
... this is another good reason for using these newer input types — improving the user experience for users of these
devices.
...additionally, on
devices with dynamic keyboards, the keyboard's enter key may read "search", or display a magnifying glass icon.
...And 3 more matches
Index
in order to allow interoperability between software and
devices that perform cryptographic operations, nss conforms to a standard called pkcs#11.
...this strategy allows nss to work with many hardware
devices (e.g., to speed up the calculations required for cryptographic operations, or to access smartcards that securely protect a secret key) and software modules (e.g., to allow to load such modules as a plugin that provides additional algorithms or stores key or trust information) that implement the pkcs#11 interface.
... o if there are multiple security
devices loaded, then the -h tokenname argument can search a specific token or all tokens.
...And 3 more matches
Bluetooth.requestDevice() - Web APIs
acceptall
devices: a boolean indicating that the requesting script can accept all bluetooth
devices.
...for example, options.filters is present and options.acceptall
devices is true, or if options.filters is not present and options.acceptall
devices is false.
... example // discovery options match any
devices advertising: // .
...And 3 more matches
MediaDeviceInfo - Web APIs
the list of
devices obtained by calling navigator.media
devices.enumerate
devices() is an array of mediadeviceinfo objects, one per media device.
...two
devices have the same group identifier if they belong to the same physical device — for example a monitor with both a built-in camera and a microphone.
... example here's an example that uses enumerate
devices() to get a list of
devices.
...And 3 more matches
MediaTrackSettings.groupId - Web APIs
the mediatracksettings dictionary's groupid property is a browsing-session unique domstring which identifies the group of
devices which includes the source for the mediastreamtrack.
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.groupid as returned by a call to media
devices.getsupportedconstraints().
... syntax var groupid = mediatracksettings.groupid; value a domstring whose value is a browsing-session unique identifier for a group of
devices which includes the source of the track's contents.
...And 3 more matches
Using the Screen Capture API - Web APIs
capturing screen contents capturing screen contents as a live mediastream is initiated by calling navigator.media
devices.getdisplaymedia(), which returns a promise that resolves to a stream containing the live screen contents.
... starting screen capture: async/await style async function startcapture(displaymediaoptions) { let capturestream = null; try { capturestream = await navigator.media
devices.getdisplaymedia(displaymediaoptions); } catch(err) { console.error("error: " + err); } return capturestream; } you can write this code either using an asynchronous function and the await operator, as shown above, or using the promise directly, as seen below.
... starting screen capture: promise style function startcapture(displaymediaoptions) { let capturestream = null; return navigator.media
devices.getdisplaymedia(displaymediaoptions) .catch(err => { console.error("error:" + err); return null; }); } either way, the user agent responds by presenting a user interface that prompts the user to choose the screen area to share.
...And 3 more matches
Starting up and shutting down a WebXR session - Web APIs
webxr availability as a new and still in development api, webxr support is limited to specific
devices and browsers; and even on those, it may not be enabled by default.
... webxr api emulator extension the mozilla webxr team has created a webxr api emulator browser extension, compatible with both firefox and chrome, which emulates the webxr api, simulating a variety of compatible
devices such as the htc vive, the oculus go and oculus quest, samsung gear, and google cardboard.
...emulated, simulated, or polyfilled environments are not an adequate substitute for actual testing on physical
devices.
...And 3 more matches
User input and controls - Developer guides
recommendations available input mechanisms depend on the capabilities of the device running the application: some
devices provide touchscreen displays: the web platform offers touch events to interpret finger activity on touch-based user interfaces.
... for
devices providing a mouse/touchpad as a pointing method, the pointer lock api helps you in implementing a first person 3d game or other applications requiring full control of the pointing device.
... finger touch when developing web applications meant to be installed on touchscreen
devices, it’s a good practice to take into consideration the different capabilities in terms of screen resolution and user input.
...And 3 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and
devices with dynamic keyboards.
...displays a numeric keypad in some
devices with dynamic keypads.
...displays a search icon instead of enter key on some
devices with dynamic keypads.
...And 3 more matches
Beginner's guide to media queries - Learn web development
testing for orientation can help you to create a layout which is optimised for
devices in portrait mode.
... use of pointing
devices as part of the level 4 specification, the hover media feature was introduced.
... there are now far too many
devices, with a huge variety of sizes, to make that feasible.
...And 2 more matches
Responsive images - Learn web development
previous overview: multimedia and embedding next in this article, we'll learn about the concept of responsive images — images that work well on
devices with widely differing screen sizes, resolutions, and other such features — and look at what tools html provides to help implement them.
... this helps to improve performance across different
devices.
... to make things more complicated, some
devices have high resolution screens that need larger images than you might expect to display nicely.
...And 2 more matches
Using the viewport meta tag to control layout on mobile browsers
narrow screen
devices (e.g.
...this virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen
devices.
...but remember that not all mobile
devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations.
...And 2 more matches
PKCS11 FAQ
what are "generic crypto svcs" (the first item listed when you click the view/edit button for the nss internal pkcs #11 module under security
devices under options/security in firefox)?
...if an rsa key is being generated, the nss application will present a list of all writable rsa
devices asks the user to select which one to use, if a dsa key is being generated, it will present a list of all the writable dsa
devices, if an ec key is being generated, it will present a list of all writable ec
devices.
...first open the tools/options/advanced/security window in mozilla and click security
devices.
...And 2 more matches
Detecting device orientation - Web APIs
increasingly, web-enabled
devices are capable of determining their orientation; that is, they can report data indicating changes to their orientation with relation to the pull of gravity.
... in particular, hand-held
devices such as mobile phones can use this information to automatically rotate the display to remain upright, presenting a wide-screen view of the web content when the device is rotated so that its width is greater than its height.
...sensors that are commonly capable of detecting devicemotionevent include sensors in laptops to protect moving storage
devices.
...And 2 more matches
Navigator.getUserMedia() - Web APIs
if permission is granted, a mediastream whose video and/or audio tracks come from those
devices is delivered to the specified success callback.
... if permission is denied, no compatible input
devices exist, or any other error condition occurs, the error callback is executed with a mediastreamerror object describing what went wrong.
...please use the newer navigator.media
devices.getusermedia() instead.
...And 2 more matches
USBDevice - Web APIs
usbdevice.deviceclass read only one of three properties that identify usb
devices for the purpose of loading a usb driver that will work with that device.
... the other two properties are usbdevice.
devicesubclass and usbdevice.deviceprotocol.
... usbdevice.deviceprotocol read only one of three properties that identify usb
devices for the purpose of loading a usb driver that will work with that device.
...And 2 more matches
<length> - CSS: Cascading Style Sheets
the anchor is done differently for low-resolution
devices, such as screens, versus high-resolution
devices, such as printers.
... for low-dpi
devices, the unit px represents the physical reference pixel; other units are defined relative to it.
...the consequence of this definition is that on such
devices, dimensions described in inches (in), centimeters (cm), or millimeters (mm) don't necessary match the size of the physical unit with the same name.
...And 2 more matches
Mobile Web Development - Developer guides
this page provides an overview of some of the main techniques needed to design web sites that work well on mobile
devices.
... we've organized it into two sections, designing for mobile
devices and cross-browser compatibility.
... designing for mobile
devices mobile
devices have quite different hardware characteristics compared with desktop or laptop computers.
...And 2 more matches
Browser detection using the user agent - HTTP
while user agent sniffing can sometimes detect these, not all
devices are the same: some mobile
devices have big screen sizes, some desktops have a small touchscreen, some people use smart tv's which are an entirely different ballgame altogether, and some people can dynamically change the width and height of their screen by flipping their tablet on its side!
...using this information of whether the device has a touchscreen, do not change the entire layout of the website just for touch
devices: you will only create more work and maintenance for yourself.
...here is an example of code that increases the padding of #examplebutton to 1em on mobile
devices.
...And 2 more matches
FIPS Mode - an explanation
it requires that all cryptography done by us government personnel must be done in "
devices" that have been independently tested, and certified by nist, to meet the extensive requirements of that document.
... these
devices may be hardware or software, but either way, they must function and behave as prescribed.
... this makes it difficult to move keys from one device to another, and consequently, all crypto engines and key storage must be in a single device rather than being split up into several
devices.
... nss divides its operations up into two "
devices" rather than just one.
about:debugging - Firefox Developer Tools
setup tab connecting to a remote device firefox supports debugging over usb with android
devices, using the about:debugging page.
... if your device doesn't appear in the lefthand side of the about:debugging page, try clicking the refresh
devices button.
...your device should show a popup to authorize your computer to connect to it — accept this and then click the refresh
devices button again.
...when you do, it is added to the network locations list along with the
devices, as shown below: this firefox the this firefox tab combines the features of extensions, tabs, and workers into a single tab with the following sections: temporary extensions displays a list of the extensions that you have loaded using the load temporary add-on button.
MediaStream Recording API - Web APIs
examining potential input sources if your goal is to record camera and/or microphone input, you may wish to examine the available input
devices before beginning the process of constructing the mediarecorder.
... to do so, you'll need to call navigator.media
devices.enumerate
devices() to get a list of the available media
devices.
... in this code snippet, enumerate
devices() is used to examine the available input
devices, locate those which are audio input
devices, and create <option> elements that are then added to a <select> element representing an input source picker.
... navigator.media
devices.enumerate
devices() .then(function(
devices) {
devices.foreach(function(device) { let menu = document.getelementbyid("input
devices"); if (device.kind == "audioinput") { let item = document.createelement("option"); item.innerhtml = device.label; item.value = device.deviceid; menu.appendchild(item); } }); }); code similar to this can be used to let the user restrict the set of
devices they wish to use.
MediaTrackSettings - Web APIs
this value is specific to the source of the track's data and is not usable for setting constraints; it can, however, be used for initially selecting media when calling media
devices.getusermedia().
...two
devices (as identified by the deviceid) are considered part of the same group if they are from the same physical device.
... for instance, the audio input and output
devices for the speaker and microphone built into a phone would share the same group id, since they're part of the same physical device.
...this value is specific to the source of the track's data and is not usable for setting constraints; it can, however, be used for initially selecting media when calling media
devices.getusermedia().
RTCPeerConnection.addTrack() - Web APIs
here's an example showing a function that uses getusermedia() to obtain a stream from a user's camera and microphone, then adds each track from the stream to the peer connection, without specifying a stream for each track: async opencall(pc) { const gumstream = await navigator.media
devices.getusermedia( {video: true, audio: true}); for (const track of gumstream.gettracks()) { pc.addtrack(track); } } the result is a set of tracks being sent to the remote peer, with no stream associations.
... for example, consider this function that an application might use to begin streaming a device's camera and microphone input over an rtcpeerconnection to a remote peer: async opencall(pc) { const gumstream = await navigator.media
devices.getusermedia( {video: true, audio: true}); for (const track of gumstream.gettracks()) { pc.addtrack(track, gumstream); } } the remote peer might then use a track event handler that looks like this: pc.ontrack = ({streams: [stream]} => videoelem.srcobject = stream; this sets the video element's current stream to the one that contains the track that's been added...
... var mediaconstraints = { audio: true, // we want an audio track video: true // ...and we want a video track }; var desc = new rtcsessiondescription(sdp); pc.setremotedescription(desc).then(function () { return navigator.media
devices.getusermedia(mediaconstraints); }) .then(function(stream) { previewelement.srcobject = stream; stream.gettracks().foreach(track => pc.addtrack(track, stream)); }) this code takes sdp which has been received from the remote peer and constructs a new rtcsessiondescription to pass into setremotedescription().
... once that succeeds, it uses media
devices.getusermedia() to obtain access to the local webcam and microphone.
Screen Capture API - Web APIs
its sole method is media
devices.getdisplaymedia(), whose job is to ask the user to select a screen or portion of a screen to capture in the form of a mediastream.
... to start capturing video from the screen, you call getdisplaymedia() on the instance of media navigator.media
devices: capturestream = await navigator.media
devices.getdisplaymedia(displaymediaoptions); the promise returned by getdisplaymedia() resolves to a mediastream which streams the captured media.
... additions to existing interfaces the screen capture api doesn't have any interfaces of its own; instead, it adds one method to the existing media
devices interface.
... media
devices interface media
devices.getdisplaymedia() the getdisplaymedia() method is added to the media
devices interface.
USB.requestDevice() - Web APIs
syntax usb.requestdevice([filters]) parameters filters an array of filter objects for possible
devices you would like to pair.
... example the following example looks for one of two usb
devices.
... the number of filters does not specifiy the number of
devices shown by the user agent.
...on the other hand if the user agent finds two of the first listed device and one of the second, then all three
devices will be listed.
Lifetime of a WebRTC session - Web APIs
network address translation (nat) is a standard which supports this address sharing by handling routing of data inbound and outbound to and from
devices on a lan, all of which are sharing a single wan (global) ip address.
... signaling signaling is the process of sending control information between two
devices to determine the communication protocols, channels, media codecs and formats, and method of data transfer, as well as any required routing information.
...the answer is simple: since the two
devices have no way to directly contact each other, and the specification can’t predict every possible use case for webrtc, it makes more sense to let the developer select an appropriate networking technology and messaging protocol.
... in particular, if a developer already has a method in place for connecting two
devices, it doesn’t make sense for them to have to use another one, defined by the specification, just for webrtc.
Taking still photos with WebRTC - Web APIs
function startup() { video = document.getelementbyid('video'); canvas = document.getelementbyid('canvas'); photo = document.getelementbyid('photo'); startbutton = document.getelementbyid('startbutton'); get the media stream the next task is to get the media stream: navigator.media
devices.getusermedia({ video: true, audio: false }) .then(function(stream) { video.srcobject = stream; video.play(); }) .catch(function(err) { console.log("an error occurred: " + err); }); here, we're calling media
devices.getusermedia() and requesting a video stream (without audio).
... using specific
devices you can, if needed, restrict the set of permitted video sources to a specific device or set of
devices.
... to do so, call navigator.media
devices.enumerate
devices().
... when the promise is fulfilled with an array of mediadeviceinfo objects describing the available
devices, find the ones that you want to allow and specify the corresponding deviceid or deviceids in the mediatrackconstraints object passed into getusermedia().
Audio and Video Delivery - Developer guides
to grab the stream from your webcam, first set up a <video> element: <video id="webcam" width="480" height="360"></video> next, if supported connect the webcam source to the video element: if (navigator.media
devices) { navigator.media
devices.getusermedia({ video: true, audio: false }) .then(function onsuccess(stream) { var video = document.getelementbyid('webcam'); video.autoplay = true; video.srcobject = stream; }) .catch(function onerror() { alert('there has been a problem retreiving the streams - are you running on file:/// or did you disallow access?'); }); } else { alert('get...
...usermedia is not supported in this browser.'); } to find out more, read our media
devices.getusermedia page.
... the main mechanism is outlined below: navigator.media
devices.getusermedia({audio:true}) .then(function onsuccess(stream) { var recorder = new mediarecorder(stream); var data = []; recorder.ondataavailable = function(e) { data.push(e.data); }; recorder.start(); recorder.onerror = function(e) { throw e.error || new error(e.name); // e.name is ff non-spec } recorder.onstop = function(e) { var audio = docume...
...often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and
devices.
Index - HTTP
65 feature-policy: camera directive, feature policy, feature-policy, http, reference, camera the http feature-policy header camera directive controls whether the current document is allowed to use video input
devices.
... when this policy is enabled, the promise returned by media
devices.getusermedia() will reject with a notallowederror.
... 69 feature-policy: microphone feature policy, feature-policy, http, header, microphone the http feature-policy header microphone directive controls whether the current document is allowed to use audio input
devices.
... when this policy is enabled, the promise returned by media
devices.getusermedia() will reject with a notallowederror.
HTTP Index - HTTP
127 feature-policy: camera directive, feature policy, feature-policy, http, reference, camera the http feature-policy header camera directive controls whether the current document is allowed to use video input
devices.
... when this policy is enabled, the promise returned by media
devices.getusermedia() will reject with a notallowederror.
... 137 feature-policy: microphone feature policy, feature-policy, http, header, microphone the http feature-policy header microphone directive controls whether the current document is allowed to use audio input
devices.
... when this policy is enabled, the promise returned by media
devices.getusermedia() will reject with a notallowederror.
Game distribution - Game development
benefits of html5 over native building games with html5 gives you extra advantages, such as: multiplatform bliss the technology itself is multiplatform, so you can write the code once and target multiple
devices.
... desktop vs mobile the vast majority of the traffic we are interested in — people playing html5 games — comes from mobile
devices so that's something you will have to focus on if you truly want to succeed.
... mobile
devices are where html5 technology can truly shine and show its advantages.
Audio for Web games - Game development
if possible, you should try your code on several
devices and platforms to see how it works.
...although the situation is soon going to get better with the adoption of the web audio api, the current most widely-supported method — using the vanilla <audio> element — leads to patchy results on mobile
devices.
... element — results in patchy results on mobile
devices.
Implementing controls using the Gamepad API - Game development
there's also a number of other
devices with various different button layouts that more or less work across browser implementations.
... the index variable is useful if we're connecting more than one controller and want to identify them to act accordingly — for example when we have a two-player game requiring two
devices to be connected.
...now the length of the array of gamepads has to be n+1 where n is the number of connected
devices — when there's one device connected and it has the index of 1, the array's length is 2 and it will look like this: [null, [object gamepad]].
Efficient animation for web games - Game development
this article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end
devices such as mobile phones.
... there are several techniques worth knowing that will improve the performance of your game or application whilst also using less battery life, especially on low-end
devices.
...one of the goals for the puzzowl game is for it to be a solid 60fps on reasonable hardware (for the record, it’s almost there on galaxy nexus-class hardware) while still being playable on low-end
devices (such as a firefox os geeksphone keon).
What is accessibility? - Learn web development
we traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile
devices, or those with slow network connections.
...hearing-impaired people do use ats (see assistive
devices for people with hearing, voice, speech, or language disorders), but there are not really special ats specific for computer/web use.
...this benefits everyone, especially those on mobile
devices and/or slow connections.
Responsive design - Learn web development
as mobile
devices became more powerful and able to display full websites, this was frustrating to mobile users who found themselves trapped in the site's mobile version and unable to access information they knew was on the full-featured desktop version of the site.
... a common approach when using media queries is to create a simple single-column layout for narrow-screen
devices (e.g mobile phones), then check for larger screens and implement a multiple-column layout when you know that you have enough screen width to handle it.
...that approach would be impossible given the vast number of differently-sized
devices that exist, and the fact that on desktop at least, people do not always have their browser window maximized.
What software do I need to build a website? - Learn web development
(if you're going that route, microsoft has some tools for developers including a ready-to-use virtual machine at modern.ie.) by all means run some tests on a real device, especially on real mobile
devices.
...mobile
devices cost money, of course, so we suggest taking a look at the open device lab initiative.
... you can also share
devices if you want to test on many platforms without spending too much.
Graceful asynchronous programming with Promises - Learn web development
since getusermedia() has to ensure that the user has permission to use those
devices and ask the user which microphone to use and which camera to use (or whether to be a voice-only call, among other possible options), it can block until not only all of those decisions are made, but also the camera and microphone have been engaged.
...so instead of waiting for the user, getting the chosen
devices enabled, and directly returning the mediastream for the stream created from the selected sources, getusermedia() returns a promise which is resolved with the mediastream once it's available.
... the code that the video chat application would use might look something like this: function handlecallbutton(evt) { setstatusmessage("calling..."); navigator.media
devices.getusermedia({video: true, audio: true}) .then(chatstream => { selfviewelem.srcobject = chatstream; chatstream.gettracks().foreach(track => mypeerconnection.addtrack(track, chatstream)); setstatusmessage("connected"); }).catch(err => { setstatusmessage("failed to connect"); }); } this function starts by using a function called setstatusmessage() to update a status display with the message "calling...", indicating that a call is being attempted.
Cross browser testing - Learn web development
what users, browsers, and
devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.
...what browsers,
devices, and other segments should you make sure are tested), lo-fi testing strategies (get yourself a range of
devices and some virtual machines and do ad-hoc tests when needed), higher tech strategies (automation, using dedicated testing apps), and testing with user groups.
... introduction to automated testing manually running tests on several browsers and
devices, several times per day, can get tedious and time-consuming.
Localization Use Cases
first, there is
devicestoragehelper.showformatedsize (sic): function showformatedsize(element, l10nid, size) { if (size === undefined || isnan(size)) { element.textcontent = ''; return; } // kb - 3 kb (nearest ones), mb, gb - 1.2 mb (nearest tenth) var fixeddigits = (size < 1024 * 1024) ?
...filesizeformatter.getreadablefilesize(size, fixeddigits); var _ = navigator.mozl10n.get; element.textcontent = _(l10nid, { size: sizeinfo.size, unit: _('byteunit-' + sizeinfo.unit) }); } the function is used like so: // application storage updateappfreespace: function storage_updateappfreespace() { var self = this; this.getfreespace(this.appstorage, function(freespace) {
devicestoragehelper.showformatedsize(self.appstoragedesc, 'availablesize', freespace); }); }, problem definition for all values of freespace, the following string is enough to construct a grammatically-correct sentence in english: availablesize = {{$size}} {{$unit}} available however, other languages might need to pluralize this string with different forms of the available adjective.
... you'll notice that
devicestoragehelper.showformatedsize passes a localized name of the unit to availablesize: function showformatedsize(element, l10nid, size) { // … var _ = navigator.mozl10n.get; element.textcontent = _(l10nid, { size: sizeinfo.size, unit: _('byteunit-' + sizeinfo.unit) }); } problem definition even though there's no need to localize the units in english at all, we still need to do i...
NSS tools : certutil
* if there are multiple security
devices loaded, then the -h tokenname argument can search a specific token or all tokens.
... listing security modules the
devices that can be used to store certificates -- both internal databases and external
devices like smart cards -- are recognized and used by loading security modules.
...l ca,ou=certification services divi sion,o=thawte consulting,l=cape town,st=western cape,c=za] "thawte personal freemail issuing ca - thawte consulting" [cn=thawte p ersonal freemail issuing ca,o=thawte consulting (pty) ltd.,c=za] "(null)" [e=jsmith@example.com,cn=thawte freemail member] resetting a token the device which stores certificates -- both external hardware
devices and internal software databases -- can be blanked and reused.
certutil
o if there are multiple security
devices loaded, then the -h tokenname argument can search a specific token or all tokens.
... listing security modules the
devices that can be used to store certificates -- both internal databases and external
devices like smart cards -- are recognized and used by loading security modules.
...rsonal freemail ca,ou=certification services division,o=thawte consulting,l=cape town,st=western cape,c=za] "thawte personal freemail issuing ca - thawte consulting" [cn=thawte personal freemail issuing ca,o=thawte consulting (pty) ltd.,c=za] "(null)" [e=jsmith@example.com,cn=thawte freemail member] resetting a token the device which stores certificates -- both external hardware
devices and internal software databases -- can be blanked and reused.
nsICacheSession
netwerk/cache/public/nsicachesession.idlscriptable handles open synchronous and asynchronous cache entry operations along with evicting cache entries and checking for cache
devices instantiation according to the session storage policies.
...isstorageenabled() this method checks if the cache
devices implied by the session storage policy are currently enabled for instantiation if they don't already exist.
...return value returns whether any of the cache
devices implied by the session storage policy are currently enabled for instantiation or not, depending on their existence.
Key Values - Web APIs
multimedia keys the multimedia keys are extra buttons or keys for controlling media
devices, found on some keyboards.
... tv control keys these key values represent buttons or keys present on television
devices, or computers or phones which have tv support.
... media controller keys because modern remote controls for media
devices often include buttons beyond the basic controls covered elsewhere in this document, key values are defined for a broad array of these additional buttons.
MediaStreamConstraints.audio - Web APIs
see security in media
devices.getusermedia() for details and examples on how to configure this.
...x; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.media
devices.getusermedia({ audio: true }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain an audio-only stream with no specific constraints, then attaches the resulting stream to an <audio> element once the stream is returned.
...x; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.media
devices.getusermedia({ audio: { samplesize: 8, echocancellation: true } }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of audio constraints requesting that echo cancellation be enabled and that, if possible, the sample rat...
Recording a media element - Web APIs
while the article using the mediastream recording api demonstrates using the mediarecorder interface to capture a mediastream generated by a hardware device, as returned by navigator.media
devices.getusermedia(), you can also use an html media element (namely <audio> or <video>) as the source of the mediastream to be recorded.
... getting an input stream and setting up the recorder now let's look at the most intricate piece of code in this example: our event handler for clicks on the start button: startbutton.addeventlistener("click", function() { navigator.media
devices.getusermedia({ video: true, audio: true }).then(stream => { preview.srcobject = stream; downloadbutton.href = stream; preview.capturestream = preview.capturestream || preview.mozcapturestream; return new promise(resolve => preview.onplaying = resolve); }).then(() => startrecording(preview.capturestream(), recordingtimems)) .then (recordedchunks => { let recordedb...
...hunks, { type: "video/webm" }); recording.src = url.createobjecturl(recordedblob); downloadbutton.href = recording.src; downloadbutton.download = "recordedvideo.webm"; log("successfully recorded " + recordedblob.size + " bytes of " + recordedblob.type + " media."); }) .catch(log); }, false); when a click event occurs, here's what happens: lines 2-4 navigator.media
devices.getusermedia() is called to request a new mediastream that has both video and audio tracks.
MediaTrackSupportedConstraints.aspectRatio - Web APIs
the mediatracksupportedconstraints dictionary's aspectratio property is a read-only boolean value which is present (and set to true) in the object returned by media
devices.getsupportedconstraints() if and only if the user agent supports the aspectratio constraint.
... you can access the supported constraints dictionary by calling navigator.media
devices.getsupportedconstraints().
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.media
devices.getsupportedconstraints().aspectratio) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'aspectratio' in that specification.
MediaTrackSupportedConstraints.autoGainControl - Web APIs
the mediatracksupportedconstraints dictionary's autogaincontrol property is a read-only boolean value which is present (and set to true) in the object returned by media
devices.getsupportedconstraints() if and only if the user agent supports the autogaincontrol constraint.
... you can access the supported constraints dictionary by calling navigator.media
devices.getsupportedconstraints().
... html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.media
devices.getsupportedconstraints().autogaincontrol) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'autogaincontrol' in that specification.
MediaTrackSupportedConstraints.channelCount - Web APIs
the mediatracksupportedconstraints dictionary's channelcount property is a read-only boolean value which is present (and set to true) in the object returned by media
devices.getsupportedconstraints() if and only if the user agent supports the channelcount constraint.
... you can access the supported constraints dictionary by calling navigator.media
devices.getsupportedconstraints().
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.media
devices.getsupportedconstraints().channelcount) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'channelcount' in that specification.
MediaTrackSupportedConstraints.deviceId - Web APIs
the mediatracksupportedconstraints dictionary's deviceid property is a read-only boolean value which is present (and set to true) in the object returned by media
devices.getsupportedconstraints() if and only if the user agent supports the deviceid constraint.
... you can access the supported constraints dictionary by calling navigator.media
devices.getsupportedconstraints().
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.media
devices.getsupportedconstraints().deviceid) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'deviceid' in that specification.
MediaTrackSupportedConstraints.echoCancellation - Web APIs
the mediatracksupportedconstraints dictionary's echocancellation property is a read-only boolean value which is present (and set to true) in the object returned by media
devices.getsupportedconstraints() if and only if the user agent supports the echocancellation constraint.
... you can access the supported constraints dictionary by calling navigator.media
devices.getsupportedconstraints().
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.media
devices.getsupportedconstraints().echocancellation) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'echocancellation' in that specification.
MediaTrackSupportedConstraints.facingMode - Web APIs
the mediatracksupportedconstraints dictionary's facingmode property is a read-only boolean value which is present (and set to true) in the object returned by media
devices.getsupportedconstraints() if and only if the user agent supports the facingmode constraint.
... you can access the supported constraints dictionary by calling navigator.media
devices.getsupportedconstraints().
... example html <div id="result"> </div> css #result { font: 14px "arial", sans-serif; } javascript let result = document.getelementbyid("result"); if (navigator.media
devices.getsupportedconstraints().facingmode) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'facingmode' in that specification.
MediaTrackSupportedConstraints.groupId - Web APIs
the mediatracksupportedconstraints dictionary's groupid property is a read-only boolean value which is present (and set to true) in the object returned by media
devices.getsupportedconstraints() if and only if the user agent supports the groupid constraint.
... you can access the supported constraints dictionary by calling navigator.media
devices.getsupportedconstraints().
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.media
devices.getsupportedconstraints().groupid) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'groupid' in that specification.
MediaTrackSupportedConstraints.height - Web APIs
the mediatracksupportedconstraints dictionary's height property is a read-only boolean value which is present (and set to true) in the object returned by media
devices.getsupportedconstraints() if and only if the user agent supports the height constraint.
... you can access the supported constraints dictionary by calling navigator.media
devices.getsupportedconstraints().
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.media
devices.getsupportedconstraints().height) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'height' in that specification.
MediaTrackSupportedConstraints.latency - Web APIs
the mediatracksupportedconstraints dictionary's latency property is a read-only boolean value which is present (and set to true) in the object returned by media
devices.getsupportedconstraints() if and only if the user agent supports the latency constraint.
... you can access the supported constraints dictionary by calling navigator.media
devices.getsupportedconstraints().
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.media
devices.getsupportedconstraints().latency) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'latency' in that specification.
MediaTrackSupportedConstraints.noiseSuppression - Web APIs
the mediatracksupportedconstraints dictionary's noisesuppression property is a read-only boolean value which is present (and set to true) in the object returned by media
devices.getsupportedconstraints() if and only if the user agent supports the noisesuppression constraint.
... you can access the supported constraints dictionary by calling navigator.media
devices.getsupportedconstraints().
... html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.media
devices.getsupportedconstraints().noisesuppression) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'noisesuppression' in that specification.
MediaTrackSupportedConstraints.sampleRate - Web APIs
the mediatracksupportedconstraints dictionary's samplerate property is a read-only boolean value which is present (and set to true) in the object returned by media
devices.getsupportedconstraints() if and only if the user agent supports the samplerate constraint.
... you can access the supported constraints dictionary by calling navigator.media
devices.getsupportedconstraints().
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.media
devices.getsupportedconstraints().samplerate) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'samplerate' in that specification.
MediaTrackSupportedConstraints.sampleSize - Web APIs
the mediatracksupportedconstraints dictionary's samplesize property is a read-only boolean value which is present (and set to true) in the object returned by media
devices.getsupportedconstraints() if and only if the user agent supports the samplesize constraint.
... you can access the supported constraints dictionary by calling navigator.media
devices.getsupportedconstraints().
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.media
devices.getsupportedconstraints().samplesize) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'samplesize' in that specification.
MediaTrackSupportedConstraints.volume - Web APIs
the mediatracksupportedconstraints dictionary's volume property is a read-only boolean value which is present (and set to true) in the object returned by media
devices.getsupportedconstraints() if and only if the user agent supports the volume constraint.
... you can access the supported constraints dictionary by calling navigator.media
devices.getsupportedconstraints().
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.media
devices.getsupportedconstraints().volume) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result ...
MediaTrackSupportedConstraints.width - Web APIs
the mediatracksupportedconstraints dictionary's width property is a read-only boolean value which is present (and set to true) in the object returned by media
devices.getsupportedconstraints() if and only if the user agent supports the width constraint.
... you can access the supported constraints dictionary by calling navigator.media
devices.getsupportedconstraints().
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.media
devices.getsupportedconstraints().width) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'width' in that specification.
Screen Wake Lock API - Web APIs
the screen wake lock api provides a way to prevent
devices from dimming or locking the screen when an application needs to keep running.
... concepts and usage most
devices by default turn off their screen after a specified amount of time to prolong the life of the hardware.
... modern
devices do this to save on battery power.
WEBGL_compressed_texture_pvrtc - Web APIs
availability: pvrtc is typically only available on mobile
devices with powervr chipsets.
... it is used in all generations of the iphone, ipod touch and ipad and supported on certain android
devices that use a powervr gpu.
... note: on ios
devices, this extension is named webkit_webgl_compressed_texture_pvrtc.
WebRTC connectivity - Web APIs
in this way, both
devices share with one another the information needed in order to exchange media data.
... this exchange is handled using interactive connectivity establishment (ice, a protocol which lets two
devices use an intermediary to exchange offers and answers even if the two
devices are separated by network address translation (nat).
...regardless of whether it's a new call, or reconfiguring an existing one, these are the basic steps which must occur to exchange the offer and answer, leaving out the ice layer for the moment: the caller captures local media via navigator.media
devices.getusermedia() the caller creates rtcpeerconnection and called rtcpeerconnection.addtrack() (since addstream is deprecating) the caller calls rtcpeerconnection.createoffer() to create an offer.
Geometry and reference spaces in WebXR - Web APIs
for
devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment.
...this comes in especially handy when implementing support for using non-xr
devices such as keyboards or mice to move the player's avatar through the world.
... device limitations on reference spaces some xr
devices simply can't be made to support a given experience, despite the efforts the api goes to to make up for any missing capabilities.
Attestation and Assertion - Web APIs
it is not included when used in the authenticatorassertionresponse.) different
devices have different attestation formats.
... the pre-defined attestation formats in webauthn are: packed - a generic attestation format that is commonly used by
devices whose sole function is as a webauthn authenticator, such as security keys.
... android safetynet -prior to android key attestation, the only option for android
devices was to create android safetynet attestations fido u2f - security keys that implement the fido u2f standard use this format none - browsers may prompt users whether they want a site to be allowed to see their attestation data and/or may remove attestation data from the authenticator's response if the `attestation` parameter in `navigator.credentials.create()` is set to `none` the...
Web NFC API - Web APIs
note:
devices and tags have to be formatted and recorded specifically to support ndef record format to be used with web nfc.
... ndefreader interface that enables reading messages from compatible nfc
devices or tags.
... ndefwriter interface used to write ndefmessages to compatible tags or
devices.
XRInputSourcesChangeEvent - Web APIs
removed read only an array of zero or more xrinputsource objects representing the input
devices newly connected or enabled for use.
... event types inputsourceschange delivered to the xrsession when the set of input
devices available to it changes.
... examples the following example shows how to set up an event handler which uses inputsourceschange events to detect newly-available pointing
devices and to load their models in preparation to display them in the next animation frame.
XRSession.inputSources - Web APIs
the read-only inputsources property of the xrsession interface returns an xrinputsourcearray object which lists all controllers and input
devices which are expressly associated with the xr device and are currently available.
...the returned object is live; as
devices are connected to and removed from the user's system, the list's contents update to reflect the changes.
... usage notes you can add a handler for the xrsession event inputsourceschange to be advised when the contents of the session's connected
devices list changes.
XRSession: inputsourceschange event - Web APIs
the inputsourceschange event is sent to an xrsession when the set of available webxr input
devices changes.
... the received event, of type xrinputsourceschangeevent, contains a list of any newly added and/or removed input
devices.
... bubbles yes cancelable no interface xrinputsourceschangeevent event handler property oninputsourceschange the event object contains lists of the newly-added and/or removed input
devices in its added and removed properties.
XRSystem: devicechange event - Web APIs
a devicechange event is fired on an xrsystem object whenever the whenever the availability of immersive xr
devices has changed; for example, a vr headset or ar goggles have been connected or disconnected.
... note: not to be confused with the media
devices devicechange event.
... example the example shown here handles the devicechange event by toggling the availability of the "enter xr" button based on whether or not any immersive
devices are currently available.
Viewport concepts - CSS: Cascading Style Sheets
this article explains the concept of the viewport — what it is, its impact in terms of css, svg, and mobile
devices — and differentiates between the visual viewport and the layout viewport.
... on most mobile
devices and when the browser is in fullscreen mode, the viewport is the entire screen.
... mobile viewports mobile
devices come in all shapes and sizes, with screens of differing device pixel ratios.
Index - Developer guides
often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and
devices.
... 32 mobile web development intermediate, needsexample this page provides an overview of some of the main techniques needed to design web sites that work well on mobile
devices.
...this lets it work effectively both for users of powerful desktop systems as well as for handheld
devices with less power.
Mobile-friendliness - Developer guides
goal #1 (presentation) “make websites that work well on a variety of screen sizes.” these days, users can access the web on
devices in a wide range of form factors, including phones, tablets, and ereaders.
...for example, it is absolutely critical to keep in mind which browsers and
devices you will target when picking a mobile strategy.
...on the other hand, if many of your site’s users are on
devices with less capable browsers, that may eliminate certain strategies as viable options.
<input type="password"> - HTML: Hypertext Markup Language
specifics of how the entry process works may vary from browser to browser; mobile
devices, for example, often display the typed character for a moment before obscuring it, to allow the user to be sure they pressed the key they meant to press; this is helpful given the small size of keys and the ease with which the wrong one can be pressed, especially on virtual keyboards.
...mobile
devices with virtual keyboards, for example, may opt to switch to a numeric keypad layout instead of a full keyboard, to make entering the password easier.
... the inputmode is set to numeric to encourage
devices with virtual keyboards to switch to a numeric keypad layout for easier entry.
Feature-Policy - HTTP
camera controls whether the current document is allowed to use video input
devices.
... microphone controls whether the current document is allowed to use audio input
devices.
... when this policy is disabled, the promise returned by media
devices.getusermedia() will reject with a notallowederror.
Firefox user agent string reference - HTTP
also, please use touch detection to find touch
devices rather than looking for "mobi" or "tablet", since there may be touch
devices which are not tablets.
... firefox os
devices identify themselves without any operating system indication; for example: "mozilla/5.0 (mobile; rv:15.0) gecko/15.0 firefox/15.0".
... here is a javascript regular expression that will detect all mobile
devices, including
devices with a device id in their ua string: /mobi/i the i makes it case-insensitive, and mobi matches all mobile browsers.
Web video codec guide - Web media technologies
the only real reason to use h.263 in new projects is if you require support on very old
devices on which h.263 is your best choice.
... [1] internet explorer and edge only supports hevc on
devices with a hardware codec.
... because any mpeg-2 decoder can also play mpeg-1 video, it's compatible with a wide variety of software and hardware
devices.
Codecs used by WebRTC - Web media technologies
to communicate, the two
devices need to be able to agree upon a mutually-understood codec for each track so they can successfully communicate and present the shared media.
... firefox vp9 (firefox 46 and later) vp8 opera safari choosing the right codec before choosing a codec that isn't one of the mandatory codecs (vp8 or avc for video and opus or pcm for audio), you should seriously consider the potential drawbacks: in particular, only these codecs can be generally assumed to be available on essentially all
devices that support webrtc.
...safari 12.1 introduced support for vp8 within irc, which improves interoperability, but at a cost—vp8 has no hardware support on ios
devices, so using it causes increased processor impact and reduced battery life.
Performance fundamentals - Web Performance
like memory usage, users perceive power usage only indirectly, by how long their
devices can maintain all other upp goals.
...css media queries allow these compromises to be restricted only to
devices that need them.
...on mobile
devices, these are too slow.
Web Performance
mobile performance with web access on mobile
devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, cpu and battery life, it is important to consider the performance of your web content on these platforms.
... mobile performance with web access on mobile
devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, cpu, and battery life, it is important to consider the performance of your web content on these platforms.
... mobile performance checklist a concise checklist of performance considerations impacting mobile network users on hand-held, battery operated
devices.
Progressive web app structure - Progressive web apps (PWAs)
responsive: responsive web design also applies to progressive web apps, as both are mainly for mobile
devices.
... there are so many varied
devices with browsers — it's important to prepare your website so it works on different screen sizes, viewports or pixel densities, using technologies like viewport meta tag, css media queries, flexbox, and css grid.
...the overall approach is to have the design look good on both mobile (with a responsive web design approach) and desktop
devices.
Structural overview of progressive web apps - Progressive web apps (PWAs)
responsive: responsive web design also applies to progressive web apps, as both are mainly for mobile
devices.
... there are so many varied
devices with browsers — it's important to prepare your website so it works on different screen sizes, viewports or pixel densities, using technologies like the viewport meta tag, css media queries, flexbox, and css grid.
...the overall approach is to have the design look good on both mobile (with a responsive web design approach) and desktop
devices.
List of Mozilla-Based Applications - Archive of obsolete content
some mpl files such as libsecurity_asn1 maemo browser browser for maemo internet tablet development name is microb magooclient business process management tool uses mozilla rhino mantra security tool mccoy secure update tool for add-ons xulrunner application mediacoder media converter transcoder for video, audio, and even
devices such as zen, zune, pocketpcs, ipods, and psps mekhala browser part of the khmeros linux distro midbrowser mobile web browser mockery mockup creation tool built on xulrunner mongodb database project uses spidermonkey moyura email client part of the khmeros linux distro mozcards, jolistopwatch, jolitimer ...
...d, rtf, rss feeds taskpool productivity telasocial kiosk app uses xulrunner telekast teleprompter tenfourfox browser for powerpc-based macs timberwolf browser for amiga os4 based on firefox - project page mozilla thunderbird email 47 million dl tomtom home 2 pc application to manage tomtom gps
devices review article from gps magazine; over 2.4m users topstyle html, xhtml and css editor seems to have optional gecko embedding but doesn't use it by default toxtox media browser for tv 5000 downloads trixul gui toolkit uses mozilla spidermonkey trustedbird email client thunderbird bundled with a set of extensions (formerly known as mili...
System - Archive of obsolete content
clipboard interactions with the os clipboard system information get information about the platform on which jetpack is running visual effects os-level visual effects abilities
devices methods for accessing and controlling
devices (ex.
... ipod, zune, cell phones, usb
devices) ...
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
as users become more sophisticated, and as additional
devices become more affordable, they will be accessing the same information across a variety of
devices – and expect them to look and act the same – regardless of whether they are accessing a web site from their desktop, phone, or handheld.
... summary as organizations expand product development across multiple
devices and product families, integration and compatibility must be a key requirement.
Web Standards - Archive of obsolete content
designing and building with these standards simplifies and lowers the cost of production, while delivering sites that are accessible to more people and more types of internet
devices.
... sites developed along these lines will continue to function correctly as traditional desktop browsers evolve, and as new internet
devices come to market.
Index - Game development
28 efficient animation for web games animation, games, javascript this article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end
devices such as mobile phones.
... 30 implementing game control mechanisms controls, desktop, gamepad, games, javascript, laptop, mobile, keyboard, mouse, touch one of html5's main advantages as a game development platform is the ability to run on various platforms and
devices.
2D maze game with device orientation - Game development
now we will add the ability to control the ball with the keyboard on the desktop
devices, and then we will move to the implementation of the device orientation api.
... implementing the device orientation api probably the most interesting part of the game is its usage of the device orientation api for control on mobile
devices.
Gecko FAQ - Gecko Redirect 1
third parties such as isvs and hardware vendors will pick and choose the components they want to use in their applications or hardware
devices.
...many hardware vendors are creating
devices with network access and wish to include web browsing functionality.
Accessibility - Learn web development
note: if you are working on a computer/tablet/other
devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as jsbin or glitch.
... mobile accessibility with web access on mobile
devices being so popular, and popular platforms such as ios and android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms.
How can we design for all types of users? - Learn web development
your readers may have disabled images to save bandwidth, especially on mobile
devices (see below).
... image compression some users may choose to display images, but still have limited bandwidth available, especially in developing countries and on mobile
devices.
The web and web standards - Learn web development
cross-browser compatibility is the practice of trying to make sure your webpage works across as many
devices as possible.
...it also goes beyond people with disabilities — how about young or old people, people from different cultures, people using mobile
devices, or people with unreliable or slow network connections?
Multimedia and Embedding - Learn web development
responsive images in this article, we'll learn about the concept of responsive images — images that work well on
devices with widely differing screen sizes, resolutions, and other such features — and look at what tools html provides to help implement them.
... this helps to improve performance across different
devices.
Index - Learn web development
what users, browsers, and
devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.
...complications can occur when, for example, the file size of a <video> embed is too large, or when a webpage is not optimized for mobile
devices.
Multimedia: Images - Learn web development
you also need to be considerate of memory as many mobile
devices have limited ram.
...on top of that you'd also want to serve higher resolution images to those
devices that boast a high dpi screen (e.g.
Introduction to client-side frameworks - Learn web development
many javascript developers, if left to their own
devices, could end up with all the code related to one part of the ui being spread out all over a file — or in another file altogether.
... some extra code is inevitable, and a framework that supports tree-shaking (removal of any code that isn't actually used in the app during the build process) will allow you to keep your applications small, but this is still a factor you need to keep in mind when considering your app's performance, especially on more network/storage-constrained
devices, like mobile phones.
Getting started with Svelte - Learn web development
nevertheless, svelte is particularly appropriate to tackle the following situations: web applications intended for low power
devices: applications built with svelte have smaller bundle sizes, which is ideal for
devices with slow network connections and limited processing power.
...so this really makes a difference, especially in low-powered
devices or cpu-intensive applications.
Handling common HTML and CSS problems - Learn web development
resolution is a big issue too — for example, mobile
devices are less likely to need big heavy images than desktop computers, and are more likely to have slower internet connections and possibly even expensive data plans that make wasted bandwidth more of a problem.
... in addition, different
devices can have a range of different resolutions, meaning that smaller images could appear pixellated.
Handling common JavaScript problems - Learn web development
performance issues as your apps get more complex and you start to use more javascript, you may start to run into performance problems, especially when viewing apps on slower
devices.
... one thing you might be thinking is "why should we always load the polyfill code, even if we don't need it?" this is a good point — as your sites get more complex and you start to use more libraries, polyfills, etc., you can start to load a lot of extra code, which can start to affect performance, especially on less-powerful
devices.
Tools and testing - Learn web development
on top of that, we still need to keep cross-browser support in the forefront of our minds, and make sure that our code follows best practices that allow our projects to work across different browsers and
devices that our users are using to browse the web, and be usable by people with disabilities.
...what users, browsers and
devices do you most need to worry about?), how to go about testing, the main issues that you'll face with different types of code and how to fix/mitigate those, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.
Adding a new event
mouseevents.h this header file should be used for defining input events from pointing
devices such as mouse.
... touchevents.h this header file should be used for defining input events from touch
devices.
Browser API
note that this method is available for touch enabled
devices only.
...this is particularly useful for zooming in/out on non-touch-enabled
devices.
Mobile
mobile web development mobile
devices have very different hardware characteristics from desktop or laptop computers, and many of the apis used to work with them are still in the process of being standardized.
... read about how to develop web sites that look good on mobile
devices and take advantage of the new possibilities they offer.
Power profiling overview
devices such as ammeters give the best results, but these can be expensive and difficult to set up.
... a cruder technique that works with mobile machines and
devices is to run a program for a long time and simply time how long it takes for the battery to drain.
An overview of NSS Internals
in order to allow interoperability between software and
devices that perform cryptographic operations, nss conforms to a standard called pkcs#11.
...this strategy allows nss to work with many hardware
devices (e.g., to speed up the calculations required for cryptographic operations, or to access smartcards that securely protect a secret key) and software modules (e.g., to allow to load such modules as a plugin that provides additional algorithms or stores key or trust information) that implement the pkcs#11 interface.
PKCS11 module installation
pkcs #11 modules are external modules which add to firefox support for smartcard readers, biometric security
devices, and external certificate stores.
...choose "advanced" > "encryption" > "security
devices" choose "load" enter a name for the security module, such as "my client database".
TPS Tests
after the phases run, two additional "cleanup" phases are run, to unregister the
devices with fxa.
... (implementation detail) two final cleanup phases are run to wipe the server state and unregister
devices.
nsICacheService
as a result,
devices excluded by the storage policy will not be searched when opening entries from the returned session.
... evictentries() this method evicts all entries in all
devices implied by the storage policy.
nsIServerSocket
since a server socket may be bound to multiple network
devices, this address may not necessarily be specific to a single network device.
... in the case of an ip socket, the ip address field would be zeroed out to indicate a server socket bound to all network
devices.
Firefox Developer Tools
responsive design mode see how your website or app will look and behave on different
devices and network types.
...but you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different
devices.
AudioContext.createMediaStreamSource() - Web APIs
the createmediastreamsource() method of the audiocontext interface is used to create a new mediastreamaudiosourcenode object, given a media stream (say, from a media
devices.getusermedia instance), the audio from which can then be played and manipulated.
... var pre = document.queryselector('pre'); var video = document.queryselector('video'); var myscript = document.queryselector('script'); var range = document.queryselector('input'); // getusermedia block - grab stream // put it into a mediastreamaudiosourcenode // also output the visuals into a video element if (navigator.media
devices) { console.log('getusermedia supported.'); navigator.media
devices.getusermedia ({audio: true, video: true}) .then(function(stream) { video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var...
Bluetooth - Web APIs
referringdevice; promise<sequence<bluetoothdevice>> get
devices(); promise<bluetoothdevice> requestdevice(optional requestdeviceoptions options = {}); }; bluetooth includes bluetoothdeviceeventhandlers; bluetooth includes characteristiceventhandlers; bluetooth includes serviceeventhandlers; properties inherits properties from its parent eventtarget.
... bluetooth.get
devices() returns a promise that resolved to an array of bluetooth
devices which the origin already obtained permission for via a call to bluetooth.requestdevice().
HTMLMediaElement.sinkId - Web APIs
this id should be one of the mediadeviceinfo.deviceid values returned from media
devices.enumerate
devices(), id-multimedia, or id-communications.
... syntax var sinkid = htmlmediaelement.sinkid specifications specification status comment audio output
devices apithe definition of 'sinkid' in that specification.
HTMLMediaElement.srcObject - Web APIs
const mediastream = await navigator.media
devices.getusermedia({video: true}); const video = document.createelement('video'); video.srcobject = mediastream; in this example, a new mediasource is assigned to a newly-created <video> element.
... const mediastream = await navigator.media
devices.getusermedia({video: true}); const video = document.createelement('video'); if ('srcobject' in video) { video.srcobject = mediastream; } else { // avoid using this in new browsers, as it is going away.
ImageCapture() constructor - Web APIs
example the following example shows how to use a call to media
devices.getusermedia() to retrieve the mediastreamtrack needed by the imagecapture() constructor.
... navigator.media
devices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); }) .catch(error => console.log(error)); specifications specification status comment mediastream image capturethe definition of 'imagecapture' in that specification.
InputDeviceCapabilities - Web APIs
the inputdevicecapabilities interface of the input device capabilities api provides information about the physical device or a group of related
devices responsible for generating input events.
... in some instances, inputdevicecapabilities represents the capabilities of logical
devices rather than physical
devices.
MediaRecorder() - Web APIs
this source media can come from a stream created using navigator.media
devices.getusermedia() or from an <audio>, <video> or <canvas> element.
...if (navigator.media
devices.getusermedia) { var constraints = { audio: true, video: true }; var chunks = []; var onsuccess = function(stream) { var options = { audiobitspersecond : 128000, videobitspersecond : 2500000, mimetype : 'video/mp4' } var mediarecorder = new mediarecorder(stream,options); m = mediarecorder; ...
MediaStreamConstraints.video - Web APIs
x; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.media
devices.getusermedia({ video: true }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain a video-only stream with no specific constraints, then attaches the resulting stream to a <video> element once the stream is returned.
...x; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.media
devices.getusermedia({ video: { width: 160, height: 120, framerate: 15 } }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of video constraints that indicate a preference for a video track whose dimensions are...
MediaStreamTrack.applyConstraints() - Web APIs
const constraints = { width: {min: 640, ideal: 1280}, height: {min: 480, ideal: 720}, advanced: [ {width: 1920, height: 1280}, {aspectratio: 1.333} ] }; navigator.media
devices.getusermedia({ video: true }) .then(mediastream => { const track = mediastream.getvideotracks()[0]; track.applyconstraints(constraints) .then(() => { // do something with the track such as using the image capture api.
... }) .catch(e => { // the constraints could not be satisfied by the available
devices.
MediaStream Image Capture API - Web APIs
first, get a reference to a device by calling media
devices.getusermedia().
... navigator.media
devices.getusermedia({ video: true }) .then(mediastream => { // do something with the stream.
Using the MediaStream Recording API - Web APIs
when used with navigator.media
devices.getusermedia(), it provides an easy way to record from the user's input
devices and instantly use the result in web apps.
... we'll declare some variables for the record and stop buttons, and the <article> that will contain the generated audio players: const record = document.queryselector('.record'); const stop = document.queryselector('.stop'); const soundclips = document.queryselector('.sound-clips'); finally for this section, we set up the basic getusermedia structure: if (navigator.media
devices && navigator.media
devices.getusermedia) { console.log('getusermedia supported.'); navigator.media
devices.getusermedia ( // constraints - only audio needed for this app { audio: true }) // success callback .then(function(stream) { }) // error callback .catch(function(err) { console.log('the following getusermedia error occ...
MediaTrackConstraints.groupId - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.groupid as returned by a call to media
devices.getsupportedconstraints().
...this makes it possible to use the group id to ensure that the audio and input
devices are on the same headset by retrieving the group id of the input device and specifying it when asking for an output device, perhaps.
MediaTrackConstraints.sampleSize - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.samplesize as returned by a call to media
devices.getsupportedconstraints().
... since this property can only represent linear sample sizes, this constraint can only be met by
devices that can produce audio with linear samples.
MediaTrackSupportedConstraints.cursor - Web APIs
the supported constraints list is obtained by calling navigator.media
devices.getsupportedconstraints().
... async function capturewithcursor() { let supportedconstraints = navigator.media
devices.getsupportedconstraints(); let displaymediaoptions = { video: { displaysurface: "browser" }, audio: false; }; if (supportedconstraints.cursor) { displaymediaoptions.video.cursor = "always"; } try { videoelem.srcobject = await navigator.media
devices.getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications ...
MediaTrackSupportedConstraints.displaySurface - Web APIs
the supported constraints list is obtained by calling navigator.media
devices.getsupportedconstraints().
... async function capture() { let supportedconstraints = navigator.media
devices.getsupportedconstraints(); let displaymediaoptions = { video: { }, audio: false; }; if (supportedconstraints.displaysurface) { displaymediaoptions.video.displaysurface = "monitor"; } try { videoelem.srcobject = await navigator.media
devices.getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specificatio...
MediaTrackSupportedConstraints.frameRate - Web APIs
the mediatracksupportedconstraints dictionary's framerate property is a read-only boolean value which is present (and set to true) in the object returned by media
devices.getsupportedconstraints() if and only if the user agent supports the framerate constraint.
... javascript let result = document.getelementbyid("result"); if (navigator.media
devices.getsupportedconstraints().framerate) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } html <div id="result"> </div> css #result { font: 14px "arial", sans-serif; } result the output, showing if your browser supports the framerate constraint, is: while this example is trivial, you can replace the simple output of "supported" vs.
MediaTrackSupportedConstraints.logicalSurface - Web APIs
the supported constraints list is obtained by calling navigator.media
devices.getsupportedconstraints().
... async function capture() { let supportedconstraints = navigator.media
devices.getsupportedconstraints(); let displaymediaoptions = { video: { }, audio: false; }; if (supportedconstraints.logicalsurface) { displaymediaoptions.video.logicalsurface = "monitor"; } try { videoelem.srcobject = await navigator.media
devices.getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specificatio...
msPlayToSource - Web APIs
var ptm = windows.media.playto.playtomanager.getforcurrentview(); // step 2: register for the sourcerequested event (user swipes
devices charm).
... ptm.addeventlistener("sourcerequested", function(e) { // step 3: specify the media to be streamed (to filter
devices).
NDEFReader.onreading - Web APIs
the onreading property of ndefreader interface of the web nfc api is called whenever a new reading is available from compatible nfc
devices, e.g.
... nfc tags supporting ndef, when these
devices are within the reader's magnetic induction field.
NDEFReader - Web APIs
the ndefreader interface of the web nfc api is an abstract interface used to read data from compatible nfc
devices, e.g.
... nfc tags supporting ndef, when these
devices are within the reader's magnetic induction field.
NDEFWriter - Web APIs
the ndefwriter interface of the web nfc api is an abstract interface used to write data to compatible nfc
devices, e.g.
... nfc tags supporting ndef, when these
devices are within the reader's magnetic induction field.
Navigator - Web APIs
navigator.media
devices returns a reference to a media
devices object which can then be used to get information about available media
devices (media
devices.enumerate
devices()), find out what constrainable properties are supported for media on the user's computer and user agent (media
devices.getsupportedconstraints()), and to request access to media using media
devices.getusermedia().
... navigator.vibrate() causes vibration on
devices with support for it.
Performance Timeline - Web APIs
performance interface extensions: as shown in the performance interface's browser compatibility table, most of these interfaces are broadly implemented by desktop browsers and have less support on mobile
devices.
... performanceentry: as shown in the performanceentry interface's browser compatibility table, most of these interfaces are broadly implemented by desktop browsers and have less support on mobile
devices.
PointerEvent - Web APIs
a pointer is a hardware agnostic representation of input
devices (such as a mouse, pen or contact point on a touch-enable surface).
...for pen
devices, this event is fired when the stylus leaves the hover range detectable by the digitizer.
Proximity Events - Web APIs
note: obviously, the api requires the device to have a proximity sensor, which are mostly available only on mobile
devices.
...
devices without such a sensor may support those events but will never fire them.
ServiceWorkerRegistration.showNotification() - Web APIs
on android
devices, the badge should accommodate
devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked.
... requireinteraction: indicates that on
devices with sufficiently large screens, a notification should remain active until the user clicks or dismisses it.
Using Touch Events - Web APIs
however,
devices with touch screens (especially portable
devices) are mainstream and web applications can either directly process touch-based input by using touch events or the application can use interpreted mouse events for the application input.
...to help address this problem, the pointer events standard defines events and related interfaces for handling hardware agnostic pointer input from
devices including a mouse, pen, touchscreen, etc..
USB - Web APIs
the usb interface of the webusb api provides attributes and methods for finding and connecting usb
devices from a web page.
... methods usb.get
devices() returns a promise that resolves with an array of usbdevice objects for paired attached
devices.
USBDevice.deviceClass - Web APIs
the deviceclass read only property of the usbdevice interface one of three properties that identify usb
devices for the purpose of loading a usb driver that will work with that device.
... the other two properties are usbdevice.
devicesubclass and usbdevice.deviceprotocol.
USBDevice.deviceClass - Web APIs
the deviceclass read only property of the usbdevice interface one of three properties that identify usb
devices for the purpose of loading a usb driver that will work with that device.
... the other two properties are usbdevice.
devicesubclass and usbdevice.deviceprotocol.
USBDevice.deviceProtocol - Web APIs
the deviceprotocol read only property of the usbdevice interface one of three properties that identify usb
devices for the purpose of loading a usb driver that will work with that device.
... the other two properties are usbdevice.deviceclass and usbdevice.
devicesubclass.
WEBGL_compressed_texture_atc - Web APIs
atc is a proprietary compression algorithm for compressing textures on handheld
devices.
... availability: atc compression is typically available on mobile
devices with adreno gpus, that are currently only built into qualcomm snapdragon
devices.
WebGL best practices - Web APIs
mobile
devices typically have smaller screens than powerful desktop machines with large monitors.
... https://github.com/binomialllc/basis_universal/blob/master/webgl/readme.md memory usage of depth and stencil formats depth and stencil attachments and formats are actually inseparable on many
devices.
Introduction to WebRTC protocols - Web APIs
some routers will have restrictions on who can connect to
devices on the network.
... technically, then, sdp is not truly a protocol, but a data format used to describe connection that shares media between
devices.
Using DTMF with WebRTC - Web APIs
note: this example is obviously somewhat contrived, since normally the two rtcpeerconnection objects would exist on different
devices, and signaling would be done over the network instead of it all being simply linked up inline as it is here.
...signalingstatechange = handlecallersignalingstatechangeevent; callerpc.onicegatheringstatechange = handlecallergatheringstatechangeevent; receiverpc = new rtcpeerconnection(); receiverpc.onicecandidate = handlereceivericeevent; if (hasaddtrack) { receiverpc.ontrack = handlereceivertrackevent; } else { receiverpc.onaddstream = handlereceiveraddstreamevent; } navigator.media
devices.getusermedia(mediaconstraints) .then(gotstream) .catch(err => log(err.message)); } after creating the rtcpeerconnection for the caller (callerpc), we look to see if it has an addtrack() method.
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
realistically, though, not only do humans not see anywhere near that much, but viewing
devices such as monitors and vr goggles tend to reduce the field of view even further.
...iewport.y, viewport.width, viewport.height); checkglerror(`setting viewport for eye: ${view.eye}`); myrenderscene(gl, view, scenedata, deltatime); } } } the callback begins by calling a custom function, applypositionoffsets(), which takes a reference space and applies to its transform matrix any changes that need to be made to take into account things such as user inputs from
devices not controlled by webxr, such as the keyboard and mouse.
Web Audio API - Web APIs
it is an audionode that can represent different kinds of filters, tone control
devices, or graphic equalizers.
... iirfilternode implements a general infinite impulse response (iir) filter; this type of filter can be used to implement tone control
devices and graphic equalizers as well.
XREnvironmentBlendMode - Web APIs
additive primarily used by ar
devices with transparent lenses which directly allow reality to pass through to the user's eyes, the additive blending mode is designed to be used in a situation in which the device has no control over the background and its brightness, since that isn't being digitally controlled.
...alpha blending can also be used by non-wearable
devices that provide ar modes, such as phones or tablets using cameras to capture the real world for use in ar apps.
XRInputSourcesChangeEvent() - Web APIs
the xrinputsourceschangeevent() constructor creates and returns a new xrinputsourceschangeevent object, representing an update to the list of available webxr input
devices.
... event types inputsourceschange delivered to the xrsession when the set of input
devices available to it changes.
XRPose.emulatedPosition - Web APIs
contrariwise, xr
devices which can also track movement forward and backward as well as laterally—six degree of freedom (6dof)
devices—don't require any information from other sources to determine the user's position, so the value of emulatedposition is false.
... this information is important because
devices whose position is emulated are prone to their offset drifting relative to the real world space over time.
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
implementing rotation based on non-xr inputs the input controls supported directly by webxr are all dedicated vr or ar input
devices.
... in order to use mouse, keyboard, or other input
devices to move or otherwise transform objects in the 3d space—or to allow the user to move through the space—you'll need to write some code to read the inputs and move perform the movements.
XRReferenceSpace - Web APIs
for
devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment.
...*/ }); the other situation in which you may need to acquire a new reference space is if you need to move the origin to a new position; this is commonly done, for example, when your project allows the user to move through the environment using input
devices such as the keyboard, mouse, touchpad, or game controls that are not connected through the xr device.
XRSession.environmentBlendMode - Web APIs
additive primarily used by ar
devices with transparent lenses which directly allow reality to pass through to the user's eyes, the additive blending mode is designed to be used in a situation in which the device has no control over the background and its brightness, since that isn't being digitally controlled.
...alpha blending can also be used by non-wearable
devices that provide ar modes, such as phones or tablets using cameras to capture the real world for use in ar apps.
XRSession - Web APIs
selectend an event of type xrinputsourceevent which gets sent to the session object when one of its input
devices finishes its primary action or gets disconnected while in the process of handling a primary action.
... selectstart an event of type xrinputsourceevent which is sent to the session object when one of its input
devices is first engaged by the user in such a way as to cause the primary action to begin.
Operable - Accessibility
the conformance criteria under this guideline ensures that users are able to interact with digital technology using different input methods beyond a keyboard or mouse (including touchscreen, voice, device motion, or alternative input
devices.
... understanding target size 2.5.6 concurrent input mechanisms (aaa) added in 2.1 make sure people can use and switch between different modes of input when interacting with digital content including touchscreen, keyboard, mouse, voice commands, or alternative input
devices.
@viewport - CSS: Cascading Style Sheets
it's primarily used for mobile
devices, but is also used by desktop browsers that support features like "snap to edge" (such as microsoft edge).
... on mobile
devices (or desktop
devices that are in full screen mode), the initial viewport is usually the portion of a device's screen that is available for application use.
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
as is noted in the css grid layout specification, this is quite often going to give you a good structure for your smallest screen
devices too.
... create a responsive, and responsible grid with a solid document you can begin to add your layout, it is likely you will be using media queries to create additional columns and make changes for different screen sizes and
devices.
CSS Tutorials - CSS: Cascading Style Sheets
media queries the size of the screens, or the kind of
devices like touchscreens or printed sheets vary greatly nowadays.
...though multi-column text is not that common on
devices like screens, this is particularly useful on printed pages, or for indexes.
Live streaming web audio and video - Developer guides
often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and
devices.
...it can also be used instead of the traditional progressive download method for audio and video on demand: there are several advantages to this: latency is generally lower so media will start playing more quickly adaptive streaming makes for better experiences on a variety of
devices media is downloaded just in time which makes bandwidth usage more efficient streaming protocols while static media is usually served over http, there are several protocols for serving adaptive streams; let's take a look at the options.
Developer guides
mobile web development this article provides an overview of some of the main techniques needed to design web sites that work well on mobile
devices.
...this lets it perform effectively for both powerful desktop systems and weaker handheld
devices.
<img>: The Image Embed element - HTML: Hypertext Markup Language
this gives users without pointing
devices a fallback destination.
... <a href="https://developer.mozilla.org"> <img src="https://udn.realityripple.com/samples/6c/98485e5d8a.png" alt="visit the mdn site"> </a> using the srcset attribute in this example we include a srcset attribute with a reference to a high-resolution version of the logo; this will be loaded instead of the src image on high-resolution
devices.
<link>: The External Resource Link element - HTML: Hypertext Markup Language
this element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile
devices) among other things.
...display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> <!-- iphone with high-resolution retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> <!-- first- and second-generation ipad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> <!-- non-retina iphone, ipod touch, and android 2.1+
devices: --> <link rel="apple-touch-icon-precomposed" href="favicon57.png"> <!-- basic favicon --> <link rel="icon" href="favicon32.png"> conditionally loading resources with media queries you can provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true.
Feature-Policy: camera - HTTP
the http feature-policy header camera directive controls whether the current document is allowed to use video input
devices.
... when this policy is enabled, the promise returned by media
devices.getusermedia() will reject with a notallowederror.
Feature-Policy: microphone - HTTP
the http feature-policy header microphone directive controls whether the current document is allowed to use audio input
devices.
... when this policy is enabled, the promise returned by media
devices.getusermedia() will reject with a notallowederror.
Handling media support issues in web content - Web media technologies
there is a drawback, however: because there are so many to choose from, with so many different kinds of licenses and design principles involved, each web browser developer is left to its own
devices when deciding which media file types and codecs to support.
... a similar concept can be applied to still images; if an image you wish to present is very large and may take time to download (especially for slower
devices or connections), you can offer a lower-resolution or alternate version that will be displayed until the full-quality version is available to be displayed.
Populating the page: how browsers work - Web Performance
building the accessibility tree the browser also builds an accessibility tree that assistive
devices use to parse and interpret content.
...different
devices and different desktop preferences mean an unlimited number of differing viewport sizes.
Index - Archive of obsolete content
3803 web standards needsupdate, web standards the web standards project 3804 choosing standards compliance over proprietary practices web development, web standards as organizations expand product development across multiple
devices and product families, integration and compatibility must be a key requirement.
Tamarin build documentation - Archive of obsolete content
you should be connected and able to see the
devices file system in windows explorer in tamarin repository go to the utils/wmremote directory, open the ceremoteshell2008.sln file in visual studio 2008 build all targets in release mode (for more information see utils/wmremote/readme.txt) copy release/avmremote.dll to the device in the \windows directory export avm=release/ceremoteshell.exe, the ceremoteshell.exe behaves as a proxy copying and r...
TCP/IP Security - Archive of obsolete content
data link layer controls for dedicated circuits are most often provided by specialized hardware
devices known as data link encryptors; data link layer controls for other types of connections, such as dial-up modem communications, are usually provided through software.
XForms - Archive of obsolete content
other strengths that xforms brings to the table is the separation of data from presentation, strong data typing, the ability to submit xml data to servers instead of name/value pairs, and a descriptive way to author forms so that they can be displayed by a wide variety of
devices.
Anatomy of a video game - Game development
* * render() is passed tframe because it is assumed that the render method will calculate * how long it has been since the most recently passed update tick for * extrapolation (purely cosmetic for fast
devices).
Building up a basic demo with the PlayCanvas engine - Game development
built for modern browsers, playcanvas is a fully-featured 3d game engine with resource loading, an entity and component system, advanced graphics manipulation, collision and physics engine (built with ammo.js), audio, and facilities to handle control inputs from various
devices (including gamepads).
Building up a basic demo with PlayCanvas - Game development
playcanvas engine built for modern browsers, playcanvas is a fully-featured 3d game engine with resource loading, an entity and component system, advanced graphics manipulation, collision and physics engine (built with ammo.js), audio, and facilities to handle control inputs from various
devices (including gamepads).
Desktop mouse and keyboard controls - Game development
previous overview: control mechanisms next now when we have our mobile controls in place and the game is playable on touch-enabled
devices, it would be good to add mouse and keyboard support, so the game can be playable also on desktop.
Unconventional controls - Game development
connecting the boards and using them may look like this: var cylon = require('cylon'); cylon.robot({ connections: { arduino: { adaptor: 'firmata', port: '/dev/ttyacm0' } },
devices: { makey: { driver: 'makey-button', pin: 2 } }, work: function(my) { my.makey.on('push', function() { console.log("button pushed!"); }); } }).start(); as the description says: this gpio driver allows you to connect a 10 mohm resistor to a digital pin on your arduino or raspberry pi to control your robots with bananas, clay, or drawable circuitry.
First input delay - MDN Web Docs Glossary: Definitions of Web-related terms
the time between when content is painted to the page and when all the functionality becomes responsive to human interaction often varies based on the the size and complexity of the javascript needing to be downloaded, parsed, and executed on the main thread, and on the device speed or lack thereof (think low end mobile
devices).
Media (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge using media queries technical reference media queries define a set of characteristics or parameters required to apply the css styles that are specified within the curly braces of the media query; for example: only applying certain css styles for
devices below 768 pixels.
Polyfill - MDN Web Docs Glossary: Definitions of Web-related terms
at the time, javascript developers were grasping at straws trying to get their website to work across all
devices because there was such a discrepancy between browsers that the website might have to be programmed radically differently and have a much different user interface based upon the user's browser.
CSS layout - Learn web development
responsive design as more diverse screen sizes have appeared on web-enabled
devices, the concept of responsive web design (rwd) has appeared: a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.
What is a web server? - Learn web development
(for example, html documents, images, css stylesheets, and javascript files) a web server connects to the internet and supports physical data interchange with other
devices connected to the web.
Basic native form controls - Learn web development
<input type="file" name="file" id="file" accept="image/*" multiple> on some mobile
devices, the file picker can access photos, videos, and audio captured directly by the device's camera and microphone by adding capture information to the accept attribute like so: <input type="file" accept="image/*;capture=camera"> <input type="file" accept="video/*;capture=camcorder"> <input type="file" accept="audio/*;capture=microphone"> common attributes many of the elements used to define form c...
How the Web works - Learn web development
a simplified diagram of how they interact might look like this: clients are the typical web user's internet-connected
devices (for example, your computer connected to your wi-fi, or your phone connected to your mobile network) and web-accessing software available on those
devices (usually a web browser like firefox or chrome).
Installing basic software - Learn web development
you should also test how your site performs on mobile
devices and on any old browsers your target audience may still be using (such as ie 8–10.) lynx, a text-based terminal web browser, is great for seeing how your site is experienced by visually-impaired users.
Add a hitmap on top of an image - Learn web development
<map name="example-map-1"> <area shape="circle" coords="200,250,25" href="page-2.html" alt="circle example" /> <area shape="rect" coords="10, 5, 20, 15" href="page-3.html" alt="rectangle example" /> </map> step 3: make sure it works for everybody you aren’t done until you test image maps rigorously on many browsers and
devices.
What’s in the head? Metadata in HTML - Learn web development
esolution retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> <!-- first- and second-generation ipad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> <!-- non-retina iphone, ipod touch, and android 2.1+
devices: --> <link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> <!-- basic favicon --> <link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"> the comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the webs...
Introduction to HTML - Learn web development
note: if you are working on a computer/tablet/other
devices that doesn't let you create your own files, you can try out (most of) the code examples in an online coding program such as jsbin or glitch.
Video and audio content - Learn web development
due to the intricacies of ensuring your app's media is viewable across every combination of browsers, platforms, and
devices you wish to reach, choosing the best combination of codecs and container can be a complicated task.
HTML table basics - Learn web development
tables on the other hand are sized according to their content by default, so extra measures are needed to get table layout styling to effectively work across a variety of
devices.
Introducing JavaScript objects - Learn web development
note: if you are working on a computer/tablet/other
devices where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch.
Web performance - Learn web development
mobile performance with web access on mobile
devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, cpu and battery life, it is important to consider the performance of your web content on these platforms.
Mozilla's Section 508 Compliance
unknown d) where audio information is important for the use of a product, at least one mode of operation and information retrieval shall be provided in an enhanced auditory fashion, or support for assistive hearing
devices shall be provided.
Software accessibility: Where are we today?
some examples of these assistive
devices and software include: screen reading software, which speaks text displayed on the screen using hardware or software text-to-speech, and which allows a blind person to use the keyboard to simulate mouse actions alternate input
devices, which allow people with physical disabilities to use alternatives to a keyboard and mouse voice recognition software, which allows a person to simulate typin...
Experimental features in Firefox
nightly 80 yes developer edition 80 yes beta 80 no release 80 no preference name devtools.netmonitor.features.serversentevents ui desktop zooming this feature lets you enable smooth pinch zooming on desktop computers without requiring layout reflows, just like mobile
devices do.
Firefox
firefox is mozilla's popular web browser, available for multiple platforms including windows, macos, and linux on the desktop and all android and ios mobile
devices.
Using the Browser API
you'll also notice that we're also firing these functions on the touchend event, which is effective as firefox os
devices are generally touchscreen.
Geckoview-Junit Tests
running tests locally if desired, connect an android device to your computer, or start an emulator, and make sure your device is visible to adb: $ adb
devices list of
devices attached emulator-5554 device if no device is found, 'mach geckoview-junit' will offer to start an emulator.
IME handling guide
however, especially on mobile
devices nowadays, ime is also used for inputting latin languages like autocomplete.
Addon
the guid is generated randomly and is made consistent across
devices during sync.
GPU performance
looks like it's designed for x11-based linux-arm
devices, omap3 is mentioned a lot in the docs ...
Memory Profiler
this article details how to use an old profiler specifically designed for firefox os
devices.
Firefox Sync
firefox sync synchronizes state and configuration data used by the browser, such as bookmarks, history, preferences, bookmarks, and so forth among all your
devices.
NSS 3.14.2 release notes
(https://bugzilla.mozilla.org/show_bug.cgi?id=816853) bug 772144 - basic support for running nss test suites on android
devices.this is currently limited to running tests from a linux host machine using an ssh connection.
gtstd.html
pkcs #11 modules can be thought of as drivers for cryptographic
devices that can be implemented in either hardware or software.
sslfnc.html
note that an ssl server that uses fortezza hardware
devices is limited to a single process.
Mozilla Projects
firefox sync firefox sync synchronizes state and configuration data used by the browser, such as bookmarks, history, preferences, bookmarks, and so forth among all your
devices.
nsICacheVisitor
netwerk/cache/nsicachevisitor.idlscriptable this interface provides information about cache
devices and entries.
nsIDOMWindowUtils
if this is set, the synthesized wheel event emulates wheel events come from some
devices without the line scroll amount by the event.
nsIDeviceMotionListener
xpcom/system/nsidevicemotion.idlscriptable this interface can be implemented by clients that want to be notified orientation or acceleration changes on supported
devices.
WebIDL bindings
devicestate the return value depends on the state of the device we're running on (e.g., the system clock).
Index - Firefox Developer Tools
101 responsive design mode design, dev tools, firefox, guide, responsive design, tools, web development, l10n:priority responsive design is the practice of designing a website so it looks and works properly on a range of different
devices — particularly mobile phones and tablets as well as desktops and laptops.
AudioContext.createMediaStreamTrackSource() - Web APIs
navigator.media
devices.getusermedia ({audio: true, video: false}) .then(function(stream) { audio.srcobject = stream; audio.onloadedmetadata = function(e) { audio.play(); audio.muted = true; }; let audioctx = new audiocontext(); let source = audioctx.createmediastreamsource(stream); let biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = ...
Background Tasks API - Web APIs
this code draws any pending updates to the document currently being displayed, runs any javascript code the page needs to run, accepts events from input
devices, and dispatches those events to the elements that should receive them.
BaseAudioContext.createGain() - Web APIs
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.media
devices.getusermedia) { navigator.media
devices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getusermedia not su...
BiquadFilterNode - Web APIs
it is an audionode that can represent different kinds of filters, tone control
devices, and graphic equalizers.
deviceClass - Web APIs
the bluetoothdevice.deviceclass read-only property returns a number representing the bluetooth
devices "class of device".
Managing screen orientation - Web APIs
some
devices (mainly mobile
devices) can dynamically change the orientation of the screen based on their own orientation, ensuring that the user will always be able to read what's on the screen.
DeviceMotionEvent.accelerationIncludingGravity - Web APIs
this value is not typically as useful as devicemotionevent.acceleration, but may be the only value available on
devices that aren't able of removing gravity from the acceleration data, such as on
devices that don't have a gyroscope.
EXT_float_blend - Web APIs
usage notes on
devices that support the ext_float_blend extension, it is automatically, implicitly, enabled when any one or more of ext_color_buffer_float, oes_texture_float, or webgl_color_buffer_float are enabled.
GainNode.gain - Web APIs
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.media
devices.getusermedia) { navigator.media
devices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getusermedia not su...
GainNode - Web APIs
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.media
devices.getusermedia) { navigator.media
devices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getusermedia not su...
Using the Gamepad API - Web APIs
the navigator.getgamepads() method returns an array of all
devices currently visible to the webpage, as gamepad objects (the first value is always null, so null will be returned if there are no gamepads connected.) this can then be used to get the same information.
Using the Geolocation API - Web APIs
devices with a gps, for example, can take a minute or more to get a gps fix, so less accurate data (ip location or wifi) may be returned to getcurrentposition().
HTMLImageElement.alt - Web APIs
syntax htmlimageelement.alt = alttext; let alttext = htmlimageelement.alt; value a domstring which contains the alternate text to display when the image is not loaded or for use by assistive
devices.
HTMLMediaElement: loadeddata event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onloadeddata specification html5 media note that this event will not fire in mobile/tablet
devices if data-saver is on in browser settings.
HTMLMediaElement.setSinkId() - Web APIs
exceptions exception explanation domexception no permission to use the requested device examples const
devices = await navigator.media
devices.enumerate
devices(); const audio
devices =
devices.filter(device => device.kind === 'audiooutput'); const audio = document.createelement('audio'); await audio.setsinkid(audio
devices[0].deviceid); console.log('audio is being played on ' + audio.sinkid); specifications specification status comment audio output
devices apithe definition of 'sin...
HTMLMediaElement - Web APIs
this id should be one of the mediadeviceinfo.deviceid values returned from media
devices.enumerate
devices(), id-multimedia, or id-communications.
IIRFilterNode - Web APIs
the iirfilternode interface of the web audio api is a audionode processor which implements a general infinite impulse response (iir) filter; this type of filter can be used to implement tone control
devices and graphic equalizers as well.
ImageCapture.getPhotoCapabilities() - Web APIs
const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.media
devices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.getsettings(); input.min = photocapabilities.imagewidth.min; input.max = ph...
ImageCapture.getPhotoSettings() - Web APIs
const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.media
devices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.getsettings(); input.min = photocapabilities.imagewidth.min; input.max = ph...
ImageCapture - Web APIs
var imagecapture; function ongetusermediabuttonclick() { navigator.media
devices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); }) .catch(error => console.log(error)); } function ongrabframebuttonclick() { imagecapture.grabframe() .then(imagebitmap => { const canvas = document.queryselector('#grabframec...
Checking when a deadline is due - Web APIs
recording the date information to provide a reasonable user experience on mobile
devices, and to cut down on ambiguities, i decided to create an html form with: a text input for entering a title for your to-do list.
KeyboardEvent.code - Web APIs
if the input device isn't a physical keyboard, but is instead a virtual keyboard or accessibility device, the returned value will be set by the browser to match as closely as possible to what would happen with a physical keyboard, to maximize compatibility between physical and virtual input
devices.
MIDIAccess - Web APIs
the midiaccess interface of the web midi api provides methods for listing midi input and output
devices, and obtaining access to those
devices.
MediaRecorder: error event - Web APIs
examples using addeventlistener to listen for error events: async function record() { const stream = await navigator.media
devices.getusermedia({audio: true}); const recorder = new mediarecorder(stream); recorder.addeventlistener('error', (event) => { console.error(`error recording stream: ${event.error.name}`) }); recorder.start(); } record(); the same, but using the onerror event handler property: async function record() { const stream = await navigator.media
devices.getusermedia({audio: true}...
MediaRecorder.mimeType - Web APIs
if (navigator.media
devices) { console.log('getusermedia supported.'); var constraints = { audio: true, video: true }; var chunks = []; navigator.media
devices.getusermedia(constraints) .then(function(stream) { var options = { audiobitspersecond: 128000, videobitspersecond: 2500000, mimetype: 'video/mp4' } var mediarecorder = new mediarecorder(stream,options); m =...
MediaRecorder - Web APIs
example if (navigator.media
devices) { console.log('getusermedia supported.'); var constraints = { audio: true }; var chunks = []; navigator.media
devices.getusermedia(constraints) .then(function(stream) { var mediarecorder = new mediarecorder(stream); visualize(stream); record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); console.log("recorder started");...
MediaSettingsRange - Web APIs
const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.media
devices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.getsettings(); input.min = photocapabilities.imagewidth.min; input.max = ph...
active - Web APIs
var promise = navigator.media
devices.getusermedia({ audio: true, video: true }); promise.then(function(stream) { var startbtn = document.queryselector('#startbtn'); startbtn.disabled = stream.active; };) specifications specification status comment media capture and streamsthe definition of 'active' in that specification.
MediaStream.getAudioTracks() - Web APIs
navigator.media
devices.getusermedia({audio: true, video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; // stop the audio stream after 5 seconds settimeout(() => { const tracks = mediastream.getaudiotracks() tracks[0].stop() }, 5000) }) specifications specification status comment media capture and streamsthe definition of 'getaudiotr...
MediaStream.getTracks() - Web APIs
example navigator.media
devices.getusermedia({audio: false, video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; // stop the stream after 5 seconds settimeout(() => { const tracks = mediastream.gettracks() tracks[0].stop() }, 5000) }) specifications specification status comment media capture and streamsthe definition of 'gettracks()' in that specification.
MediaStream.getVideoTracks() - Web APIs
var imagecapture; navigator.media
devices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) specifications specification status comment media capture and streamsthe definition of 'getvideotracks()' in that specifi...
MediaStream.id - Web APIs
syntax var id = mediastream.id; example var p = navigator.media
devices.getusermedia({ audio: true, video: true }); p.then(function(stream) { console.log(stream.id); }) specifications specification status comment media capture and streamsthe definition of 'mediastream.id' in that specification.
MediaStream - Web APIs
each track is specified as an instance of mediastreamtrack.you can obtain a mediastream object either by using the constructor or by calling media
devices.getusermedia().
MediaStreamAudioSourceNode() - Web APIs
// define variables var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // getusermedia block - grab stream // put it into a mediastreamaudiosourcenode if (navigator.media
devices.getusermedia) { navigator.media
devices.getusermedia ( // constraints: audio and video for this app { audio: true, video: false }).then(function(stream) { var options = { mediastream : stream } var source = new mediastreamaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(functio...
MediaStreamAudioSourceNode - Web APIs
var pre = document.queryselector('pre'); var video = document.queryselector('video'); var myscript = document.queryselector('script'); var range = document.queryselector('input'); // getusermedia block - grab stream // put it into a mediastreamaudiosourcenode // also output the visuals into a video element if (navigator.media
devices) { console.log('getusermedia supported.'); navigator.media
devices.getusermedia ({audio: true, video: true}) .then(function(stream) { video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var...
MediaStreamTrackAudioSourceNode() - Web APIs
let audioctx = new (window.audiocontext || window.webkitaudiocontext)(); if (navigator.media
devices.getusermedia) { navigator.media
devices.getusermedia ( { audio: true, video: false }).then(function(stream) { let options = { mediastreamtrack: stream.getaudiotracks()[0]; } let source = new mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(function(err) { console.log('the following gu...
MediaStreamTrackAudioSourceNode - Web APIs
var pre = document.queryselector('pre'); var video = document.queryselector('video'); var myscript = document.queryselector('script'); var range = document.queryselector('input'); // getusermedia block - grab stream // put it into a mediastreamaudiosourcenode // also output the visuals into a video element if (navigator.media
devices) { console.log('getusermedia supported.'); navigator.media
devices.getusermedia ({audio: true, video: true}) .then(function(stream) { video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var...
MediaStreamTrackAudioSourceOptions.mediaStreamTrack - Web APIs
let audioctx = new (window.audiocontext || window.webkitaudiocontext)(); if (navigator.media
devices.getusermedia) { navigator.media
devices.getusermedia ( { audio: true, video: false }).then(function(stream) { let options = { mediastreamtrack: stream.getaudiotracks()[0]; } let source = new mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(function(err) { console.log('the following gu...
MediaTrackConstraints.aspectRatio - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.aspectratio as returned by a call to media
devices.getsupportedconstraints().
MediaTrackConstraints.autoGainControl - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.autogaincontrol as returned by a call to media
devices.getsupportedconstraints().
MediaTrackConstraints.channelCount - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.channelcount as returned by a call to media
devices.getsupportedconstraints().
MediaTrackConstraints.cursor - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.cursor as returned by a call to media
devices.getsupportedconstraints().
MediaTrackConstraints.deviceId - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.deviceid as returned by a call to media
devices.getsupportedconstraints().
MediaTrackConstraints.displaySurface - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.displaysurface as returned by a call to media
devices.getsupportedconstraints().
MediaTrackConstraints.echoCancellation - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.echocancellation as returned by a call to media
devices.getsupportedconstraints().
MediaTrackConstraints.facingMode - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.facingmode as returned by a call to media
devices.getsupportedconstraints().
MediaTrackConstraints.frameRate - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.framerate as returned by a call to media
devices.getsupportedconstraints().
MediaTrackConstraints.height - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.height as returned by a call to media
devices.getsupportedconstraints().
MediaTrackConstraints.latency - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.latency as returned by a call to media
devices.getsupportedconstraints().
MediaTrackConstraints.logicalSurface - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.logicalsurface as returned by a call to media
devices.getsupportedconstraints().
MediaTrackConstraints.noiseSuppression - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.noisesuppression as returned by a call to media
devices.getsupportedconstraints().
MediaTrackConstraints.sampleRate - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.samplerate as returned by a call to media
devices.getsupportedconstraints().
MediaTrackControls.volume - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.volume as returned by a call to media
devices.getsupportedconstraints().
MediaTrackConstraints.width - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.width as returned by a call to media
devices.getsupportedconstraints().
MediaTrackSettings.aspectRatio - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.aspectratio as returned by a call to media
devices.getsupportedconstraints().
MediaTrackSettings.autoGainControl - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.autogaincontrol as returned by a call to media
devices.getsupportedconstraints().
MediaTrackSettings.channelCount - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.channelcount as returned by a call to media
devices.getsupportedconstraints().
MediaTrackSettings.deviceId - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.deviceid as returned by a call to media
devices.getsupportedconstraints().
MediaTrackSettings.echoCancellation - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.echocancellation as returned by a call to media
devices.getsupportedconstraints().
MediaTrackSettings.facingMode - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.facingmode as returned by a call to media
devices.getsupportedconstraints().
MediaTrackSettings.frameRate - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.framerate as returned by a call to media
devices.getsupportedconstraints().
MediaTrackSettings.height - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.height as returned by a call to media
devices.getsupportedconstraints().
MediaTrackSettings.latency - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.latency as returned by a call to media
devices.getsupportedconstraints().
MediaTrackSettings.noiseSuppression - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.noisesuppression as returned by a call to media
devices.getsupportedconstraints().
MediaTrackSettings.sampleRate - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.samplerate as returned by a call to media
devices.getsupportedconstraints().
MediaTrackSettings.sampleSize - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.samplesize as returned by a call to media
devices.getsupportedconstraints().
MediaTrackSettings.volume - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.volume as returned by a call to media
devices.getsupportedconstraints().
MediaTrackSettings.width - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.width as returned by a call to media
devices.getsupportedconstraints().
Media Session API - Web APIs
*/ }); } some user agents disable autoplay for media elements on mobile
devices and require a user gesture to start media.
Media Capture and Streams API (Media Stream) - Web APIs
blobevent canvascapturemediastreamtrack inputdeviceinfo mediadevicekind mediadeviceinfo media
devices mediastream mediastreamconstraints mediastreamevent mediastreamtrack mediastreamtrackevent mediatrackconstraints mediatracksettings mediatracksupportedconstraints overconstrainederror url early versions of the media capture and streams api specification included separate audiostreamtrack and videostreamtrack interfaces—each based upon mediastreamtrack—which represented stre...
MouseEvent.button - Web APIs
some pointing
devices only have one button and use keyboard or other input mechanisms to indicate main, secondary, auxilary, etc.
NDEFMessage - Web APIs
the ndefmessage interface of the web nfc api is an abstract interface that represents message that can be received or sent to a to compatible nfc
devices, e.g.
NDEFReader() - Web APIs
the ndefreader() constructor of the web nfc api returns a newly constructed ndefreader object used to read ndef messages from compatiable nfc
devices, e.g.
NDEFRecord() - Web APIs
the ndefrecord() constructor of the web nfc api returns a newly constructed ndefrecord object that represents data that can be read from or written to compatible nfc
devices, e.g.
NDEFRecord - Web APIs
the ndefrecord interface of the web nfc api is an abstract interface that represents data that can be read from or written to compatible nfc
devices, e.g.
NDEFWriter() - Web APIs
the ndefwriter() constructor of the web nfc api returns a newly constructed ndefwriter object used to write ndef messages to compatiable nfc
devices, e.g.
Notification - Web APIs
notification.vibrate read only specifies a vibration pattern for
devices with vibration hardware to emit.
Payment Request API - Web APIs
a browser can also sync these "credentials" across
devices, making it easy for users to jump from desktop to mobile and back again when buying things.
PhotoCapabilities - Web APIs
const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.media
devices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.getsettings(); input.min = photocapabilities.imagewidth.min; input.max = ph...
PointerEvent.pointerType - Web APIs
if the browser supports pointer device types other than those listed above, the value should be vendor-prefixed to avoid conflicting names for different types of
devices.
Multi-touch interaction - Web APIs
pointer events extend dom input events to support various pointing input
devices such as pen/stylus and touch screens as well as mouse.
Pinch zoom gestures - Web APIs
example in this example, you use the pointer events to simultaneously detect two pointing
devices of any type, including fingers, mice, and pens.
RTCDTMFSender - Web APIs
for that reason, dtmf can't be used between two webrtc-based
devices, because there is no mechanism provided by webrtc for receiving dtmf codes.
RTCIceTransport.state - Web APIs
however, there are still candidates pairings to consider, and there may still be gathering underway on one or both of the two
devices.
RTCIceTransportState - Web APIs
however, there are still candidates pairings to consider, and there may still be gathering underway on one or both of the two
devices.
RTCPeerConnection.addStream() - Web APIs
navigator.media
devices.getusermedia({video:true, audio:true}, function(stream) { var pc = new rtcpeerconnection(); pc.addstream(stream); }); migrating to addtrack() compatibility allowing, you should update your code to instead use the addtrack() method: navigator.getusermedia({video:true, audio:true}, function(stream) { var pc = new rtcpeerconnection(); stream.gettracks().foreach(function(track) { pc.ad...
RTCPeerConnection.setRemoteDescription() - Web APIs
function handleoffer(msg) { createmypeerconnection(); mypeerconnection.setremotedescription(msg.description).then(function () { return navigator.media
devices.getusermedia(mediaconstraints); }) .then(function(stream) { document.getelementbyid("local_video").srcobject = stream; return mypeerconnection.addstream(stream); }) .then(function() { return mypeerconnection.createanswer(); }) .then(function(answer) { return mypeerconnection.setlocaldescription(answer); }) .then(function() { // send the answer to the remote pee...
RTCRtpSender.replaceTrack() - Web APIs
examples switching video cameras // example to change video camera, suppose selected value saved into window.selectedcamera navigator.media
devices .getusermedia({ video: { deviceid: { exact: window.selectedcamera } } }) .then(function(stream) { let videotrack = stream.getvideotracks()[0]; pcs.foreach(function(pc) { var sender = pc.getsenders().find(function(s) { return s.track.kind == videotrack.kind; }); console.log('found sender:', sender); sender.replacetrack(video...
ReportingObserver - Web APIs
eports, observer) { reportbtn.onclick = () => displayreports(reports); }, options); we then tell it to start observing reports using reportingobserver.observe(); this tells the observer to start collecting reports in its report queue, and runs the callback function specified inside the constructor: observer.observe(); later on in the example we deliberately use the deprecated version of media
devices.getusermedia(): if(navigator.mozgetusermedia) { navigator.mozgetusermedia( constraints, success, failure); } else { navigator.getusermedia( constraints, success, failure); } this causes a deprecation report to be generated; because of the event handler we set up inside the reportingobserver() constructor, we can now click the button to display the report details.
Reporting API - Web APIs
eports, observer) { reportbtn.onclick = () => displayreports(reports); }, options); we then tell it to start observing reports using reportingobserver.observe(); this tells the observer to start collecting reports in its report queue, and runs the callback function specified inside the constructor: observer.observe(); later on in the example we deliberately use the deprecated version of media
devices.getusermedia(): if(navigator.mozgetusermedia) { navigator.mozgetusermedia( constraints, success, failure); } else { navigator.getusermedia( constraints, success, failure); } this causes a deprecation report to be generated; because of the event handler we set up inside the reportingobserver() constructor, we can now click the button to display the report details.
SVGSVGElement - Web APIs
this interface contains also various miscellaneous commonly-used utility methods, such as matrix operations and the ability to control the time of redraw on visual rendering
devices.
SpeechSynthesisVoice.default - Web APIs
the default read-only property of the speechsynthesisvoice interface returns a boolean indicating whether the voice is the default voice for the current app (true), or not (false.) note: for some
devices, it might be the default voice for the voice's language.
Touch - Web APIs
this can be helpful when dealing with imprecise pointing
devices such as fingers.
USBDevice.clearHalt() - Web APIs
syntax var promise = usbdevice.clearhalt(direction, endpointnumber) parameters direction indicates whether the
devices input or output should be cleared.
USBDevice.controlTransferIn() - Web APIs
the available options are: requesttype: must be one of three values specifying whether the tranfer is "standard" (common to all usb
devices) "class" (common to an industry-standard class of
devices) or "vendor".
USBDevice.controlTransferOut() - Web APIs
the available options are: requesttype: must be one of three values specifying whether the tranfer is "standard" (common to all usb
devices) "class" (common to an industry-standard class of
devices) or "vendor".
USBEndpoint - Web APIs
let inendpoint = undefined; let outendpoint = undefined; for (const interface of device.configuration.interfaces) { // only support
devices with out multiple alternate interfaces.
VRStageParameters - Web APIs
the vrstageparameters interface of the webvr api represents the values describing the the stage area for
devices that support room-scale experiences.
Vibration API - Web APIs
most modern mobile
devices include vibration hardware, which lets software code provide physical feedback to the user by causing the device to shake.
Using textures in WebGL - Web APIs
gl.texparameteri(gl.texture_2d, gl.texture_wrap_t, gl.clamp_to_edge); again, with these parameters, compatible webgl
devices will automatically accept any resolution for that texture (up to their maximum dimensions).
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
async function start() { try { const stream = await navigator.media
devices.getusermedia(constraints); for (const track of stream.gettracks()) { pc.addtrack(track, stream); } selfvideo.srcobject = stream; } catch(err) { console.error(err); } } this isn't appreciably different from older webrtc connection establishment code.
WebRTC API - Web APIs
see also media
devices mediastreamevent mediastreamconstraints mediastreamtrack messageevent mediastream media capture and streams api firefox multistream and renegotiation for jitsi videobridge peering through the webrtc fog with socketpeer inside the party bus: building a web app with multiple live video streams + interactive graphics web media technologies ...
Using bounded reference spaces - Web APIs
<<<--- example --->>> creating a bounded reference space before creating a project that relies on bounded reference spaces, it's important to keep in mind that not all xr
devices are capable of creating them.
Lighting a WebXR setting - Web APIs
if two or more
devices access content that uses the same third-party script, that script can be used to correlate lighting information and how it changes over time to attempt to determine a spatial relationship between the
devices; this could in theory indicate that the
devices are in the same general area, for example.
WebXR performance guide - Web APIs
as such, you may find yourself needing to make adjustments or compromises to optimize the performance of your webxr application to be as usable as possible on the broadest assortment of target
devices.
Targeting and hit detection - Web APIs
some
devices include infrared sensors to help range objects, and others provide powerful lidar systems, which use lasers (usually infrared lasers, which can't be seen by the human eye) to determine range to objects in the world.
Using IIR filters - Web APIs
the iirfilternode interface of the web audio api is an audionode processor that implements a general infinite impulse response (iir) filter; this type of filter can be used to implement tone control
devices and graphic equalizers, and the filter response parameters can be specified, so that it can be tuned as needed.
Using the Web Speech API - Web APIs
<h1>speech color changer</h1> <p>tap/click then say a color to change the background color of the app.</p> <div> <p class="output"><em>...diagnostic messages</em></p> </div> the css provides a very simple responsive styling so that it looks ok across
devices.
Window.onbeforeinstallprompt - Web APIs
the window.onbeforeinstallprompt property is an event handler for processing a beforeinstallprompt, which is dispatched on
devices when a user is about to be prompted to "install" a web application.
Window - Web APIs
window.ondevicelight an event handler property for any ambient light levels changes window.ondevicemotion called if accelerometer detects a change (for mobile
devices) window.ondeviceorientation called when the orientation is changed (for mobile
devices) window.ondeviceorientationabsolute an event handler property for any device orientation changes.
XRInputSourceArray.entries() - Web APIs
if (input.targetraymode === "tracked-pointer" && input.handedness === player.handedness) { /* handle main hand controller */ handlemainhandinput(input); } else { /* handle other inputs */ } } } for each input in the llist, gamepad inputs are dispatched to a checkgamepad() with the input's gamepad object, taken from its gamepad property, as an input for other
devices, we look for tracked-pointer
devices in the player's main hand, dispatching those to a handlemainhandinput() method.
XRInputSourceArray.forEach() - Web APIs
argetraymode === "tracked-pointer" && input.handedness === player.handedness) { /* handle main hand controller */ handlemainhandinput(input); } else { /* handle other inputs */ } } }); for each input in the llist, the callback dispatches gamepad inputs to a checkgamepad() with the input's gamepad object, taken from its gamepad property, as an input for other
devices, we look for tracked-pointer
devices in the player's main hand, dispatching those to a handlemainhandinput() method.
XRReferenceSpaceType - Web APIs
for
devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment.
XRSession.requestAnimationFrame() - Web APIs
let xrsession = null function onwindowanimationframe(time) { window.requestanimationframe(onwindowanimationframe) // this may be called while an immersive session is running on some
devices, // such as a desktop with a tethered headset.
XRSystem: ondevicechange - Web APIs
}; value undefined example navigator.xr.ondevicechange = function(ev) { console.log("the availability of immersive xr
devices has changed.") }; specifications specification status comment webxr device apithe definition of 'ondevicechange ' in that specification.
XRWebGLLayer.getViewport() - Web APIs
for webxr
devices which use a single framebuffer for both the left and right eyes, the returned viewport represents the region of the framebuffer into which the scene should be rendered for the eye represented by the view.
Web APIs
lockedfile m midiaccess midiconnectionevent midiinput midiinputmap midimessageevent midioutputmap mscandidatewindowhide mscandidatewindowshow mscandidatewindowupdate msgestureevent msgraphicstrust msmanipulationevent msrangecollection mssitemodeevent magnetometer mathmlelement mediacapabilities mediacapabilitiesinfo mediaconfiguration mediadecodingconfiguration mediadeviceinfo media
devices mediaelementaudiosourcenode mediaencodingconfiguration mediaerror mediaimage mediakeymessageevent mediakeysession mediakeystatusmap mediakeysystemaccess mediakeysystemconfiguration mediakeys medialist mediametadata mediapositionstate mediaquerylist mediaquerylistevent mediaquerylistlistener mediarecorder mediarecordererrorevent mediasession mediasessionactiondetails mediasettingsrange mediasour...
ARIA guides - Accessibility
non virtual mode in at products using drag & drop notifying users of non-aria screen readers fixing structure with presentation role hiding layout tables managing modal and non modal dialogs using aria with html5 how to test aria aria on mobile
devices ...
Accessibility Information for Web Authors - Accessibility
this document tackles such difficulties and shows several interactive desktop-style widgets such as tree views, menu bars and spreadsheets which are accessible both with the keyboard and assistive technologies such as screen readers, screen magnifiers and alternative input
devices.
Accessibility
mobile accessibility with web access on mobile
devices being so popular, and popular platforms such as ios and android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms.
color-index - CSS: Cascading Style Sheets
examples basic example html <p>this is a test.</p> css p { color: black; } @media (color-index) { p { color: red; } } @media (min-color-index: 15000) { p { color: #1475ef; } } result custom stylesheet this html will apply a special stylesheet for
devices that have at least 256 colors.
color - CSS: Cascading Style Sheets
examples html <p>this text should be black on non-color
devices, red on
devices with a low number of colors, and greenish on
devices with a high number of colors.</p> css p { color: black; } /* any color device */ @media (color) { p { color: red; } } /* any color device with at least 8 bits per color component */ @media (min-color: 8) { p { color: #24ba13; } } result specifications specification status comment ...
hover - CSS: Cascading Style Sheets
none the primary input mechanism cannot hover at all or cannot conveniently hover (e.g., many mobile
devices emulate hovering when the user performs an inconvenient long tap), or there is no primary pointing input mechanism.
orientation - CSS: Cascading Style Sheets
opening the soft keyboard on many
devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.
shape - CSS: Cascading Style Sheets
examples basic example html <h1>hello world!</h1> css h1 { text-align: left; } @media (shape: rect) { h1 { text-align: left; } } @media (shape: round) { h1 { text-align: center; } } custom stylesheet this html will apply a special stylesheet for
devices that have round screens.
Media queries - CSS: Cascading Style Sheets
for example, a media query can shrink the font size on small
devices, increase the padding between paragraphs when a page is viewed in portrait mode, or bump up the size of buttons on touchscreens.
text-size-adjust - CSS: Cascading Style Sheets
/* keyword values */ text-size-adjust: none; text-size-adjust: auto; /* <percentage> value */ text-size-adjust: 80%; /* global values */ text-size-adjust: inherit; text-size-adjust: initial; text-size-adjust: unset; because many websites have not been developed with small
devices in mind, mobile browsers differ from desktop browsers in the way they render web pages.
Using HTML sections and outlines - Developer guides
by contrast, the <nav> sectioning element more clearly describes to browsers and other
devices the content contained: links or other navigational structures to help users move through and understand where they are in a site's or page's content.
A hybrid approach - Developer guides
for example, an often-criticized point about responsive web design is that full-resolution images are sent to all
devices, including phones that show the images scaled down anyway.
HTML attribute: accept - HTML: Hypertext Markup Language
(many mobile
devices also let the user take a picture with the camera when this is used.) accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — accept anything that smells like an ms word document.
HTML attribute: capture - HTML: Hypertext Markup Language
d like?:</label> <input type="file" id="soundfile" capture="user" accept="audio/*"> </p> <p> <label for="videofile">upload a video:</label> <input type="file" id="videofile" capture="environment" accept="video/*"> </p> <p> <label for="imagefile">upload a photo of yourself:</label> <input type="file" id="imagefile" capture="user" accept="image/*"> </p> note these work better on mobile
devices; if your device is a desktop computer, you'll likely get a typical file picker.
HTML attribute: rel - HTML: Hypertext Markup Language
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> <!-- iphone with high-resolution retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> <!-- first- and second-generation ipad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> <!-- non-retina iphone, ipod touch, and android 2.1+
devices: --> <link rel="apple-touch-icon-precomposed" href="favicon57.png"> ...
<input type="file"> - HTML: Hypertext Markup Language
(many mobile
devices also let the user take a picture with the camera when this is used.) accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — accept anything that smells like an ms word document.
title - HTML: Hypertext Markup Language
html <div title="cooltip"> <p>hovering here will show “cooltip”.</p> <p title="">hovering here will show nothing.</p> </div> result accessibility concerns use of the title attribute is highly problematic for: people using touch-only
devices people navigating with keyboards people navigating with assistive technology such as screen readers or magnifiers people experiencing fine motor control impairment people with cognitive concerns this is due to inconsistent browser support, compounded by the additional assistive technology parsing of the browser-rendered page.
Using images in HTML - Web media technologies
learn html: responsive images in this article, we'll learn about the concept of responsive images — images that work well on
devices with widely differing screen sizes, resolutions, and other such features — and look at what tools html provides to help implement them.
Privacy, permissions, and information security
ity and privacy technology or feature description certificate transparency an open standard for monitoring and auditing certificates, creating a database of public logs that can be used to help identify incorrect or malicious certificates content security policy provides the ability to define the extent to which a document's content can be accessed by other
devices over the web; used in particular to prevent or mitigate attacks on the server feature policy lets web developers selectively enable, disable, and modify the behavior of certain features and apis both for a document and for subdocuments loaded in <iframe>s <iframe>'s allow attribute technically part of feature policy, the allow attribute on an <iframe> specifies which web f...