Search completed in 1.17 seconds.
<track>: The Embed Text Track element - HTML: Hypertext Markup Language
the html <
track> element is used as a child of the media elements, <audio> and <video>.
... it lets you specify timed text
tracks (or time-based data), for example to automatically handle subtitles.
... the
tracks are formatted in webvtt format (.vtt files) — web video text
tracks.
...And 18 more matches
AudioTrackList.getTrackById() - Web APIs
the audio
tracklist method get
trackbyid() returns the first audio
track object from the
track list whose id matches the specified string.
... this lets you find a specified
track if you know its id string.
... syntax var the
track = audio
tracklist.get
trackbyid(id); paramters id a domstring indicating the id of the
track to locate within the
track list.
...And 7 more matches
AudioTrackList.onaddtrack - Web APIs
the audio
tracklist property onadd
track is an event handler which is called when the add
track event occurs, indicating that a new audio
track has been added to the media element whose audio
tracks the audio
tracklist represents.
... the event is passed into the event handler in the form of a
trackevent object, whose
track property identifies the newly-added
track.
... note: you can also add a handler for the add
track event using addeventlistener().
...And 7 more matches
TextTrackList.onaddtrack - Web APIs
the text
tracklist property onadd
track is an event handler which is called when the add
track event occurs, indicating that a new text
track has been added to the media element whose text
tracks the text
tracklist represents.
... the event is passed into the event handler in the form of a
trackevent object, whose
track property identifies the newly-added
track.
... note: you can also add a handler for the add
track event using addeventlistener().
...And 6 more matches
VideoTrackList.onaddtrack - Web APIs
the video
tracklist property onadd
track is an event handler which is called when the add
track event occurs, indicating that a new video
track has been added to the media element whose video
tracks the video
tracklist represents.
... the event is passed into the event handler in the form of a
trackevent object, whose
track property identifies the newly-added
track.
... note: you can also add a handler for the add
track event using addeventlistener().
...And 6 more matches
AudioTrackList.onremovetrack - Web APIs
the audio
tracklist onremove
track event handler is called when the remove
track event occurs, indicating that an audio
track has been removed from the media element, and therefore also from the audio
tracklist.
... the event is passed into the event handler in the form of a
trackevent object, whose
track property identifies the
track that was removed from the media element's audio
tracklist.
... note: you can also add a handler for the remove
track event using addeventlistener().
...And 5 more matches
TextTrackList.onremovetrack - Web APIs
the text
tracklist onremove
track event handler is called when the remove
track event occurs, indicating that a text
track has been removed from the media element, and therefore also from the text
tracklist.
... the event is passed into the event handler in the form of a
trackevent object, whose
track property identifies the
track that was removed from the media element's text
tracklist.
... note: you can also add a handler for the remove
track event using addeventlistener().
...And 4 more matches
TrackDefault.TrackDefault() - Web APIs
the
trackdefault() constructor of the
trackdefault interface constructs and returns a new
trackdefault object.
... syntax var
trackdefault = new
trackdefault(type, language, label, kinds, bytestream
trackid); parameters type a domstring specifying a media segment data type for the sourcebuffer to contain.
... language a domstring specifying a default language for the sourcebuffer to use when an initialization segment does not contain language information for a new
track.
...And 4 more matches
VideoTrackList.onremovetrack - Web APIs
the video
tracklist onremove
track event handler is called when the remove
track event occurs, indicating that a video
track has been removed from the media element, and therefore also from the video
tracklist.
... the event is passed into the event handler in the form of a
trackevent object, whose
track property identifies the
track that was removed from the media element's video
tracklist.
... note: you can also add a handler for the remove
track event using addeventlistener().
...And 4 more matches
TrackEvent.track - Web APIs
the read-only
track property of the
trackevent interface specifies the media
track object to which the event applies.
... this will be an audio
track, video
track, or text
track object.
... syntax
track =
trackevent.
track; value an object which is one of the types audio
track, video
track, or text
track, depending on the type of media represented by the
track.
...And 3 more matches
MediaStreamTrackAudioSourceOptions.mediaStreamTrack - Web APIs
the mediastream
trackaudiosourceoptions dictionary's mediastream
track property must contain a reference to the mediastream
track from which the mediastream
trackaudiosourcenode being created using the mediastream
trackaudiosourcenode() constructor.
... syntax mediastream
trackaudiosourceoptions = { mediastream
track: audiosource
track; } mediastream
trackaudiosourceoptions.mediastream
track = audiosource
track; value a mediastream
track from which the audio output of the new mediastream
trackaudiosourcenode will be taken.
... example this example uses getusermedia() to obtain access to the user's camera, then creates a new mediastreamaudiosourcenode from the first audio
track provided by the device.
... let audioctx = new (window.audiocontext || window.webkitaudiocontext)(); if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( { audio: true, video: false }).then(function(stream) { let options = { mediastream
track: stream.getaudio
tracks()[0]; } let source = new mediastream
trackaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new getusermedia not supported on your browser!'); } specifications specification status comment web audio apithe definition of 'mediastream
trackaudiosourceoptions.mediastream' in that specification.
RTCTrackEventInit.track - Web APIs
the rtc
trackeventinit dictionary's
track property specifies the mediastream
track associated with the
track event.
... syntax var
trackeventinit = { receiver: rtpreceiver,
track: mediastream
track, streams: [videostream], transceiver: rtptransceiver }; var
track =
trackeventinit.
track; value a mediastream
track representing the
track with which the event is associated.
... this is the
track that's being added to the rtcpeerconnection.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtc
trackeventinit.
track' in that specification.
TrackDefaultList.TrackDefault() - Web APIs
the
trackdefault() getter method of the
trackdefaultlist interface allows the
trackdefault objects in the list to be accessed with an array operator (i.e.
... [].) syntax var my
trackdefault =
trackdefaultlist[index]; parameters index the index position of the
trackdefault object you want to return.
... returns a
trackdefault object.
... errors no specific errors are returned, but if the supplied index is great than or equal to
trackdefaultlist.length, the operation will return undefined.
RTCTrackEvent.track - Web APIs
the webrtc api interface rtc
trackevent's read-only
track property specifies the mediastream
track that has been added to the rtcpeerconnection.
... syntax var
track =
trackevent.
track; value a mediastream
track indicating the
track which has been added to the rtcpeerconnection.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtc
trackevent.
track' in that specification.
TrackDefault.byteStreamTrackID - Web APIs
the bytestream
trackid read-only property of the
trackdefault interface returns the id of the specific
track that the sourcebuffer should apply to.
... if not specified in the constructor, this value will be an empty string and the sourcebuffer can contain any
tracks of the specified
trackdefault.type.
... syntax var myid =
trackdefault.bytestream
trackid; value a domstring.
AudioTrackList: addtrack event - Web APIs
the add
track event is fired when a
track is added to an audio
tracklist.
... bubbles no cancelable no interface
trackevent event handler property onadd
track examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.audio
tracks.addeventlistener('add
track', (event) => { console.log(`audio
track: ${event.
track.label} added`); }); using the onadd
track event handler property: const videoelement = document.queryselector('video'); videoelement.audio
tracks.onadd
track = (event) => { console.log(`audio
track: ${event.
track.label} added`); }; specifications specification status html living standardthe definition of 'add
track' in that specification.
AudioTrackList: removetrack event - Web APIs
the remove
track event is fired when a
track is removed from an audio
tracklist.
... bubbles no cancelable no interface
trackevent event handler property onremove
track examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.audio
tracks.addeventlistener('remove
track', (event) => { console.log(`audio
track: ${event.
track.label} removed`); }); using the onremove
track event handler property: const videoelement = document.queryselector('video'); videoelement.audio
tracks.onremove
track = (event) => { console.log(`audio
track: ${event.
track.label} removed`); }; specifications specification status html living standardthe definition of 'remove
track' in that specification.
TextTrackList: addtrack event - Web APIs
the add
track event is fired when a
track is added to a text
tracklist.
... bubbles no cancelable no interface
trackevent event handler property onadd
track examples using addeventlistener(): const mediaelement = document.queryselector('video, audio'); mediaelement.text
tracks.addeventlistener('add
track', (event) => { console.log(`text
track: ${event.
track.label} added`); }); using the onadd
track event handler property: const mediaelement = document.queryselector('video, audio'); mediaelement.text
tracks.onadd
track = (event) => { console.log(`text
track: ${event.
track.label} added`); }; specifications specification status html living standardthe definition of 'add
track' in that specification.
TextTrackList: removeTrack event - Web APIs
the remove
track event is fired when a
track is removed from a text
tracklist.
... bubbles no cancelable no interface
trackevent event handler property onremove
track examples using addeventlistener(): const mediaelement = document.queryselector('video, audio'); mediaelement.text
tracks.addeventlistener('remove
track', (event) => { console.log(`text
track: ${event.
track.label} removed`); }); using the onremove
track event handler property: const mediaelement = document.queryselector('video, audio'); mediaelement.text
tracks.onremove
track = (event) => { console.log(`text
track: ${event.
track.label} removed`); }; specifications specification status html living standardthe definition of 'remove
track' in that specification.
TrackDefaultList.TrackDefaultList() - Web APIs
the
trackdefaultlist() constructor of the
trackdefaultlist interface constructs and returns a new
trackdefaultlist object.
... syntax var
trackdefaultlist = new
trackdefaultlist(
trackdefaults); parameters
trackdefaults a sequence (array) of
trackdefault objects.
VideoTrackList: addtrack event - Web APIs
the add
track event is fired when a
track is added to a video
tracklist.
... bubbles no cancelable no interface
trackevent event handler property onadd
track examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.video
tracks.addeventlistener('add
track', (event) => { console.log(`video
track: ${event.
track.label} added`); }); using the onadd
track event handler property: const videoelement = document.queryselector('video'); videoelement.video
tracks.onadd
track = (event) => { console.log(`video
track: ${event.
track.label} added`); }; specifications specification status html living standardthe definition of 'add
track' in that specification.
VideoTrackList: removetrack event - Web APIs
the remove
track event is fired when a
track is removed from a video
tracklist.
... bubbles no cancelable no interface
trackevent event handler property onremove
track examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.video
tracks.addeventlistener('remove
track', (event) => { console.log(`video
track: ${event.
track.label} removed`); }); using the onremove
track event handler property: const videoelement = document.queryselector('video'); videoelement.video
tracks.onremove
track = (event) => { console.log(`video
track: ${event.
track.label} removed`); }; specifications specification status html living standardthe definition of 'remove
track' in that specification.
Storage access policy: Block cookies from trackers
firefox includes a new storage access policy that blocks cookies and other site data from third-party
tracking resources.
...this policy protects against cross-site
tracking while minimizing the site breakage associated with traditional cookie blocking.
...firefox nightly may also contain experimental features that we don't yet plan to ship to release users; experimental features will not be included in this documentation, but may nevertheless impact the functionality of domains classified as
trackers.
...And 55 more matches
RTCPeerConnection.addTrack() - Web APIs
the rtcpeerconnection method add
track() adds a new media
track to the set of
tracks which will be transmitted to the other peer.
... note: adding a
track to a connection triggers renegotiation by firing a negotiationneeded event.
... syntax rtpsender = rtcpeerconnection.add
track(
track, stream...); parameters
track a mediastream
track object representing the media
track to add to the peer connection.
...And 29 more matches
MediaStreamTrack - Web APIs
the mediastream
track interface represents a single media
track within a stream; typically, these are audio or video
tracks, but other
track types may exist as well.
... properties in addition to the properties listed below, mediastream
track has constrainable properties which can be set using applyconstraints() and accessed using getconstraints() and getsettings().
... mediastream
track.contenthint a string that may be used by the web application to provide a hint as to what type of content the
track contains to guide how it should be treated by api consumers.
...And 27 more matches
TextTrack.mode - Web APIs
the text
track interface's mode property is a string specifying and controlling the text
track's mode: disabled, hidden, or showing.
... syntax var mode = text
track.mode; text
track.mode = "disabled" | "hidden" | "showing"; value a domstring which indicates the
track's current mode.
... the text
track mode is one of the values listed below, under text
track mode constants.
...And 21 more matches
MediaTrackSettings - Web APIs
the media
tracksettings dictionary is used to return the current values configured for each of a mediastream
track's settings.
... these values will adhere as closely as possible to any constraints previously described using a media
trackconstraints object and set using applyconstraints(), and will adhere to the default constraints for any properties whose constraints haven't been changed, or whose customized constraints couldn't be matched.
...for example, because rtp doesn't provide some of these values during negotiation of a webrtc connection, a
track associated with a rtcpeerconnection will not include certain values, such as facingmode or groupid.
...And 20 more matches
AudioTrack - Web APIs
the audio
track interface represents a single audio
track from one of the html media elements, <audio> or <video>.
... the most common use for accessing an audio
track object is to toggle its enabled property in order to mute and unmute the
track.
... properties enabled a boolean value which controls whether or not the audio
track's sound is enabled.
...And 18 more matches
HTMLTrackElement - Web APIs
the html
trackelement interface represents an html <
track> element within the dom.
... this element can be used as a child of either <audio> or <video> to specify a text
track containing information such as closed captions or subtitles.
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/html
trackelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
trackelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits p...
...And 18 more matches
AudioTrackList - Web APIs
the audio
tracklist interface is used to represent a list of the audio
tracks contained within a given html media element, with each
track represented by a separate audio
track object in the list.
... retrieve an instance of this object with htmlmediaelement.audio
tracks.
... the individual
tracks can be accessed using array syntax.
...And 17 more matches
VideoTrackList - Web APIs
the video
tracklist interface is used to represent a list of the video
tracks contained within a <video> element, with each
track represented by a separate video
track object in the list.
... retrieve an instance of this object with htmlmediaelement.video
tracks.
... the individual
tracks can be accessed using array syntax or functions such as foreach() for example.
...And 17 more matches
RTCRtpSender.replaceTrack() - Web APIs
the rtcrtpsender method replace
track() replaces the
track currently being used as the sender's source with a new mediastream
track.
... the new
track must be of the same media kind (audio, video, etc) and switching the
track should not require negotiation.
... among the use cases for replace
track() is the common need to switch between the rear- and front-facing cameras on a phone.
...And 16 more matches
RTCTrackEvent - Web APIs
the webrtc api interface rtc
trackevent represents the
track event, which is sent when a new mediastream
track is added to an rtcrtpreceiver which is part of the rtcpeerconnection.
... the target is the rtcpeerconnection object to which the
track is being added.
... this event is sent by the webrtc layer to the web site or application, so you will not typically need to instantiate an rtc
trackevent yourself.
...And 16 more matches
TextTrack - Web APIs
the text
track interface—part of the api for handling webvtt (text
tracks on media presentations)—describes and controls the text
track associated with a particular <
track> element.
... text
track.activecues read only a text
trackcuelist object listing the currently active set of text
track cues.
...
track cues are active if the current playback position of the media is between the cues' start and end times.
...And 15 more matches
TextTrackList - Web APIs
the text
tracklist interface is used to represent a list of the text
tracks defined by the <
track> element, with each
track represented by a separate text
track object in the list.
... retrieve an instance of this object with htmlmediaelement.text
tracks.
... the individual
tracks can be accessed using array syntax or functions such as foreach() for example.
...And 15 more matches
VideoTrack - Web APIs
the video
track interface represents a single video
track from a <video> element.
... the most common use for accessing a video
track object is to toggle its selected property in order to make it the active video
track for its <video> element.
... properties selected a boolean value which controls whether or not the video
track is active.
...And 14 more matches
AudioTrack.kind - Web APIs
the kind property contains a string indicating the category of audio contained in the audio
track.
... the kind can be used to determine the scenarios in which specific
tracks should be enabled or disabled.
... see audio
track kind strings for a list of the kinds available for audio
tracks.
...And 12 more matches
HTMLMediaElement.textTracks - Web APIs
the read-only text
tracks property on htmlmediaelement objects returns a text
tracklist object listing all of the text
track objects representing the media element's text
tracks, in the same order as in the list of text
tracks.
... you can detect when
tracks are added to and removed from an <audio> or <video> element using the add
track and remove
track events.
...instead, they're sent to the
track list object of the htmlmediaelement that corresponds to the type of
track that was added to the element the returned list is live; that is, as
tracks are added to and removed from the media element, the list's contents change dynamically.
...And 12 more matches
Tracking Protection
what is
tracking protection?
... firefox desktop and firefox for android include built-in
tracking protection.
... in private browsing windows (tabs, in firefox for android), firefox will block content loaded from domains that
track users across sites.
...And 11 more matches
VideoTrack.kind - Web APIs
the kind property contains a string indicating the category of video contained in the video
track.
... the kind can be used to determine the scenarios in which specific
tracks should be enabled or disabled.
... see video
track kind strings for a list of the kinds available for video
tracks.
...And 11 more matches
AudioTrack.enabled - Web APIs
the audio
track property enabled specifies whether or not the described audio
track is currently enabled for use.
... if the
track is disabled by setting enabled to false, the
track is muted and does not produce audio.
... syntax isaudioenabled = audio
track.enabled; audio
track.enabled = true | false; value the enabled property is a boolean whose value is true if the
track is enabled; enabled
tracks produce audio while the media is playing.
...And 10 more matches
MediaStreamTrack.enabled - Web APIs
the enabled property on the mediastream
track interface is a boolean value which is true if the
track is allowed to render the source stream or false if it is not.
... this can be used to intentionally mute a
track.
... when enabled, a
track's data is output from the source to the destination; otherwise, empty frames are output.
...And 10 more matches
MediaTrackConstraints - Web APIs
the media
trackconstraints dictionary is used to describe a set of capabilities and the value or values each can take on.
... a constraints dictionary is passed into applyconstraints() to allow a script to establish a set of exact (required) values or ranges and/or preferred values or ranges of values for the
track, and the most recently-requested set of custom constraints can be retrieved by calling getconstraints().
...for example, because rtp doesn't provide some of these values during negotiation of a webrtc connection, a
track associated with a rtcpeerconnection will not include certain values, such as facingmode or groupid.
...And 10 more matches
TrackEvent - Web APIs
the
trackevent interface, which is part of the html dom specification, is used for events which represent changes to a set of available
tracks on an html media element; these events are add
track and remove
track.
... it's important not to confuse
trackevent with the rtc
trackevent interface, which is used for
tracks which are part of an rtcpeerconnection.
... events based on
trackevent are always sent to one of the media
track list types: events involving video
tracks are always sent to the video
tracklist found in htmlmediaelement.video
tracks events involving audio
tracks are always sent to the audio
tracklist specified in htmlmediaelement.audio
tracks events affecting text
tracks are sent to the text
tracklist object indicated by htmlmediaelement.text
tracks.
...And 10 more matches
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
to accomplish this, software needs the ability to not only
track the locations, orientation, and movements of objects in the virtual world, but the user's location, orientation, and movement as well.
... but webxr goes beyond that by adding the ability to
track the location, orientation, and motion of the input devices which generate data used to determine the position and movement of individual parts of the viewer's body (with appropriate equipment).
... in this guide, we'll explore how webxr uses spaces and, more specifically, reference spaces, to
track the positions, orientations, and movements of objects and of the user's body in the virtual world.
...And 10 more matches
HTMLMediaElement.audioTracks - Web APIs
the read-only audio
tracks property on htmlmediaelement objects returns an audio
tracklist object listing all of the audio
track objects representing the media element's audio
tracks.
... the returned list is live; that is, as
tracks are added to and removed from the media element, the list's contents change dynamically.
... once you have a reference to the list, you can monitor it for changes to detect when new audio
tracks are added or existing ones removed.
...And 8 more matches
TextTrackCue - Web APIs
text
trackcue is an abstract class which is used as the basis for the various derived cue types, such as vttcue; you will instead work with those derived types.
... these cues represent a string of text that is presented for some duration of time during the performance of a text
track.
... text
trackcue.
track read only the text
track that this cue belongs to, or null if it doesn't belong to any.
...And 8 more matches
MediaStreamTrack.stop() - Web APIs
the mediastream
track.stop() method stops the
track.
... syntax
track.stop() description calling stop() tells the user agent that the
track's source—whatever that source may be, including files, network streams, or a local camera or microphone—is no longer needed by the mediastream
track.
... since multiple
tracks may use the same source (for example, if two tabs are using the device's microphone), the source itself isn't necessarily immediately stopped.
...And 7 more matches
MediaStream.getAudioTracks() - Web APIs
the getaudio
tracks() method of the mediastream interface returns a sequence that represents all the mediastream
track objects in this stream's
track set where mediastream
track.kind is audio.
... syntax var mediastream
tracks = mediastream.getaudio
tracks() parameters none.
... return value an array of mediastream
track objects, one for each audio
track contained in the stream.
...And 6 more matches
MediaStream.getVideoTracks() - Web APIs
the getvideo
tracks() method of the mediastream interface returns a sequence of mediastream
track objects representing the video
tracks in this stream.
... syntax var mediastream
tracks[] = mediastream.getvideo
tracks(); parameters none.
... return value an array of mediastream
track objects, one for each video
track contained in the media stream.
...And 6 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
web video text
tracks format (webvtt) is a format for displaying timed text
tracks (such as subtitles or captions) using the <
track> element.
...there is also a small api available to represent and manage these
tracks and the data needed to perform the playback of the text at the correct times.
... we can then have one or more lines that start with a hyphen (-), each containing part of the text
track to be shown.
...And 6 more matches
AudioTrack.label - Web APIs
the read-only audio
track property label returns a string specifying the audio
track's human-readable label, if one is available; otherwise, it returns an empty string.
... syntax var audio
tracklabel = audio
track.label; value a domstring specifying the
track's human-readable label, if one is available in the
track metadata.
... for example, a
track whose kind is "commentary" might have a label such as "commentary with director mark markmarkimark and star donna donnalidon".
...And 5 more matches
AudioTrackList.length - Web APIs
the read-only audio
tracklist property length returns the number of entries in the audio
tracklist, each of which is an audio
track representing one audio
track in the media element.
... a value of 0 indicates that there are no audio
tracks in the media.
... syntax var
trackcount = audio
tracklist.length; value a number indicating how many audio
tracks are included in the audio
tracklist.
...And 5 more matches
HTMLMediaElement.videoTracks - Web APIs
the read-only video
tracks property on htmlmediaelement objects returns a video
tracklist object listing all of the video
track objects representing the media element's video
tracks.
... the returned list is live; that is, as
tracks are added to and removed from the media element, the list's contents change dynamically.
... once you have a reference to the list, you can monitor it for changes to detect when new video
tracks are added or existing ones removed.
...And 5 more matches
MediaStream.onaddtrack - Web APIs
the mediastream.onadd
track property is an eventhandler which specifies a function to be called when the add
track event occurs on a mediastream instance.
... this happens when a new
track of any kind is added to the media stream.
... this event is fired when the browser adds a
track to the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream() gets a new set of
tracks because the media element being captured loaded a new source.
...And 5 more matches
MediaStream.onremovetrack - Web APIs
the mediastream.onremove
track property is an eventhandler which specifies a function to be called when the remove
track event occurs on a mediastream instance.
... this happens when a
track of any kind is removed from the media stream.
... this event is fired when the browser removes a
track from the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream() gets a new set of
tracks because the media element being captured loaded a new source.
...And 5 more matches
MediaStreamTrack: mute event - Web APIs
the mute event is sent to a mediastream
track when the
track's source is temporarily unable to provide media data.
... when the
track is once again able to produce media output, an unmute event is sent.
... during the time between the mute event and the unmute event, the value of the
track's muted property is true.
...And 5 more matches
MediaStreamTrackAudioSourceNode() - Web APIs
the web audio api's mediastream
trackaudiosourcenode() constructor creates and returns a new mediastream
trackaudiosourcenode object whose audio is taken from the mediastream
track specified in the given options object.
... another way to create a mediastream
trackaudiosourcenode is to call theaudiocontext.createmediastream
tracksource() method, specifying the mediastream
track from which you want to obtain audio.
... syntax audio
tracknode = new mediastream
trackaudiosourcenode(context, options); parameters context an audiocontext representing the audio context you want the node to be associated with.
...And 5 more matches
MediaTrackSettings.deviceId - Web APIs
the media
tracksettings dictionary's deviceid property is a domstring which uniquely identifies the source for the corresponding mediastream
track for the origin corresponding to the browsing session.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the media
trackconstraints.deviceid property you provided when calling either getusermedia().
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.deviceid as returned by a call to mediadevices.getsupportedconstraints().
...And 5 more matches
RTCTrackEvent() - Web APIs
the rtc
trackevent() constructor creates and returns a new rtc
trackevent object, configured to describe the
track which has been added to the rtcpeerconnection.
... in general, you won't need to use this constructor, as rtc
trackevent objects are created by webrtc and delivered to your rtcpeerconnector's on
track event handler as appropriate.
... syntax
trackevent = new rtc
trackevent(eventinfo); parameters eventinfo an object based on the rtc
trackeventinit dictionary, providing information about the
track which has been added to the rtcpeerconnection.
...And 5 more matches
TrackDefault - Web APIs
the
trackdefault interface provides a sourcebuffer with kind, label, and language information for
tracks that do not contain this information in the initialization segments of a media chunk.
... a
trackdefault object is provided to a sourcebuffer object by setting its sourcebuffer.
trackdefaults property.
... constructor
trackdefault() constructs and returns a new
trackdefault object.
...And 5 more matches
AudioTrack.language - Web APIs
the read-only audio
track property language returns a string identifying the language used in the audio
track.
... for
tracks that include multiple languages (such as a movie in english in which a few lines are spoken in other languages), this should be the video's primary language.
... syntax var audio
tracklanguage = audio
track.language; value a domstring specifying the bcp 47 (rfc 5646) format language tag of the primary language used in the audio
track, or an empty string ("") if the language is not specified or known, or if the
track doesn't contain speech.
...And 4 more matches
AudioTrackList.onchange - Web APIs
the audio
tracklist property onchange is an event handler which is called when the change event occurs, indicating that one or more of the audio
tracks in the audio
tracklist have been enabled or disabled.
...to determine the new state of media's
tracks, you'll have to look at their audio
track.enabled flags.
... syntax audio
tracklist.onchange = eventhandler; value set onchange to a function that should be called whenever
tracks are enabled or disabled on the media element.
...And 4 more matches
MediaStreamTrack.muted - Web APIs
the muted read-only property of the mediastream
track interface returns a boolean value indicating whether or not the
track is currently unable to provide media output.
... to implement a way for users to mute and unmute a
track, use the enabled property.
... when a
track is disabled by setting enabled to false, it generates only empty frames (audio frames in which every sample is 0, or video frames in which every pixel is black).
...And 4 more matches
MediaStreamTrackAudioSourceNode - Web APIs
the mediastream
trackaudiosourcenode interface is a type of audionode which represents a source of audio data taken from a specific mediastream
track obtained through the webrtc or media capture and streams apis.
... a mediastream
trackaudiosourcenode has no inputs and exactly one output, and is created using the audiocontext.createmediastream
tracksource() method.
... this interface is similar to mediastreamaudiosourcenode, except it lets you specifically state the
track to use, rather than assuming the first audio
track on a stream.
...And 4 more matches
MediaStreamTrackEvent() - Web APIs
the mediastream
trackevent() constructor returns a newly created mediastream
trackevent object, which represents an event announcing that a mediastream
track has been added to or removed from a mediastream.
... syntax var
trackevent = new mediastream
trackevent(type, {
track: amediastream
track}); parameters the mediastream
trackevent() constructor also inherits arguments from event().
... type a domstring representing the name of the type of the mediastream
trackevent.
...And 4 more matches
MediaTrackConstraints.cursor - Web APIs
the media
trackconstraints dictionary's cursor property is a constraindomstring describing the requested or mandatory constraints placed upon the value of the cursor constrainable property, which is used to specify whether or not the cursor should be included in the captured video.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.cursor as returned by a call to mediadevices.getsupportedconstraints().
... syntax var constraintsobject = { cursor: constraint }; constraintsobject.cursor = constraint; value a constraindomstring which specifies whether or not the mouse cursor should be rendered into the video
track in the mediastream returned by the call to getdisplaymedia().
...And 4 more matches
MediaTrackSettings.displaySurface - Web APIs
the media
tracksettings dictionary's displaysurface property indicates the type of display surface being captured.
... syntax displaysurface = media
tracksettings.displaysurface; value the value of displaysurface is a string that comes from the displaycapturesurfacetype enumerated type, and is one of the following: application the stream's video
track contains all of the windows belonging to the application chosen by the user.
... the windows are aggragated into a single video
track, with any empty space filled with a backdrop; that backdrop is selected by the user agent.
...And 4 more matches
MediaTrackSettings.groupId - Web APIs
the media
tracksettings dictionary's groupid property is a browsing-session unique domstring which identifies the group of devices which includes the source for the mediastream
track.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the media
trackconstraints.groupid property you provided when calling either getusermedia().
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.groupid as returned by a call to mediadevices.getsupportedconstraints().
...And 4 more matches
RTCPeerConnection.ontrack - Web APIs
the rtcpeerconnection property on
track is an eventhandler which specifies a function to be called when the
track event occurs, indicating that a
track has been added to the rtcpeerconnection.
... the function receives as input the event object, of type rtc
trackevent; this event is sent when a new incoming mediastream
track has been created and associated with an rtcrtpreceiver object which has been added to the set of receivers on connection.
... syntax rtcpeerconnection.on
track = eventhandler; value set on
track to be a function you provide that accepts as input a rtc
trackevent object describing the new
track and how it's being used.
...And 4 more matches
RTCPeerConnection: track event - Web APIs
the
track event is sent to the on
track event handler on rtcpeerconnections after a new
track has been added to an rtcrtpreceiver which is part of the connection.
... bubbles yes cancelable no interface rtc
trackevent event handler property on
track by the time this event is delivered, the new
track has been fully added to the peer connection.
... see
track event types in rtc
trackevent for details.
...And 4 more matches
TextTrackList.length - Web APIs
the read-only text
tracklist property length returns the number of entries in the text
tracklist, each of which is a text
track representing one
track in the media element.
... a value of 0 indicates that there are no text
tracks in the media.
... syntax var
trackcount = text
tracklist.length; value a number indicating how many text
tracks are included in the text
tracklist.
...And 4 more matches
VideoTrack.label - Web APIs
the read-only video
track property label returns a string specifying the video
track's human-readable label, if one is available; otherwise, it returns an empty string.
... syntax var video
tracklabel = video
track.label; value a domstring specifying the
track's human-readable label, if one is available in the
track metadata.
... for example, a
track whose kind is "sign" might have a label such as "a sign-language interpretation.".
...And 4 more matches
VideoTrackList.length - Web APIs
the read-only video
tracklist property length returns the number of entries in the video
tracklist, each of which is a video
track representing one video
track in the media element.
... a value of 0 indicates that there are no video
tracks in the media.
... syntax var
trackcount = video
tracklist.length; value a number indicating how many video
tracks are included in the video
tracklist.
...And 4 more matches
AudioContext.createMediaStreamTrackSource() - Web APIs
the createmediastream
tracksource() method of the audiocontext interface creates and returns a mediastream
trackaudiosourcenode which represents an audio source whose data comes from the specified mediastream
track.
... this differs from createmediastreamsource(), which creates a mediastreamaudiosourcenode whose audio comes from the audio
track in a specified mediastream whose id is first, lexicographically (alphabetically).
... syntax var audioctx = new audiocontext(); var
track = audioctx.createmediastream
tracksource(
track); parameters
track the mediastream
track to use as the source of all audio data for the new node.
...And 3 more matches
AudioTrack.id - Web APIs
the id property contains a string which uniquely identifies the
track represented by the audio
track.
... this id can be used with the audio
tracklist.get
trackbyid() method to locate a specific
track within the media associated with a media element.
... the
track id can also be used as the fragment of a url that loads the specific
track (if the media supports media fragments).
...And 3 more matches
CanvasCaptureMediaStreamTrack - Web APIs
the canvascapturemediastream
track interface represents the video
track contained in a mediastream being generated from a <canvas> following a call to htmlcanvaselement.capturestream().
... properties this interface inherits the properties of its parent, mediastream
track.
... canvascapturemediastream
track.canvas read only returns the htmlcanvaselement object whose surface is captured in real-time.
...And 3 more matches
HTMLTrackElement: cuechange event - Web APIs
the cuechange event fires when a text
track has changed the currently displaying cues.
... the event is fired at both the text
track and at the html
trackelement in which it's being presented, if any.
... bubbles no cancelable no interface event event handler oncuechange examples on the text
track you can set up a listener for the cuechange event on a text
track using the addeventlistener() method:
track.addeventlistener('cuechange', function () { let cues =
track.activecues; // array of current cues }); or you can just set the oncuechange event handler property:
track.oncuechange = function () { let cues =
track.activecues; // array of current cues } on the
track element the underlying text
track, indicated by the
track property, receives a cuechange event every time the currently-presented cue is changed.
...And 3 more matches
MediaStream.getTrackById() - Web APIs
the mediastream.get
trackbyid() method returns a mediastream
track object representing the
track with the specified id string.
... if there is no
track with the specified id, this method returns null.
... syntax var
track = mediastream.get
trackbyid(id); parameters id a domstring which identifies the
track to be returned.
...And 3 more matches
MediaStreamTrack: unmute event - Web APIs
the unmute event is sent to a mediastream
track when the
track's source is once again able to provide media data after a period of not being able to do so.
... bubbles no cancelable no interface event event handler property onunmute note: the condition that most people think of as "muted" (that is, a user-controllable way to silence a
track) is actually managed using the mediastream
track.enabled property, for which there are no events.
... examples in this example, event handlers are established for the mute and unmute events in order to detect when the media is not flowing from the source for the mediastream
track stored in the variable music
track.
...And 3 more matches
MediaStreamTrackEvent - Web APIs
the mediastream
trackevent interface represents events which indicate that a mediastream has had
tracks added to or removed from the stream through calls to media stream api methods.
..."50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediastream
trackevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediastream
trackevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the events based on ...
...this interface are add
track and remove
track properties also inherits properties from its parent interface, event.
...And 3 more matches
MediaTrackConstraints.deviceId - Web APIs
the media
trackconstraints dictionary's deviceid property is a constraindomstring describing the requested or mandatory constraints placed upon the value of the deviceid constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.deviceid as returned by a call to mediadevices.getsupportedconstraints().
... because rtp doesn't include this information,
tracks associated with a webrtc rtcpeerconnection will never include this property.
...And 3 more matches
MediaTrackSettings.echoCancellation - Web APIs
the media
tracksettings dictionary's echocancellation property is a boolean value whose value indicates whether or not echo cancellation is enabled on an audio
track.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the media
trackconstraints.echocancellation property you provided when calling either getusermedia() or mediastream
track.applyconstraints().
...for example, it might apply a filter that negates the sound being produced on the speakers from being included in the input
track generated from the microphone.
...And 3 more matches
TextTrack: cuechange event - Web APIs
the cuechange event fires when a text
track has changed the currently displaying cues.
... the event is fired at both the text
track and at the html
trackelement in which it's being presented, if any.
... bubbles no cancelable no interface event event handler property globaleventhandlers.oncuechange examples on the text
track you can set up a listener for the cuechange event on a text
track using the addeventlistener() method:
track.addeventlistener('cuechange', function () { let cues =
track.activecues; // array of current cues }); or you can just set the oncuechange event handler property:
track.oncuechange = function () { let cues =
track.activecues; // array of current cues } on the
track element the underlying text
track, indicated by the
track property, receives a cuechange event every time the currently-presented cue is changed.
...And 3 more matches
getTrackById() - Web APIs
the text
tracklist method get
trackbyid() returns the first text
track object from the
track list whose id matches the specified string.
... this lets you find a specified
track if you know its id string.
... syntax var the
track = text
tracklist.get
trackbyid(id); paramters id a domstring indicating the id of the
track to locate within the
track list.
...And 3 more matches
TrackEvent() - Web APIs
the
trackevent() constructor creates and returns a new
trackevent object describing an event which occurred on a list of
tracks (audio
tracklist, video
tracklist, or text
tracklist).
... syntax
trackevent = new
trackevent(type, eventinfo); parameters type the type of
track event which is described by the object: "add
track" or "remove
track".
... eventinfo optional an optional dictionary providing additional information configuring the new event; it can contain the following fields in any combination:
track optional the
track to which the event refers; this is null by default, but should be set to a video
track, audio
track, or text
track as appropriate given the type of
track.
...And 3 more matches
getTrackById - Web APIs
the video
tracklist method get
trackbyid() returns the first video
track object from the
track list whose id matches the specified string.
... this lets you find a specified
track if you know its id string.
... syntax var the
track = video
tracklist.get
trackbyid(id); paramters id a domstring indicating the id of the
track to locate within the
track list.
...And 3 more matches
VideoTrackList.onchange - Web APIs
the video
tracklist property onchange is an event handler which is called when the change event occurs, indicating that a video
track in the video
tracklist has been made active.
...to determine the new state of media's
tracks, you'll have to look at their video
track.selected flags.
... syntax video
tracklist.onchange = eventhandler; value set onchange to a function that should be called whenever a
track is made active.
...And 3 more matches
::-ms-track - Archive of obsolete content
the ::-ms-
track css pseudo-element is a microsoft extension that represents the
track of a slider control.
... applying the color property within the ::-ms-
track selector affects the tick marks inside the
track area.
... it is possible to use the ::-ms-ticks-after, ::-ms-ticks-before, and ::-ms-
track pseudo-elements together.
...And 2 more matches
MediaStream.addTrack() - Web APIs
the mediastream.add
track() method adds a new
track to the stream.
... the
track is specified as a parameter of type mediastream
track.
... if the specified
track is already in the stream's
track set, this method has no effect.
...And 2 more matches
MediaStream.getTracks() - Web APIs
the get
tracks() method of the mediastream interface returns a sequence that represents all the mediastream
track objects in this stream's
track set, regardless of mediastream
track.kind.
... syntax var mediastream
tracks = mediastream.get
tracks() parameters none.
... return value an array of mediastream
track objects.
...And 2 more matches
MediaStreamTrack.applyConstraints() - Web APIs
the applyconstraints() method of the mediastream
track interface applies a set of constraints to the
track; these constraints let the web site or app establish ideal values and acceptable ranges of values for the constrainable properties of the
track, such as frame rate, dimensions, echo cancelation, and so forth.
... syntax const appliedpromise =
track.applyconstraints([constraints]) parameters constraints optional a media
trackconstraints object listing the constraints to apply to the
track's constrainable properties; any existing constraints are replaced with the new values specified, and any constrainable properties not included are restored to their default constraints.
...the object may contain an advanced property containing an array of additional media
trackconstrants objects, which are treated as exact requires.
...And 2 more matches
MediaStreamTrack.kind - Web APIs
the mediastream
track.kind read-only property returns a domstring set to "audio" if the
track is an audio
track and to "video", if it is a video
track.
... it doesn't change if the
track is deassociated from its source.
... syntax const type =
track.kind value the possible values are a domstring with on of the following values: "audio": the
track is an audio
track.
...And 2 more matches
MediaStreamTrack.onended - Web APIs
the mediastream
track.onended event handler is used to specify a function which serves as an eventhandler to be called when the ended event occurs on the
track.
... this event occurs when the
track will no longer provide data to the stream for any reason, including the end of the media input being reached, the user revoking needed permissions, the source device being removed, or the remote peer ending a connection.
... syntax mediastream
track.onended = function; value a function to serve as an eventhandler for the ended event.
...And 2 more matches
MediaStreamTrack.onunmute - Web APIs
mediastream
track's onunmute event handler is called when the unmute event is received.
... such an event is sent when the
track is again able to send data.
... when the onunmute event handler is called, the
track's muted flag is false.
...And 2 more matches
MediaTrackConstraints.displaySurface - Web APIs
the media
trackconstraints dictionary's displaysurface property is a constraindomstring describing the requested or mandatory constraints placed upon the value of the displaysurface constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.displaysurface as returned by a call to mediadevices.getsupportedconstraints().
... usage notes you can check the setting selected by the user agent after the display media has been created by getdisplaymedia() by calling getsettings() on the display media's video mediastream
track, then checking the value of the returned media
tracksettings object's displaysurface object.
...And 2 more matches
MediaTrackConstraints.groupId - Web APIs
the media
trackconstraints dictionary's groupid property is a constraindomstring describing the requested or mandatory constraints placed upon the value of the groupid constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.groupid as returned by a call to mediadevices.getsupportedconstraints().
... however, the value of the groupid is determined by the source of the
track's content, and there's no particular format mandated by the specification (although some kind of guid is recommended).
...And 2 more matches
MediaTrackConstraints.logicalSurface - Web APIs
the media
trackconstraints dictionary's logicalsurface property is a constraindomstring describing the requested or mandatory constraints placed upon the value of the logicalsurface constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.logicalsurface as returned by a call to mediadevices.getsupportedconstraints().
... usage notes you can check the setting selected by the user agent after the display media has been created by getdisplaymedia() by calling getsettings() on the display media's video mediastream
track, then checking the value of the returned media
tracksettings object's logicalsurface object.
...And 2 more matches
MediaTrackSettings.aspectRatio - Web APIs
the media
tracksettings dictionary's aspectratio property is a double-precision floating-point number indicating the aspect ratio of the mediastream
track as currently configured.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the media
trackconstraints.aspectratio property you provided when calling either getusermedia() or mediastream
track.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.aspectratio as returned by a call to mediadevices.getsupportedconstraints().
...And 2 more matches
MediaTrackSettings.facingMode - Web APIs
the media
tracksettings dictionary's facingmode property is a domstring indicating the direction in which the camera producing the video
track represented by the mediastream
track is currently facing.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the media
trackconstraints.facingmode property you provided when calling either getusermedia() or mediastream
track.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.facingmode as returned by a call to mediadevices.getsupportedconstraints().
...And 2 more matches
MediaTrackSettings.latency - Web APIs
the media
tracksettings dictionary's latency property is a double-precision floating-point number indicating the estimated latency (specified in seconds) of the mediastream
track as currently configured.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the media
trackconstraints.latency property you provided when calling either getusermedia() or mediastream
track.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.latency as returned by a call to mediadevices.getsupportedconstraints().
...And 2 more matches
MediaTrackSettings.sampleSize - Web APIs
the media
tracksettings dictionary's samplesize property is an integer indicating the linear sample size (in bits per sample) the mediastream
track is currently configured for.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the media
trackconstraints.samplesize property you provided when calling either getusermedia() or mediastream
track.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.samplesize as returned by a call to mediadevices.getsupportedconstraints().
...And 2 more matches
MediaTrackSupportedConstraints.frameRate - Web APIs
the media
tracksupportedconstraints dictionary's framerate property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the framerate constraint.
... the framerate constraint can be used to establish acceptable upper and lower bounds on the video frame rate for a new video
track, or to specify an exact frame rate that must be provided for the request to succeed.
... checking the value of this property lets you determine if the user agent allows constraining the video
track configuration by frame rate.
...And 2 more matches
RTCPeerConnection.removeTrack() - Web APIs
the rtcpeerconnection.remove
track() method tells the local end of the connection to stop sending media from the specified
track, without actually removing the corresponding rtcrtpsender from the list of senders as reported by rtcpeerconnection.getsenders().
... if the
track is already stopped, or is not in the connection's senders list, this method has no effect.
... syntax pc.remove
track(sender); parameters media
track a rtcrtpsender specifying the sender to remove from the connection.
...And 2 more matches
RTCTrackEvent.transceiver - Web APIs
the webrtc api interface rtc
trackevent's read-only transceiver property indicates the rtcrtptransceiver affiliated with the event's
track.
... the transceiver pairs the
track's receiver with an rtcrtpsender.
... syntax var rtptransceiver =
trackevent.transceiver; value the rtcrtptransceiver which pairs the receiver with a sender and other properties which establish a single bidirectional srtp stream for use by the
track associated with the rtc
trackevent.
...And 2 more matches
RTCTrackEventInit.transceiver - Web APIs
the rtc
trackeventinit dictionary's transceiver property specifies the rtcrtptransceiver associated with the
track event.
... the transceiver pairs the
track's receiver with an rtcrtpsender to allow bidirectional communication.
... syntax var
trackeventinit = { receiver: rtpreceiver,
track: mediastream
track, streams: [videostream], transceiver: rtptransceiver }; var rtptransceiver =
trackeventinit.transceiver; value the rtcrtptransceiver which pairs the receiver with a sender and other properties which establish a single bidirectional srtp stream for use by the
track associated with the rtc
trackevent.
...And 2 more matches
RTCTrackEventInit - Web APIs
the webrtc api's rtc
trackeventinit dictionary is used to provide information describing an rtc
trackevent when instantiating a new
track event using new rtc
trackevent().
... properties rtc
trackeventinit inherits properties from the eventinit dictionary, and also includes the following properties: receiver the rtcrtpreceiver which is being used to receive the
track's media.
... streams optional an array of mediastream objects representing each of the streams that comprise the event's corresponding
track.
...And 2 more matches
TrackDefaultList - Web APIs
the
trackdefaultlist interface represents a simple container list for multiple
trackdefault objects.
... the
trackdefaultlist associated with a particular sourcebuffer can be retrieved using the sourcebuffer.
trackdefaults property.
... constructor
trackdefaultlist() constructs and returns a new
trackdefaultlist object.
...And 2 more matches
VideoTrack.id - Web APIs
the id property contains a string which uniquely identifies the
track represented by the video
track.
... this id can be used with the video
tracklist.get
trackbyid() method to locate a specific
track within the media associated with a media element.
... the
track id can also be used as the fragment of a url that loads the specific
track (if the media supports media fragments).
...And 2 more matches
Videotrack.language - Web APIs
the read-only video
track property language returns a string identifying the language used in the video
track.
... for
tracks that include multiple languages (such as a movie in english in which a few lines are spoken in other languages), this should be the video's primary language.
... syntax var video
tracklanguage = video
track.language; value a domstring specifying the bcp 47 (rfc 5646) format language tag of the primary language used in the video
track, or an empty string ("") if the language is not specified or known, or if the
track doesn't contain speech.
...And 2 more matches
HTMLTrackElement.src - Web APIs
the html
trackelement.src property reflects the value of the <
track> element's src attribute, which indicates the url of the text
track's data.
... syntax var text
trackurl = html
trackelement.src; value a domstring object containing the url of the text
track data.
... example // coming soon specifications specification status comment html living standardthe definition of 'html
trackelement.src' in that specification.
... living standard no change from html5 html5the definition of 'html
trackelement.src' in that specification.
MediaStreamTrack: ended event - Web APIs
the ended event of the mediastream
track interface is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available.
... bubbles no cancelable no interface event event handler property mediastream
track.onended usage notes ended events fire when the media stream
track's source permanently stops sending data on the stream.
... examples this example sets up an event handler for the ended event, which changes an on-screen icon to indicate that the
track is no longer active.
...
track.addeventlistener('ended', () => { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; }) you can also set up the event handler using the mediastream
track.onended property:
track.onended = function() { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications specification status comment media capture and streamsthe definition of 'ended' in that specification.
MediaStreamTrack.getConstraints() - Web APIs
the getconstraints() method of the mediastream
track interface returns a media
trackconstraints object containing the set of constraints most recently established for the
track using a prior call to applyconstraints().
... syntax const constraints =
track.getconstraints() return value a media
trackconstraints object which indicates the constrainable properties the web site or app most recently set using applyconstraints().
... example this example obtains the current constraints for a
track, sets the facingmode, and applies the updated constraints.
... function switchcameras(
track, camera) { const constraints =
track.getconstraints(); constraints.facingmode = camera;
track.applyconstraints(constraints); } specifications specification status comment media capture and streamsthe definition of 'getconstraints()' in that specification.
MediaStreamTrack.onmute - Web APIs
mediastream
track's onmute event handler is called when the mute event is received.
... such an event is sent when the
track is temporarily not able to send data.
... syntax
track.onmute = mutehandler; value a function to serve as an eventhandler for the mute event.
... my
track.onmute = function(evt) { playstateicon.innerhtml = "f507;"; }; specifications specification status comment media capture and streamsthe definition of 'mediastream
track.onmute' in that specification.
MediaStreamTrack.readyState - Web APIs
the mediastream
track.readystate read-only property returns an enumerated value giving the status of the
track.
... syntax const state =
track.readystate value it takes one of the following values: "live" which indicates that an input is connected and does its best-effort in providing real-time data.
... in that case, the output of data can be switched on or off using the mediastream
track.enabled property.
... specifications specification status comment media capture and streamsthe definition of 'mediastream
track.readystate' in that specification.
MediaStreamTrackAudioSourceOptions - Web APIs
the mediastream
trackaudiosourceoptions dictionary is used when specifying options to the mediastream
trackaudiosourcenode() constructor.
... it isn't needed when using the audiocontext.createmediastream
tracksource() method.
... properties mediastream
track the mediastream
track from which to take audio data for this node's output.
... specifications specification status comment web audio apithe definition of 'mediastream
trackaudiosourceoptions' in that specification.
MediaTrackConstraints.facingMode - Web APIs
the media
trackconstraints dictionary's facingmode property is a constraindomstring describing the requested or mandatory constraints placed upon the value of the facingmode constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.facingmode as returned by a call to mediadevices.getsupportedconstraints().
... because rtp doesn't include this information,
tracks associated with a webrtc rtcpeerconnection will never include this property.
... syntax var constraintsobject = { facingmode: constraint }; constraintsobject.facingmode = constraint; value an object based on constraindomstring specifying one or more acceptable, ideal, and/or exact (mandatory) facing modes are acceptable for a video
track.
MediaTrackConstraints.latency - Web APIs
the media
trackconstraints dictionary's latency property is a constraindouble describing the requested or mandatory constraints placed upon the value of the latency constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.latency as returned by a call to mediadevices.getsupportedconstraints().
... because rtp doesn't include this information,
tracks associated with a webrtc rtcpeerconnection will never include this property.
... syntax var constraintsobject = { latency: constraint }; constraintsobject.latency = constraint; value a constraindouble describing the acceptable or required value(s) for an audio
track's latency, with values specified in seconds.
MediaTrackSettings.autoGainControl - Web APIs
the media
tracksettings dictionary's autogaincontrol property is a boolean value whose value indicates whether or not automatic gain control (agc) is enabled on an audio
track.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the media
trackconstraints.autogaincontrol property you provided when calling either getusermedia() or mediastream
track.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.autogaincontrol as returned by a call to mediadevices.getsupportedconstraints().
... syntax var autogaincontrol = media
tracksettings.autogaincontrol; value a boolean value which is true if the
track has automatic gain control enabled or false if agc is disabled.
MediaTrackSettings.channelCount - Web APIs
the media
tracksettings dictionary's channelcount property is an integer indicating how many audio channel the mediastream
track is currently configured to have.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the media
trackconstraints.channelcount property you provided when calling either getusermedia() or mediastream
track.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.channelcount as returned by a call to mediadevices.getsupportedconstraints().
... syntax var channelcount = media
tracksettings.channelcount; value an integer value indicating the number of audio channels on the
track.
MediaTrackSettings.frameRate - Web APIs
the media
tracksettings dictionary's framerate property is a double-precision floating-point number indicating the frame rate, in frames per second, of the mediastream
track as currently configured.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the media
trackconstraints.framerate property you provided when calling either getusermedia() or mediastream
track.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.framerate as returned by a call to mediadevices.getsupportedconstraints().
... syntax var framerate = media
tracksettings.framerate; value a double-precision floating-point number indicating the current configuration of the
track's frame rate, in frames per second.
MediaTrackSettings.height - Web APIs
the media
tracksettings dictionary's height property is an integer indicating the number of pixels tall mediastream
track is currently configured to be.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the media
trackconstraints.height property you provided when calling either getusermedia() or mediastream
track.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.height as returned by a call to mediadevices.getsupportedconstraints().
... syntax var height = media
tracksettings.height; value an integer value indicating the height, in pixels, of the video
track as currently configured.
MediaTrackSettings.noiseSuppression - Web APIs
the media
tracksettings dictionary's noisesuppression property is a boolean value whose value indicates whether or not noise suppression technology is enabled on an audio
track.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the media
trackconstraints.noisesuppression property you provided when calling either getusermedia() or mediastream
track.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.noisesuppression as returned by a call to mediadevices.getsupportedconstraints().
... syntax var noisesuppression = media
tracksettings.noisesuppression; value a boolean value which is true if the input
track has noise suppression enabled or false if agc is disabled.
MediaTrackSettings.sampleRate - Web APIs
the media
tracksettings dictionary's samplerate property is an integer indicating how many audio samples per second the mediastream
track is currently configured for.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the media
trackconstraints.samplerate property you provided when calling either getusermedia() or mediastream
track.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.samplerate as returned by a call to mediadevices.getsupportedconstraints().
... syntax var samplerate = media
tracksettings.samplerate; value an integer value indicating how many samples each second of audio data includes.
MediaTrackSettings.volume - Web APIs
the media
tracksettings dictionary's volume property is a double-precision floating-point number indicating the volume of the mediastream
track as currently configured, as a value from 0.0 (silence) to 1.0 (maximum supported volume for the device).
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the media
trackconstraints.volume property you provided when calling either getusermedia() or mediastream
track.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.volume as returned by a call to mediadevices.getsupportedconstraints().
... syntax var volume = media
tracksettings.volume; value a double-precision floating-point number indicating the volume, from 0.0 to 1.0, of the audio
track as currently configured.
MediaTrackSettings.width - Web APIs
the media
tracksettings dictionary's width property is an integer indicating the number of pixels wide mediastream
track is currently configured to be.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the media
trackconstraints.width property you provided when calling either getusermedia() or mediastream
track.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.width as returned by a call to mediadevices.getsupportedconstraints().
... syntax var width = media
tracksettings.width; value an integer value indicating the width, in pixels, of the video
track as currently configured.
MediaTrackSupportedConstraints - Web APIs
the media
tracksupportedconstraints dictionary establishes the list of constrainable properties recognized by the user agent or browser in its implementation of the mediastream
track object.
... an object conforming to media
tracksupportedconstraints is returned by mediadevices.getsupportedconstraints().
... an actual constraint set is described using an object based on the media
trackconstraints dictionary.
... properties specific to shared screen
tracks for
tracks containing video sources from the user's screen contents, the following additional properties are may be included in addition to those available for video
tracks.
RTCRtpReceiver.track - Web APIs
the
track read-only property of the rtcrtpreceiver interface returns the mediastream
track associated with the current rtcrtpreceiver instance.
... syntax var mediastream
track = rtcrtpreceiver.
track value a mediastream
track instance.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of '
track' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet
trackchrome full support 59edge full support 12firefox full support yesie no support noopera full support 46safari full support yeswebv...
RTCRtpSender.track - Web APIs
the
track read-only property of the rtcrtpsender interface returns the mediastream
track which is being handled by the rtcrtpsender.
... syntax var mediastream
track = rtcrtpsender.
track value a mediastream
track object representing the media associated with the rtcrtpsender.
... if no
track is associated with the sender, this value is null, in which case the sender transmits nothing.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of '
track' in that specification.
RTCRtpStreamStats.trackId - Web APIs
the rtcrtpstreamstats dictionary's
trackid property is a string which uniquely identifies the rtcmediastream
trackstats object which contains the
track statistics for the mediastream
track for which statistics are provided in this object.
... syntax var
trackid = rtcrtpstreamstats.
trackid; value a domstring which uniquely identifies the rtcmediastream
trackstats object that provides statistics for the
track for which statistics are being collected by this rtcstatsreport.
... note: this value is not the same as the value of mediastram
track.id.
... specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcrtpstreamstats.
trackid' in that specification.
TextTrackList.onchange - Web APIs
the text
tracklist property onchange is an event handler which is called when the change event occurs, indicating that a change has occurred on a text
track in the video
tracklist.
... syntax text
tracklist.onchange = eventhandler; example this snippet establishes a handler for the change event that looks at each of the
tracks in the list, calling a function to update the state of a user interface control that indicates the current state of the
track.
... var
tracklist = document.queryselector("video, audio").text
tracks;
tracklist.onchange = function(event) { ....
... /* do something */ }; specifications specification status comment html living standardthe definition of 'text
tracklist: onchange' in that specification.
VideoTrack.selected - Web APIs
the video
track property selected controls whether or not a particular video
track is active.
... syntax isvideoselected = video
track.selected; video
track.selected = true | false; value the selected property is a boolean whose value is true if the
track is active.
... only a single video
track can be active at any given time, so setting this property to true for one
track while another
track is active will make that other
track inactive.
... specifications specification status comment html living standardthe definition of 'video
track: selected' in that specification.
-ms-scrollbar-track-color - Archive of obsolete content
the -ms-scrollbar-
track-color css property is a microsoft extension that specifies the color of the
track element of a scrollbar.
... initial valuescrollbarapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <color> the color of the
track element.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples this example uses -ms-scrollbar-
track-color, -ms-scrollbar-face-color, and -ms-scrollbar-arrow-color to create two <div> elements with different scroll bar color schemes.
Blocked: Storage access requests from trackers
message firefox: cookieblocked
tracker=request to access cookies or storage on “x” was blocked because it came from a
tracker and content blocking is enabled.
... a request to access cookies or storage was blocked because the browser identified it as coming from a
tracker and content blocking is enabled.
... the permission can be changed or removed by: going to preferences > content blocking and either adding an exception with the manage exceptions… button choosing the custom content blocking and unchecking the
tracker checkbox if the blocked resource doesn't need authentication, you can fix the warning message by adding a crossorigin="anonymous" attribute to the relevant element.
AudioTrack.sourceBuffer - Web APIs
the read-only audio
track property sourcebuffer returns the sourcebuffer that created the
track, or null if the
track was not created by a sourcebuffer or the sourcebuffer has been removed from the mediasource.sourcebuffers attribute of its parent media source.
... syntax var sourcebuffer = audio
track.sourcebuffer; value a sourcebuffer or null.
... specifications specification status comment media source extensionsthe definition of 'audio
track: sourcebuffer' in that specification.
AudioTrackList: change event - Web APIs
the change event is fired when an audio
track is enabled or disabled, for example by changing the
track's enabled property.
... bubbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.audio
tracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `enabled` will trigger the `change` event const toggle
trackbutton = document.queryselector('.toggle-
track'); toggle
trackbutton.addeventlistener('click', () => { const
track = videoelement.audio
tracks[0];
track.enabled = !
track.enabled; }); using the onchange event handler property: const videoelement = document.queryselector('video'); videoelement.audio
tracks.onchange = (event) => { console.log(`'${event.type}' event fired`); ...
...}; // changing the value of `enabled` will trigger the `change` event const toggle
trackbutton = document.queryselector('.toggle-
track'); toggle
trackbutton.addeventlistener('click', () => { const
track = videoelement.audio
tracks[0];
track.enabled = !
track.enabled; }); specifications specification status html living standardthe definition of 'change' in that specification.
ImageCapture.track - Web APIs
the
track read-only property of the imagecapture interface returns a reference to the mediastream
track passed to the imagecapture() constructor.
... syntax const mediastream
track = imagecaptureobj.
track value a mediastream
track object.
... specifications specification status comment mediastream image capturethe definition of '
track' in that specification.
MediaStreamTrack.clone() - Web APIs
the clone() method of the mediastream
track interface creates a duplicate of the mediastream
track.
... this new mediastream
track object is identical except for its unique id.
... syntax const new
track =
track.clone() return value a new mediastream
track instance which is identical to the one clone() was called, except for its new unique id.
MediaStreamTrack.getCapabilities() - Web APIs
the getcapabilities() method of the mediastream
track interface returns a media
trackcapabilities object which specifies the values or range of values which each constrainable property, based upon the platform and user agent.
... once you know what the browser's capabilities are, your script can use applyconstraints() to ask for the
track to be configured to match ideal or acceptable settings.
... syntax const capabilities =
track.getcapabilities() return value a media
trackcapabilities object which specifies the value or range of values which are supported for each of the user agent's supported constrainable properties.
MediaStreamTrack.getSettings() - Web APIs
the getsettings() method of the mediastream
track interface returns a media
tracksettings object containing the current values of each of the constrainable properties for the current mediastream
track.
... syntax const settings =
track.getsettings() returns a media
tracksettings object describing the current configuration of the
track's constrainable properties.
...to instead fetch the most-recently established constraints for the
track's properties, as specified by the site's code, use getconstraints().
MediaStreamTrack.label - Web APIs
the mediastream
track.label read-only property returns a domstring containing a user agent-assigned label that identifies the
track source, as in "internal microphone".
...when the
track is deassociated from its source, the label is not changed.
... syntax const label =
track.label specifications specification status comment media capture and streamsthe definition of 'mediastream
track.label' in that specification.
MediaStreamTrack.onoverconstrained - Web APIs
the mediastream
track.onoverconstrained event handler is a property called when the overconstrained event is received.
... such an event is sent when the
track is again able to send data.
... syntax
track.onoverconstrained = function; values function is the name of a user-defined function, without the () suffix or any parameters, or an anonymous function declaration, such as function(event) {...}.
MediaStreamTrack.remote - Web APIs
the mediastream
track.remote read-only property allows javascript to know whether a webrtc mediastream
track is from a remote source or a local one.
... it returns a boolean with a value of true if the
track is sourced remotely (that is, sourced by an rtcpeerconnection), or false if it is sourced locally.
... syntax var bool =
track.remote; ...
MediaTrackConstraints.aspectRatio - Web APIs
the media
trackconstraints dictionary's aspectratio property is a constraindouble describing the requested or mandatory constraints placed upon the value of the aspectratio constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.aspectratio as returned by a call to mediadevices.getsupportedconstraints().
... syntax var constraintsobject = { aspectratio: constraint }; constraintsobject.aspectratio = constraint; value a constraindouble describing the acceptable or required value(s) for a video
track's aspect ratio.
MediaTrackConstraints.echoCancellation - Web APIs
the media
trackconstraints dictionary's echocancellation property is a constrainboolean describing the requested or mandatory constraints placed upon the value of the echocancellation constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.echocancellation as returned by a call to mediadevices.getsupportedconstraints().
... because rtp doesn't include this information,
tracks associated with a webrtc rtcpeerconnection will never include this property.
MediaTrackConstraints.frameRate - Web APIs
the media
trackconstraints dictionary's framerate property is a constraindouble describing the requested or mandatory constraints placed upon the value of the framerate constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.framerate as returned by a call to mediadevices.getsupportedconstraints().
... syntax var constraintsobject = { framerate: constraint }; constraintsobject.framerate = constraint; value a constraindouble describing the acceptable or required value(s) for a video
track's frame rate, in frames per second.
MediaTrackControls.volume - Web APIs
the media
trackconstraints dictionary's volume property is a constraindouble describing the requested or mandatory constraints placed upon the value of the volume constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.volume as returned by a call to mediadevices.getsupportedconstraints().
... syntax var constraintsobject = { volume: constraint }; constraintsobject.volume = constraint; value a constraindouble describing the acceptable or required value(s) for an audio
track's volume, on a linear scale where 0.0 means silence and 1.0 is the highest supported volume.
MediaTrackSettings.cursor - Web APIs
the media
tracksettings dictionary's cursor property indicates whether or not the cursor should be captured as part of the video
track included in the mediastream returned by getdisplaymedia().
... syntax cursorsetting = media
tracksettings.cursor; value the value of cursor comes from the cursorcaptureconstraint enumerated string type, and may have one of the following values: always the mouse should always be visible in the video content of the {domxref("mediastream"), unless the mouse has moved outside the area of the content.
... specifications specification status comment screen capturethe definition of 'media
tracksettings.cursor' in that specification.
MediaTrackSettings.logicalSurface - Web APIs
the media
tracksettings dictionary's logicalsurface property indicates whether or not the display area being captured is a logical surface.
... syntax islogicalsurface = media
tracksettings.logicalsurface; value a boolean value which is true if the video
track in the stream of captured video is taken from a logical display surface.
... specifications specification status comment screen capturethe definition of 'media
tracksettings.logicalsurface' in that specification.
MediaTrackSupportedConstraints.noiseSuppression - Web APIs
the media
tracksupportedconstraints dictionary's noisesuppression property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the noisesuppression constraint.
... the noisesuppression constraint indicates whether or not the browser offers the ability to automatically control the gain (volume) on media
tracks; this obviously is contingent on whether or not the individual device supports automatic gain control as well.
... syntax noisesuppressionsupported = supportedconstraintsdictionary.noisesuppression; value this property is present in the dictionary (and its value is always true) if the user agent supports the noisesuppression constraint (and therefore supports noise suppression on audio
tracks).
RTCInboundRtpStreamStats.trackId - Web APIs
the
trackid property of the rtcinboundrtpstreamstats dictionary indicates the id of the rtcreceiveraudio
trackattachmentstats or rtcreceivervideo
trackattachmentstats object representing the mediastream
track which is receiving the incoming media.
... syntax var
trackstatsid = rtcinboundrtpstreamstats.
trackid; value a domstring containing the id of the rtcreceiveraudio
trackattachmentstats or rtcreceivervideo
trackattachmentstats object representing the
track which is receiving the media from this rtp session.
... specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcinboundrtpstreamstats.
trackid' in that specification.
RTCOutboundRtpStreamStats.trackId - Web APIs
the
trackid property of the rtcoutboundrtpstreamstats dictionary indicates the id of the rtcsenderaudio
trackattachmentstats or rtcsendervideo
trackattachmentstats object representing the mediastream
track which is being sent on this stream.
... syntax var
trackstatsid = rtcoutboundrtpstreamstats.
trackid; value a domstring containing the id of the rtcsenderaudio
trackattachmentstats or rtcsendervideo
trackattachmentstats object representing the
track which is the source of the media being sent on this stream.
... specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcoutboundrtpstreamstats.
trackid' in that specification.
RTCTrackEvent.receiver - Web APIs
the read-only receiver property of the rtc
trackevent interface indicates the rtcrtpreceiver which is used to receive data containing media for the
track to which the event refers.
... syntax var rtpreceiver =
trackevent.receiver; value the rtcrtptransceiver which pairs the receiver with a sender and other properties which establish a single bidirectional srtp stream for use by the
track associated with the rtc
trackevent.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtc
trackevent.receiver' in that specification.
RTCTrackEvent.streams - Web APIs
the webrtc api interface rtc
trackevent's read-only streams property specifies an array of mediastream objects, one for each of the streams that comprise the
track being added to the rtcpeerconnection.
... syntax var streams =
trackevent.streams; value an array of mediastream objects, one for each stream that make up the new
track.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtc
trackevent.streams' in that specification.
RTCTrackEventInit.receiver - Web APIs
the rtc
trackeventinit dictionary's receiver property specifies the rtcrtpreceiver associated with the event.
... syntax var
trackeventinit = { receiver: rtpreceiver,
track: mediastream
track, streams: [videostream], transceiver: rtptransceiver }; var rtpreceiver =
trackeventinit.receiver; value the rtcrtptransceiver which pairs the receiver with a sender and other properties which establish a single bidirectional srtp stream for use by the
track associated with the rtc
trackevent.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtc
trackeventinit.receiver' in that specification.
RTCTrackEventInit.streams - Web APIs
the rtc
trackeventinit dictionary's optional streams property provides an array containing a mediastream object for each of the streams associated with the event's
track.
... syntax var
trackeventinit = { receiver: rtpreceiver,
track: mediastream
track, streams: [videostream], transceiver: rtptransceiver }; var streamlist =
trackeventinit.streams; value an array of mediastream objects, one for each stream which make up the
track.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtc
trackeventinit.streams' in that specification.
SourceBuffer.audioTracks - Web APIs
the audio
tracks read-only property of the sourcebuffer interface returns a list of the audio
tracks currently contained inside the sourcebuffer.
... syntax var myaudio
tracks = sourcebuffer.audio
tracks; value an audio
tracklist object.
... example tbd specifications specification status comment media source extensionsthe definition of 'audio
tracks' in that specification.
SourceBuffer.textTracks - Web APIs
the text
tracks read-only property of the sourcebuffer interface returns a list of the text
tracks currently contained inside the sourcebuffer.
... syntax var mytext
tracks = sourcebuffer.text
tracks; value an text
tracklist object.
... example tbd specifications specification status comment media source extensionsthe definition of 'text
tracks' in that specification.
SourceBuffer.videoTracks - Web APIs
the video
tracks read-only property of the sourcebuffer interface returns a list of the video
tracks currently contained inside the sourcebuffer.
... syntax var myvideo
tracks = sourcebuffer.video
tracks; value an video
tracklist object.
... example tbd specifications specification status comment media source extensionsthe definition of 'video
tracks' in that specification.
VideoTrack.sourceBuffer - Web APIs
the read-only video
track property sourcebuffer returns the sourcebuffer that created the
track, or null if the
track was not created by a sourcebuffer or the sourcebuffer has been removed from the mediasource.sourcebuffers attribute of its parent media source.
... syntax var sourcebuffer = video
track.sourcebuffer; value a sourcebuffer or null.
... specifications specification status comment media source extensionsthe definition of 'video
track: sourcebuffer' in that specification.
VideoTrackList: change event - Web APIs
the change event is fired when a video
track is made active or inactive, for example by changing the
track's selected property.
... bubbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.video
tracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `selected` will trigger the `change` event const toggle
trackbutton = document.queryselector('.toggle-
track'); toggle
trackbutton.addeventlistener('click', () => { const
track = videoelement.video
tracks[0];
track.selected = !
track.selected; }); using the onchange event handler property: const videoelement = document.queryselector('video'); videoelement.video
tracks.onchange = (event) => { console.log(`'${event.type}' event fired`...
...); }; // changing the value of `selected` will trigger the `change` event const toggle
trackbutton = document.queryselector('.toggle-
track'); toggle
trackbutton.addeventlistener('click', () => { const
track = videoelement.video
tracks[0];
track.selected = !
track.selected; }); specifications specification status html living standardthe definition of 'change' in that specification.
VideoTrackList.selectedIndex - Web APIs
the read-only video
tracklist property selectedindex returns the index of the currently selected
track, if any, or -1 otherwise.
... syntax var index = video
tracklist.selectedindex; value a number indicating the index of the currently selected
track, if any, or -1 otherwise.
... specifications specification status comment html living standardthe definition of 'video
tracklist: selectedindex' in that specification.
::-moz-range-track - CSS: Cascading Style Sheets
the ::-moz-range-
track css pseudo-element is a mozilla extension that represents the
track (i.e., groove) in which the indicator slides in an <input> of type="range".
... note: using ::-moz-range-
track with anything but an <input type="range"> doesn't match anything and has no effect.
... syntax ::-moz-range-
track examples html <input type="range" min="0" max="100" step="5" value="50"/> css input[type=range]::-moz-range-
track { background-color: green; } result a progress bar using this style might look something like this: specifications not part of any standard.
Feature-Policy: xr-spatial-tracking - HTTP
the http feature-policy header xr-spatial-
tracking directive controls whether the current document is allowed to use the webxr device api.
... this policy controls whether navigator.xr.requestsession() can return xrsession that requires spatial
tracking and whether user agent can indicate support for sessions supporting spatial
tracking via navigator.xr.issessionsupported() and devicechange event on navigator.xr object.
... syntax feature-policy: xr-spatial-
tracking <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
CanvasCaptureMediaStreamTrack.canvas - Web APIs
the canvascapturemediastream
track canvas read-only property returns the htmlcanvaselement from which frames are being captured.
... // obtain the canvas associated with the stream var canvas = stream.canvas; specifications specification status comment media capture from dom elementsthe definition of 'canvascapturemediastream
track.canvas' in that specification.
CanvasCaptureMediaStreamTrack.requestFrame() - Web APIs
the canvascapturemediastream
track method requestframe() requests that a frame be captured from the canvas and sent to the stream.
... example // find the canvas element to capture var canvaselt = document.getelementsbytagname("canvas")[0]; // get the stream var stream = canvaselt.capturestream(25); // 25 fps // send the current state of the canvas as a frame to the stream stream.getvideo
tracks()[0].requestframe(); specifications specification status comment media capture from dom elementsthe definition of 'canvascapturemediastream.requestframe()' in that specification.
MediaStream: addtrack event - Web APIs
the add
track event is fired when a new mediastream
track object has been added to a mediastream.
... bubbles no cancelable no interface mediastream
trackevent event handler property onadd
track examples using addeventlistener(): let stream = new mediastream(); stream.addeventlistener('add
track', (event) => { console.log(`new ${event.
track.kind}
track added`); }); using the onadd
track event handler property: let stream = new mediastream(); stream.onadd
track = (event) => { console.log(`new ${event.
track.kind}
track added`); }; specifications specification status media capture and streamsthe definition of 'add
track' in that specification.
MediaStream: removetrack event - Web APIs
the remove
track event is fired when a new mediastream
track object has been removed from a mediastream.
... bubbles no cancelable no interface mediastream
trackevent event handler property onremove
track examples using addeventlistener(): let stream = new mediastream(); stream.addeventlistener('remove
track', (event) => { console.log(`${event.
track.kind}
track removed`); }); using the onremove
track event handler property: let stream = new mediastream(); stream.onremove
track = (event) => { console.log(`${event.
track.kind}
track removed`); }; specifications specification status media capture and streamsthe definition of 'remove
track' in that specification.
MediaStreamTrack.id - Web APIs
the mediastream
track.id read-only property returns a domstring containing a unique identifier (guid) for the
track, which is generated by the user agent.
... syntax const id =
track.id specifications specification status comment media capture and streamsthe definition of 'mediastream
track.id' in that specification.
MediaTrackConstraints.autoGainControl - Web APIs
the media
trackconstraints dictionary's autogaincontrol property is a constrainboolean describing the requested or mandatory constraints placed upon the value of the autogaincontrol constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.autogaincontrol as returned by a call to mediadevices.getsupportedconstraints().
MediaTrackConstraints.channelCount - Web APIs
the media
trackconstraints dictionary's channelcount property is a constrainlong describing the requested or mandatory constraints placed upon the value of the channelcount constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.channelcount as returned by a call to mediadevices.getsupportedconstraints().
MediaTrackConstraints.height - Web APIs
the media
trackconstraints dictionary's height property is a constrainlong describing the requested or mandatory constraints placed upon the value of the height constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.height as returned by a call to mediadevices.getsupportedconstraints().
MediaTrackConstraints.noiseSuppression - Web APIs
the media
trackconstraints dictionary's noisesuppression property is a constrainboolean describing the requested or mandatory constraints placed upon the value of the noisesuppression constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.noisesuppression as returned by a call to mediadevices.getsupportedconstraints().
MediaTrackConstraints.sampleRate - Web APIs
the media
trackconstraints dictionary's samplerate property is a constrainlong describing the requested or mandatory constraints placed upon the value of the samplerate constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.samplerate as returned by a call to mediadevices.getsupportedconstraints().
MediaTrackConstraints.sampleSize - Web APIs
the media
trackconstraints dictionary's samplesize property is a constrainlong describing the requested or mandatory constraints placed upon the value of the samplesize constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.samplesize as returned by a call to mediadevices.getsupportedconstraints().
MediaTrackConstraints.width - Web APIs
the media
trackconstraints dictionary's width property is a constrainlong describing the requested or mandatory constraints placed upon the value of the width constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of media
tracksupportedconstraints.width as returned by a call to mediadevices.getsupportedconstraints().
MediaTrackSupportedConstraints.autoGainControl - Web APIs
the media
tracksupportedconstraints dictionary's autogaincontrol property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the autogaincontrol constraint.
... the autogaincontrol constraint indicates whether or not the browser offers the ability to automatically control the gain (volume) on media
tracks; this obviously is contingent on whether or not the individual device supports automatic gain control as well; it's typically a feature provided by microphones.
MediaTrackSupportedConstraints.cursor - Web APIs
the media
tracksupportedconstraints dictionary's cursor property indicates whether or not the cursor constraint is supported by the user agent and the device on which the content is being used.
...urface: "browser" }, audio: false; }; if (supportedconstraints.cursor) { displaymediaoptions.video.cursor = "always"; } try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specification status comment screen capturethe definition of 'media
tracksupportedconstraints.cursor' in that specification.
MediaTrackSupportedConstraints.displaySurface - Web APIs
the media
tracksupportedconstraints dictionary's displaysurface property indicates whether or not the displaysurface constraint is supported by the user agent and the device on which the content is being used.
... }, audio: false; }; if (supportedconstraints.displaysurface) { displaymediaoptions.video.displaysurface = "monitor"; } try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specification status comment screen capturethe definition of 'media
tracksupportedconstraints.displaysurface' in that specification.
MediaTrackSupportedConstraints.logicalSurface - Web APIs
the media
tracksupportedconstraints dictionary's logicalsurface property indicates whether or not the logicalsurface constraint is supported by the user agent and the device on which the content is being used.
... }, audio: false; }; if (supportedconstraints.logicalsurface) { displaymediaoptions.video.logicalsurface = "monitor"; } try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specification status comment screen capturethe definition of 'media
tracksupportedconstraints.logicalsurface' in that specification.
Navigator.doNotTrack - Web APIs
the navigator.donot
track property returns the user's do not
track setting, which indicates whether the user is requesting web sites and advertisers to not
track them.
... example console.log(navigator.donot
track); // prints "1" if dnt is enabled; "0" if the user opted-in for
tracking; otherwise this is "unspecified" specifications specification status comment
tracking preference expression (dnt)the definition of 'navigator.donot
track' in that specification.
SourceBuffer.trackDefaults - Web APIs
the
trackdefaults property of the sourcebuffer interface specifies the default values to use if kind, label, and/or language information is not available in the initialization segment of the media to be appended to the sourcebuffer.
... syntax var my
trackdefaults = sourcebuffer.
trackdefaults; sourcebuffer.
trackdefaults = my
trackdefaultlist; value a
trackdefaultlist object.
TextTrackList: change event - Web APIs
the change event is fired when a text
track is made active or inactive, or a text
tracklist is otherwise changed.
... bubbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const mediaelement = document.queryselectorall('video, audio')[0]; mediaelement.text
tracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); using the onchange event handler property: const mediaelement = document.queryselector('video, audio'); mediaelement.text
tracks.onchange = (event) => { console.log(`'${event.type}' event fired`); }; specifications specification status html living standardthe definition of 'change' in that specification.
TrackDefault.kinds - Web APIs
the kinds read-only property of the
trackdefault interface returns default kinds for an associated sourcebuffer to use when an initialization segment does not contain label information for a new
track.
... syntax var mykinds =
trackdefault.kinds; value an array of domstrings.
TrackDefault.label - Web APIs
the label read-only property of the
trackdefault interface returns the default label for an associated sourcebuffer to use when an initialization segment does not contain label information for a new
track.
... syntax var mylabel =
trackdefault.label; value a domstring.
TrackDefault.language - Web APIs
the language read-only property of the
trackdefault interface returns a default language for an associated sourcebuffer to use when an initialization segment does not contain language information for a new
track.
... syntax var mylanguage =
trackdefault.language; value a domstring.
TrackDefault.type - Web APIs
the type read-only property of the
trackdefault interface returns the type of
track that this sourcebuffer's media segment data relates to (i.e.
... audio, video, or text
track.) syntax var mytype =
trackdefault.type; value a domstring — one of audio, video or text.
TrackDefaultList.length - Web APIs
the length read-only property of the
trackdefaultlist interface returns the number of
trackdefault objects in the list.
... syntax var mylistlength =
trackdefaultlist.length; value an unsigned long number.
MediaTrackSupportedConstraints.aspectRatio - Web APIs
the media
tracksupportedconstraints dictionary's aspectratio property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the aspectratio constraint.
MediaTrackSupportedConstraints.channelCount - Web APIs
the media
tracksupportedconstraints dictionary's channelcount property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the channelcount constraint.
MediaTrackSupportedConstraints.deviceId - Web APIs
the media
tracksupportedconstraints dictionary's deviceid property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the deviceid constraint.
MediaTrackSupportedConstraints.echoCancellation - Web APIs
the media
tracksupportedconstraints dictionary's echocancellation property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the echocancellation constraint.
MediaTrackSupportedConstraints.facingMode - Web APIs
the media
tracksupportedconstraints dictionary's facingmode property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the facingmode constraint.
MediaTrackSupportedConstraints.groupId - Web APIs
the media
tracksupportedconstraints dictionary's groupid property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the groupid constraint.
MediaTrackSupportedConstraints.height - Web APIs
the media
tracksupportedconstraints dictionary's height property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the height constraint.
MediaTrackSupportedConstraints.latency - Web APIs
the media
tracksupportedconstraints dictionary's latency property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the latency constraint.
MediaTrackSupportedConstraints.sampleRate - Web APIs
the media
tracksupportedconstraints dictionary's samplerate property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the samplerate constraint.
MediaTrackSupportedConstraints.sampleSize - Web APIs
the media
tracksupportedconstraints dictionary's samplesize property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the samplesize constraint.
MediaTrackSupportedConstraints.volume - Web APIs
the media
tracksupportedconstraints dictionary's volume property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the volume constraint.
MediaTrackSupportedConstraints.width - Web APIs
the media
tracksupportedconstraints dictionary's width property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the width constraint.
Index - Web APIs
129 audiocontext.createmediastreamsource() api, audio, audiocontext, audionode, media, mediastream, mediastream
track, method, reference, web, web audio, web audio api, createmediastreamsource for more details about media stream audio source nodes, check out the mediastreamaudiosourcenode reference page.
... 130 audiocontext.createmediastream
tracksource() api, audio, audiocontext, mediastream
track, mediastream
trackaudiosource, method, node, reference, web audio api, createmediastream
tracksource, sound, source,
track a mediastream
trackaudiosourcenode object which acts as a source for audio data found in the specified audio
track.
... 186 audio
track audio, audio
track, html, html dom, interface, media, reference,
track the audio
track interface represents a single audio
track from one of the html media elements, <audio> or <video>.
...And 297 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 mediastream
track as an example): if needed, call mediadevices.getsupportedconstraints() to get the list of supported constraints, which tells you what constrainable properties the browser knows about.
... once the script knows whether the property or properties it wishes to use are supported, it can then check the capabilities of the api and its implementation by examining the object returned by the
track's getcapabilities() method; this object lists each supported constraint and the values or range of values which are supported.
...And 46 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
css grid layout has the following features: fixed and flexible
track sizes you can create a grid with fixed
track sizes – using pixels for example.
... creation of additional
tracks to hold content you can define an explicit grid with grid layout.
... if we want to start making this more grid-like we need to add column
tracks.
...And 37 more matches
Using DTMF with WebRTC - Web APIs
sending dtmf on an rtcpeerconnection a given rtcpeerconnection can have multiple media
tracks sent or received on it.
... when you wish to transmit dtmf signals, you first need to decide which
track to send them on, since dtmf is sent as a series of out-of-band payloads on the rtcrtpsender responsible for transmitting that
track's data to the other peer.
... once the
track is selected, you can obtain from its rtcrtpsender the rtcdtmfsender object you'll use for sending dtmf.
...And 23 more matches
Audio for Web games - Game development
the htmlmediaelement interface comes with lots of properties to help determine whether a
track is in a state to be playable.
... one way you can make your music sound
track more dynamic is by splitting it up into component loops or
tracks.
...once you have the various
tracks that make up your piece you can bring
tracks in and out as appropriate.
...And 18 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
i have not defined any column or row
tracks but this layout dictates a single column, and rows will be created as needed for each of the items in the implicit grid.
...the header spans over two column
tracks, as does the nav.
... in the third row
track we have the sidebar alongside the content.
...And 18 more matches
JavaScript Client API - Archive of obsolete content
tracker entity that
tracks changes to data.
... each engine has a corresponding
tracker which listens for changes to data or events it is interested in.
...this involves writing types that extend the store,
tracker, and record types as well.
...And 17 more matches
Grids - Learn web development
you can use any length unit, or percentages to create these column
tracks.
... change your
track listing to the following definition, creating three 1fr
tracks.
... .container { display: grid; grid-template-columns: 1fr 1fr 1fr; } you should now see that you have flexible
tracks.
...And 17 more matches
MediaStream - Web APIs
a stream consists of several
tracks such as video or audio
tracks.
... each
track is specified as an instance of mediastream
track.you can obtain a mediastream object either by using the constructor or by calling mediadevices.getusermedia().
...you can create an empty stream, a stream which is based upon an existing stream, or a stream that contains a specified list of
tracks (specified as an array of mediastream
track objects).
...And 17 more matches
Signaling and video calling - Web APIs
starting a call when the user clicks on a username they want to call, the invite() function is invoked as the event handler for that click event: var mediaconstraints = { audio: true, // we want an audio
track video: true // ...and we want a video
track }; function invite(evt) { if (mypeerconnection) { alert("you can't start a call because you already have one open!"); } else { var clickedusername = evt.target.textcontent; if (clickedusername === myusername) { alert("i'm afraid i can't let you talk to yourself.
... that would be weird."); return; } targetusername = clickedusername; createpeerconnection(); navigator.mediadevices.getusermedia(mediaconstraints) .then(function(localstream) { document.getelementbyid("local_video").srcobject = localstream; localstream.get
tracks().foreach(
track => mypeerconnection.add
track(
track, localstream)); }) .catch(handlegetusermediaerror); } } this begins with a basic sanity check: is the user already connected?
... we then iterate over the
tracks in the stream, calling add
track() to add each
track to the rtcpeerconnection.
...And 17 more matches
grid-template-rows - CSS: Cascading Style Sheets
the grid-template-rows css property defines the line names and
track sizing functions of the grid rows.
... syntax /* keyword value */ grid-template-rows: none; /* <
track-list> values */ grid-template-rows: 100px 1fr; grid-template-rows: [linename] 100px; grid-template-rows: [linename1] 100px [linename2 linename3]; grid-template-rows: minmax(100px, 1fr); grid-template-rows: fit-content(40%); grid-template-rows: repeat(3, 200px); grid-template-rows: subgrid; /* <auto-
track-list> values */ grid-template-rows: 200px repeat(auto-fill, 100px) 300px; grid-template-rows: minmax(100px, max-content) repeat(auto-fill, 200px) 20%; grid-template-rows: [linename1...
... repeat(auto-fit, [linename3 linename4] 300px) 100px; grid-template-rows: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3]; /* global values */ grid-template-rows: inherit; grid-template-rows: initial; grid-template-rows: unset; this property may be specified as: either the keyword value none or a <
track-list> value or an <auto-
track-list> value.
...And 17 more matches
Video and audio content - Learn web development
they define a structure in which the audio and/or video
tracks that make up the media are stored, along with metadata describing the media, what codecs are used to encode its channels, and so forth.
... a webm file containing a movie which has a main video
track and one alternate angle
track, plus audio for both english and spanish, in addition to audio for an english commentary
track can be conceptualized as shown in the diagram below.
... also included are text
tracks containing closed captions for the feature film, spanish subtitles for the film, and english captions for the commentary.
...And 16 more matches
grid-template-columns - CSS: Cascading Style Sheets
the grid-template-columns css property defines the line names and
track sizing functions of the grid columns.
... syntax /* keyword value */ grid-template-columns: none; /* <
track-list> values */ grid-template-columns: 100px 1fr; grid-template-columns: [linename] 100px; grid-template-columns: [linename1] 100px [linename2 linename3]; grid-template-columns: minmax(100px, 1fr); grid-template-columns: fit-content(40%); grid-template-columns: repeat(3, 200px); grid-template-columns: subgrid; /* <auto-
track-list> values */ grid-template-columns: 200px repeat(auto-fill, 100px) 300px; grid-template-columns: minmax(100px, max-content) repeat(auto-fill, 200px) 20%; ...
...if the size of the grid container depends on the size of its
tracks, then the percentage must be treated as auto.
...And 16 more matches
Adding captions and subtitles to HTML5 video - Developer guides
this article will take the same player and show how to add captions and subtitles to it, using the webvtt format and the <
track> element.
... for this article we will refer to the text
tracks displayed as subtitles, as their content is aimed at hearing people who have difficulty understanding the language of the film, rather than deaf or hard-of-hearing people.
... the <
track> element html5 allows us to specify subtitles for a video using the <
track> element.
...And 15 more matches
Subgrid - CSS: Cascading Style Sheets
these grids however are independent of the parent grid and of each other, meaning that they do not take their
track sizing from the parent grid.
... if you set the value subgrid on grid-template-columns, grid-template-rows or both, instead of creating a new
track listing the nested grid uses the
tracks defined on the parent.
... for example, if you use grid-template-columns: subgrid and the nested grid spans three column
tracks of the parent, the nested grid will have three column
tracks of the same size as the parent grid.
...And 14 more matches
repeat() - CSS: Cascading Style Sheets
the repeat() css function represents a repeated fragment of the
track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.
... /* <
track-repeat> values */ repeat(4, 1fr) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start] 60% [col-end]) repeat(4, [col-start] 1fr [col-end]) repeat(4, [col-start] min-content [col-end]) repeat(4, [col-start] max-content [col-end]) repeat(4, [col-start] auto [col-end]) repeat(4, [col-start] minmax(100px, 1fr) [col-end]) repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] auto [col-end]) repeat(4, [col-start] min-content [col-middle] max-content [col-end]) /* <auto-repeat> values */ repeat(auto-fill, 250px) repeat(auto-fit, 250px) repeat(auto-fill, [col-start] 250px [col-end]) repeat(auto-fit, [col-start] 250px [col-end]) repeat(auto-fil...
... <percentage> a non-negative percentage relative to the inline size of the grid container in column grid
tracks, and the block size of the grid container in row grid
tracks.
...And 14 more matches
Index - Archive of obsolete content
searches, lookups, package
tracking, and even word definitions can all be retrieved from user-customized bookmarks.
...the extension will access tinderbox, mozilla.org's webtool for
tracking source code status, to get the status of the code.
...for this we have to first create four icons, one for each tinderbox state (none, success, test failed, and busted), then create a set of css rules that displays the icon corresponding to the current tinderbox state: 398 tinderbox add-ons, extensions tinderbox is a web tool for
tracking the status of the mozilla source code.
...And 11 more matches
RTCPeerConnection - Web APIs
such an event is sent when a mediastream is removed from this connection.onsignalingstatechangethe onsignalingstatechange event handler property of the rtcpeerconnection interface specifies a function to be called when the signalingstatechange event occurs on an rtcpeerconnection interface.on
track the rtcpeerconnection property on
track is an eventhandler which specifies a function to be called when the
track event occurs, indicating that a
track has been added to the rtcpeerconnection.methodsalso inherits methods from: eventtargetaddicecandidate()when a web site or app using rtcpeerconnection receives a new ice candidate from the remote peer over its signaling channel, it delivers the new...
...instead of using this obsolete method, you should instead use add
track() once for each
track you wish to send to the remote peer.add
track()the rtcpeerconnection method add
track() adds a new media
track to the set of
tracks which will be transmitted to the other peer.close() the rtcpeerconnection.close() method closes the current peer connection.createanswer() the createanswer() method on the rtcpeerconnection interface creates an sdp answer to an offer received from a remote peer during the offer/answer negotiation of a webrtc connection.
...each rtp receiver manages the reception and decoding of data for a mediastream
track on an rtcpeerconnectiongetsenders()the rtcpeerconnection method getsenders() returns an array of rtcrtpsender objects, each of which represents the rtp sender responsible for transmitting one
track's data.getstats()the rtcpeerconnection method getstats() returns a promise which resolves with data providing statistics about either the overall connection or about the specified mediastream
track.gets...
...And 11 more matches
Inputs and input sources - Web APIs
this may involve the user simply tapping on a spot on the screen,
tracking their eyes, or the use of a joystick or motion-sensing controller to move a cursor.
... motion-sensing controllers, which use accelerometers, magnetometers, and other sensors for motion
tracking and targeting and may additionally include any number of buttons, joysticks, thumbpads, touchpads, force sensors, and so on to provide additional input sources for both targeting and selection.
... spatially-
tracked articulated hands, such as haptic gloves can provide both targeting and squeeze actions, as well as selection if outfitted with buttons or other sources of selection actions.
...And 10 more matches
Using the Web Audio API - Web APIs
we'll briefly look at some concepts, then study a simple boombox example that allows us to load an audio
track, play and pause it, and change its volume and stereo panning.
...if you simply want to control playback of an audio
track, the <audio> media element provides a better, quicker solution than the web audio api.
...let's begin with a simple method — as we have a boombox, we most likely want to play a full song
track.
...And 10 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
this time we have three 1fr column
tracks.
...it is possible to create
tracks that respond to the size of the content, however, they will also change the entire
track.
... <div class="box2">two</div> <div class="box3">three</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3,1fr); align-items: end; grid-auto-rows: 200px; } .box1 { align-self: stretch; } .box2 { align-self: start; } the fr unit and flex-basis we have already seen how the fr unit works to assign a proportion of available space in the grid container to our grid
tracks.
...And 10 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
note: sites that automatically play audio (or videos with an audio
track) can be an unpleasant experience for users, so should be avoided when possible.
... detecting addition and removal of
tracks you can detect when
tracks are added to and removed from an <audio> element using the add
track and remove
track events.
...instead, they're sent to the
track list object within the <audio> element's htmlmediaelement that corresponds to the type of
track that was added to the element: htmlmediaelement.audio
tracks an audio
tracklist containing all of the media element's audio
tracks.
...And 10 more matches
Geometry and reference spaces in WebXR - Web APIs
the article spatial
tracking in webxr builds upon the information provided here to cover how the physical position and orientation of the user's head, as well as potentially other parts of their body such as the hands, are mapped into the digital world, as well as how the relative positions of both physical and virtual objects are
tracked as they move around, so that the scene can be properly rendered and composited.
...each space has its own native origin, which is
tracked by the xr device's
tracking system.
... to be useful for spatial
tracking and scene geometry, though, you need to be able to correlate the xr device's perceived position with the space's coordinate system.
...And 9 more matches
XRReferenceSpace - Web APIs
the webxr device api's xrreferencespace interface describes the coordinate system for a specific
tracked entity or object within the virtual world using a specified
tracking behavior.
... the
tracking behavior is defined by the selected reference space type.
... it expands upon the base class, xrspace, by adding support for several different
tracking behaviors as well as to request a new reference space which describes the offset transform between the
tracked object and another location in the world.
...And 9 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
third party assistive technology, such as screen readers, screen magnifiers and voice input software, want to
track what's happening inside mozilla.
...using this information, a screen reader will speak out loud important changes to the document or ui, and allow the user to
track where they navigate.
...there's a very good chance they won't ask for more than the states marked [important]: state_unavailable [important] state_selected [important] state_focused [important] state_pressed state_checked [important] state_mixed state_readonly [important] state_hot
tracked state_default [important] state_expanded [important] state_collapsed [important] state_busy [important] state_floating state_marqueed state_animated state_invisible state_offscreen [important] state_sizeable state_moveable state_selfvoicing state_focusable [important] state_selectable [important] state_linked [important] state_trave...
...And 9 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); } you can also pass in a
track listing, this will repeat.
... the following
track listing will create an initial implicit row
track as 100 pixels and a second as 200px.
...when it fills up a column it will move onto the next explicit column, or create a new column
track in the implicit grid.
...And 9 more matches
grid-auto-columns - CSS: Cascading Style Sheets
the grid-auto-columns css property specifies the size of an implicitly-created grid column
track or pattern of
tracks.
... if a grid item is positioned into a column that is not explicitly sized by grid-template-columns, implicit grid
tracks are created to hold it.
... grid-auto-columns: 33.3%; /* <flex> values */ grid-auto-columns: 0.5fr; grid-auto-columns: 3fr; /* minmax() values */ grid-auto-columns: minmax(100px, auto); grid-auto-columns: minmax(max-content, 2fr); grid-auto-columns: minmax(20%, 80vmax); /* fit-content() values */ grid-auto-columns: fit-content(400px); grid-auto-columns: fit-content(5cm); grid-auto-columns: fit-content(20%); /* multiple
track-size values */ grid-auto-columns: min-content max-content auto; grid-auto-columns: 100px 150px 390px; grid-auto-columns: 10% 33.3%; grid-auto-columns: 0.5fr 3fr 1fr; grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); /* global values */ grid-auto-columns: inherit; grid-auto-columns: initi...
...And 9 more matches
Tk - HTTP
the tk response header indicates the
tracking status that applied to the corresponding request.
... (dynamic) tk: g (gateway or multiple parties) tk: n (not
tracking) tk: t (
tracking) tk: c (
tracking with consent) tk: p (potential consent) tk: d (disregarding dnt) tk: u (updated) directives !
...the origin server is currently testing its communication of
tracking status.
...And 9 more matches
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
we are able to align the content inside grid areas, and the grid
tracks themselves on these two axes.
...a a ."; } .item1 { grid-area: a; align-self: center; justify-self: center; } <div class="wrapper"> <div class="item1">item 1</div> </div> aligning the grid
tracks on the block axis if you have a situation where your grid
tracks use an area that is smaller than the grid container, then you can align the grid
tracks themselves, inside that container.
... once again, this operates on the block and inline axes, with align-content aligning
tracks on the block axis, and justify-content performing alignment on the inline axis.
...And 8 more matches
grid-auto-rows - CSS: Cascading Style Sheets
the grid-auto-rows css property specifies the size of an implicitly-created grid row
track or pattern of
tracks.
... if a grid item is positioned into a row that is not explicitly sized by grid-template-rows, implicit grid
tracks are created to hold it.
...id-auto-rows: auto; /* <length> values */ grid-auto-rows: 100px; grid-auto-rows: 20cm; grid-auto-rows: 50vmax; /* <percentage> values */ grid-auto-rows: 10%; grid-auto-rows: 33.3%; /* <flex> values */ grid-auto-rows: 0.5fr; grid-auto-rows: 3fr; /* minmax() values */ grid-auto-rows: minmax(100px, auto); grid-auto-rows: minmax(max-content, 2fr); grid-auto-rows: minmax(20%, 80vmax); /* multiple
track-size values */ grid-auto-rows: min-content max-content auto; grid-auto-rows: 100px 150px 390px; grid-auto-rows: 10% 33.3%; grid-auto-rows: 0.5fr 3fr 1fr; grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); /* global values */ grid-auto-rows: inherit; grid-auto-rows: initial; grid-auto-rows: unse...
...And 8 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
note: sites that automatically play audio (or videos with an audio
track) can be an unpleasant experience for users, so should be avoided when possible.
... to show subtitles/captions along with your video, you can use some javascript along with the <
track> element and the webvtt format.
... detecting
track addition and removal you can detect when
tracks are added to and removed from a <video> element using the add
track and remove
track events.
...And 8 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
62 call stack call stack, codingscripting, glossary, javascript a call stack is a mechanism for an interpreter (like the javascript interpreter in a web browser) to keep
track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.
... 183 grid column css, codingscripting a grid column is a vertical
track in a css grid layout, and is the space between two vertical grid lines.
... 184 grid lines css grids grid lines are created when you define
tracks in the explicit grid using css grid layout.
...And 7 more matches
Accessible multimedia - Learn web development
video text
tracks to make video accessible for deaf, blind, or even other groups of users (such as those on low bandwidth, or who don't understand the language the video is recorded in), you need to include text
tracks along with your video content.
... note: text
tracks are also useful for potentially any user, not just those with disabilities.
...ht not want to disturb others if they are in a quiet place (like a library.) this is not a new concept — television services have had closed captioning available for quite a long time: whereas many countries offer english films with subtitles written in their own native languages, and different language subtitles are often available on dvds, for example there are different types of text
track with different purposes.
...And 7 more matches
Ember interactivity: Events, classes and state - Learn web development
along the way, we'll look at using events in ember, creating component classes to contain javascript code to control interactive features, and setting up a service to keep
track of the data state of our app.
... objective: to learn how to create component classes and use events to control interactivity, and keep
track of app state using a service.
...for example, the @
tracked decorator (see slightly later on) runs code it is applied to, but additionally
tracks it and automatically updates the app when values change.
...And 7 more matches
DisplayMediaStreamConstraints.audio - Web APIs
the displaymediastreamconstraints dictionary's audio property is used to specify whether or not to request that the mediastream containing screen display contents also include an audio
track.
... this value may simply be a boolean, where true indicates that an audio
track should be included an false (the default) indicates that no audio should be included in the stream.
... more precise control over the audio data may be exercised by instead providing a media
trackconstraints object, which is used to process the audio prior to adding it to the stream.
...And 7 more matches
MediaStreamAudioSourceNode - Web APIs
this media could be from a microphone (through getusermedia()) or from a remote peer on a webrtc call (using the rtcpeerconnection's audio
tracks).
... the mediastreamaudiosourcenode takes the audio from the first mediastream
track whose kind attribute's value is audio.
... see
track ordering for more information about the order of
tracks.
...And 7 more matches
MediaStream Image Capture API - Web APIs
do this by calling mediastream.getvideo
tracks().
... this returns an array of mediastream
track objects.
... the code below assumes that the first item in the mediastream
track array is the one to use.
...And 7 more matches
NavigationPreloadManager - Web APIs
androidfirefox for androidopera for androidsafari on iossamsung internetnavigationpreloadmanager experimentalchrome full support 62edge full support 18firefox no support nonotes no support nonotes notes implementation
tracked in bug 1290958ie ?
... webview android full support 62chrome android full support 62firefox android no support nonotes no support nonotes notes implementation
tracked in bug 1290958opera android full support 46safari ios ?
... samsung internet android full support 8.0disable experimentalchrome full support 62edge full support 18firefox no support nonotes no support nonotes notes implementation
tracked in bug 1290958ie ?
...And 7 more matches
RTCRtpSender - Web APIs
the rtcrtpsender interface provides the ability to control and obtain details about how a particular mediastream
track is encoded and sent to a remote peer.
... with it, you can configure the encoding used for the corresponding
track, get information about the device's media capabilities, and so forth.
...if null, the
track and/or the connection doesn't support dtmf.
...And 7 more matches
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
these correspond to the following three types of transport supported by rtcpeerconnection: rtcrtpsender rtcrtpsenders handle the encoding and transmission of mediastream
track data to a remote peer.
... rtcrtpreceiver rtcrtpreceivers provide the ability to inspect and obtain information about incoming mediastream
track data.
... async function enablehold(audiostream) { try { await audiotransceiver.sender.replace
track(audiostream.getaudio
tracks()[0]); audiotransceiver.receiver.
track.enabled = false; audiotransceiver.direction = "sendonly"; } catch(err) { /* handle the error */ } } the three lines of code within the try block perform the following steps: replace their outgoing audio
track with a mediastream
track containing hold music.
...And 7 more matches
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
async function start() { try { const stream = await navigator.mediadevices.getusermedia(constraints); for (const
track of stream.get
tracks()) { pc.add
track(
track, stream); } selfvideo.srcobject = stream; } catch(err) { console.error(err); } } this isn't appreciably different from older webrtc connection establishment code.
...the resulting media
tracks are then added to the rtcpeerconnection by passing them into add
track().
... handling incoming
tracks we next need to set up a handler for
track events to handle inbound video and audio
tracks that have been negotiatied to be received by this peer connection.
...And 7 more matches
Layout using named grid lines - CSS: Cascading Style Sheets
in previous guides we’ve looked at placing items by the lines created by defining grid
tracks and also how to place items using named template areas.
...line naming is incredibly useful, but some of the more baffling looking grid syntax comes from this combination of names and
track sizes.
... multiple lines with the same name with repeat() if you want to give all of the lines in your grid a unique name then you will need to write out the
track definition long-hand rather than using the repeat syntax, as you need to add the name in square brackets while defining the
tracks.
...And 7 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
a basic example as a very simple example we can take a grid with 3 column
tracks and 3 row
tracks.
...i would like the first item to start on the far left of the grid and span a single column
track.
... addressing each item individually we can place all four items spanning row and column
tracks.
...And 7 more matches
minmax() - CSS: Cascading Style Sheets
syntax /* <inflexible-breadth>, <
track-breadth> values */ minmax(200px, 1fr) minmax(400px, 50%) minmax(30%, 300px) minmax(100px, max-content) minmax(min-content, 400px) minmax(max-content, auto) minmax(auto, 300px) minmax(min-content, auto) /* <fixed-breadth>, <
track-breadth> values */ minmax(200px, 1fr) minmax(30%, 300px) minmax(400px, 50%) minmax(50%, min-content) minmax(300px, max-content) minmax(200px, auto) /* <inflexible-bread...
...as a maximum, a <flex> value sets the flex factor of a grid
track; it is invalid as a minimum.
... <percentage> a non-negative percentage relative to the inline size of the grid container in column grid
tracks, and the block size of the grid container in row grid
tracks.
...And 7 more matches
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.
... containerless media webrtc uses bare mediastream
track objects for each
track being shared from one peer to another, without a container or even a mediastream associated with the
tracks.
... which codecs can be within those
tracks is not mandated by the webrtc specification.
...And 7 more matches
DisplayMediaStreamConstraints.video - Web APIs
the displaymediastreamconstraints dictionary's video property is used to configure the video
track in the stream returned by getdisplaymedia().
...since a video
track must always be included, a value of false results in a typeerror exception being thrown.
... more precise control over the format of the returned video
track may be exercised by instead providing a media
trackconstraints object, which is used to process the video data after obtaining it from the device but prior to adding it to the stream.
...And 6 more matches
MediaStreamConstraints.video - Web APIs
the mediastreamconstraints dictionary's video property is used to indicate what kind of video
track, if any, should be included in the mediastream returned by a call to getusermedia().
... syntax var videoconstraints = true | false | media
trackconstraints; value the value of the video property can be specified as either of two types: boolean if a boolean value is specified, it simply indicates whether or not a video
track should be included in the returned stream; if it's true, a video
track is included; if no video source is available or if permission is not given to use the video source, the call to getusermedia() will fail.
... if false, no video
track is included.
...And 6 more matches
RTCRtpSender.setStreams() - Web APIs
the rtcrtpsender method setstreams() associates the sender's
track with the specified mediastream or array of mediastream objects.
... syntax rtcrtpsender.setstreams(mediastream); rtcrtpsender.setstreams([mediastream...]); parameters mediastream or [mediastream...] optional an mediastream object—or an array of multiple mediastream objects—identifying the streams to which the rtcrtpsender's
track belongs.
... if this parameter isn't specified, no new streams will be associated with the
track.
...And 6 more matches
Screen Capture API - Web APIs
media
trackconstraints media
trackconstraints.cursor a constraindomstring indicating whether or not the cursor should be included in the captured display surface's stream, and if it should always be visible or if it should only be visible while the mouse is in motion.
... media
trackconstraints.displaysurface a constraindomstring indicating what type of display surface is to be captured.
... media
trackconstraints.logicalsurface indicates whether or not the video in the stream represents a logical display surface (that is, one which may not be entirely visible onscreen, or may be completely offscreen).
...And 6 more matches
Media container formats (file types) - Web media technologies
instead, it streams the encoded audio and video
tracks directly from one peer to another using mediastream
track objects to represent each
track.
...for example, an ogg file with only an opus audio
track is sometimes referred to as an opus file, and might even have the extension .opus.
...a good example of this is the mp3 audio file, which is in fact an mpeg-1 container with a single audio
track encoded using mpeg-1 audio layer iii encoding.
...And 6 more matches
ImageCapture - Web APIs
it provides an interface for capturing images from a photographic device referenced through a valid mediastream
track.
... constructor imagecapture() creates a new imagecapture object which can be used to capture still frames (photos) from a given mediastream
track which represents a video stream.
... properties imagecapture.
track read only returns a reference to the mediastream
track passed to the constructor.
...And 5 more matches
MediaStreamConstraints.audio - Web APIs
the mediastreamconstraints dictionary's audio property is used to indicate what kind of audio
track, if any, should be included in the mediastream returned by a call to getusermedia().
... syntax var audioconstraints = true | false | media
trackconstraints; value the value of the audio property can be specified as either of two types: boolean if a boolean value is specified, it simply indicates whether or not an audio
track should be included in the returned stream; if it's true, an audio
track is included; if no audio source is available or if permission is not given to use the audio source, the call to getusermedia() will fail.
... if false, no audio
track is included.
...And 5 more matches
Media Capture and Streams API (Media Stream) - Web APIs
it provides the interfaces and methods for working with the streams and their constituent
tracks, the constraints associated with data formats, the success and error callbacks when using the data asynchronously, and the events that are fired during the process.
... a mediastream consists of zero or more mediastream
track objects, representing various audio or video
tracks.
... each mediastream
track may have one or more channels.
...And 5 more matches
RTCConfiguration.bundlePolicy - Web APIs
if the remote peer isn't bundle-aware, the ice agent chooses one audio
track and one video
track and those two
tracks are each assigned to the corresponding rtcdtlstransport.
... all other
tracks are ignored by the connection.
... max-compat the ice agent intially creates one rtcdtlstransport for each media
track and a separate one for the rtcdatachannel, if one is created.
...And 5 more matches
RTCRtpStreamStats - Web APIs
kind a domstring whose value is "audio" if the associated mediastream
track is audio-only or "video" if the
track contains video.
... this value will match that of the media type indicated by rtccodecstats.codec, as well as the
track's kind property.
...
trackid a domstring which uniquely identifies the rtcmediastream
trackstats object representing the associated mediastream
track.
...And 5 more matches
WebRTC API - Web APIs
media streams can consist of any number of
tracks of media information;
tracks, which are represented by objects based on the mediastream
track interface, may contain one of a number of types of media data, including audio, video, and text (such as subtitles or even chapter names).
... most streams consist of at least one audio
track and likely also a video
track, and can be used to send and receive both live media or stored media information (such as a streamed movie).
... rtcstatsreport provides information detailing statistics for a connection or for an individual
track on the connection; the report can be obtained by calling rtcpeerconnection.getstats().
...And 5 more matches
XRReferenceSpace: reset event - Web APIs
this is common when the user calibrates or recalibrates an xr device, or if the device automatically changes its origin after losing
tracking of the user, then re-gaining it.
... the
tracking system has temporarily lost the user, then regained them, but not until after they had moved enough to leave the immediate vicinity of the last-known position.
... the webxr infrastructure or hardware drivers detected that the device had temporarily lost
tracking, causing the hardware and software to be out of sync on position and orientation.
...And 5 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
= 'hsl' + a + hsl + v + ')'; return value; }; color.prototype.getcolor = function getcolor() { if (this.a | 0 === 1) return this.gethexa(); return this.getrgba(); }; /*=======================================================================*/ /*=======================================================================*/ /*========== capture mouse movement ==========*/ var setmouse
tracking = function setmouse
tracking(elem, callback) { elem.addeventlistener('mousedown', function(e) { callback(e); document.addeventlistener('mousemove', callback); }); document.addeventlistener('mouseup', function(e) { document.removeeventlistener('mousemove', callback); }); }; /*====================*/ // color picker class /*====================*/ function colorpicker(node)...
...ting the color-picker /*************************************************************************/ colorpicker.prototype.createpickingarea = function createpickingarea() { var area = document.createelement('div'); var picker = document.createelement('div'); area.classname = 'picking-area'; picker.classname = 'picker'; this.picking_area = area; this.color_picker = picker; setmouse
tracking(area, this.updatecolor.bind(this)); area.appendchild(picker); this.node.appendchild(area); }; colorpicker.prototype.createhuearea = function createhuearea() { var area = document.createelement('div'); var picker = document.createelement('div'); area.classname = 'hue'; picker.classname ='slider-picker'; this.hue_area = area; this.hue_picker = picker; setmouse
tracking(are...
...a, this.updatehueslider.bind(this)); area.appendchild(picker); this.node.appendchild(area); }; colorpicker.prototype.createalphaarea = function createalphaarea() { var mask = document.createelement('div'); var picker = document.createelement('div'); mask.classname = 'alpha'; picker.classname = 'slider-picker'; this.alpha_mask = mask; this.alpha_picker = picker; setmouse
tracking(mask, this.updatealphaslider.bind(this)); mask.appendchild(picker); this.node.appendchild(mask); }; colorpicker.prototype.createpreviewbox = function createpreviewbox(e) { var preview_box = document.createelement('div'); var preview_color = document.createelement('div'); preview_box.classname = 'preview'; preview_color.classname = 'preview-color'; this.preview_color = preview_c...
...And 5 more matches
CSS - Archive of obsolete content
lbar-highlight-color css property is a microsoft extension that specifies the color of the slider tray, the top and left edges of the scroll box, and the scroll arrows of a scroll bar.-ms-scrollbar-shadow-colorthe -ms-scrollbar-shadow-color css property is a microsoft extension that specifies the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.-ms-scrollbar-
track-colorthe -ms-scrollbar-
track-color css property is a microsoft extension that specifies the color of the
track element of a scrollbar.-ms-text-autospacethe -ms-text-autospace css property is a microsoft extension that specifies the autospacing and narrow space width adjustment of text.-ms-touch-selectthe -ms-touch-select css property is a microsoft extension that toggles the gripper visual elemen...
...typically it is a triangle that points downward.::-ms-fillthe ::-ms-fill css pseudo-element is a microsoft extension that represents a progress bar displayed by <progress>.::-ms-fill-lowerthe ::-ms-fill-lower css pseudo-element represents the lower portion of the
track of a slider control; that is, the portion corresponding to values less than the value currently selected by the thumb.
... a slider control is one possible representation of <input type="range">.::-ms-fill-upperthe ::-ms-fill-upper css pseudo-element is a microsoft extension that represents the upper portion of the
track of a slider control; that is, the portion corresponding to values greater than the value currently selected by the thumb.
...And 4 more matches
Debugger.Memory - Firefox Developer Tools
allocation site
tracking the javascript engine marks each new object with the call stack at which it was allocated, if: the object is allocated in the scope of a global object that is a debuggee of some debugger instancedbg; and dbg.memory.
trackingallocationsites is set to true.
... allocation logging ifdbg is a debugger instance, and dbg.memory.
trackingallocationsites is set to true, then the javascript engine logs each object allocated bydbg’s debuggee code.
... accessor properties of the debugger.memory.prototype object ifdbg is a debugger instance, then <i>dbg</i>.memory is a debugger.memory instance, which inherits the following accessor properties from its prototype:
trackingallocationsites a boolean value indicating whether this debugger.memory instance is capturing the javascript execution stack when each object is allocated.
...And 4 more matches
Timing element visibility with the Intersection Observer API - Web APIs
in this article, we'll build a mock blog which has a number of ads interspersed among the contents of the page, then use the intersection observer api to
track how much time each ad is visible to the user.
... there's a good reason why the notion of
tracking visibility of ads is being used in this example.
... nextarticleid each article is given a unique id number; this variable
tracks the next id to use, starting with 1.
...And 4 more matches
MediaStream() - Web APIs
the mediastream() constructor returns a newly-created mediastream, which serves as a collection of media
tracks, each represented by a mediastream
track object.
... if any parameters are given, the specified
tracks are added to the new stream.
... otherwise, the stream has no
tracks.
...And 4 more matches
XRSession: selectend event - Web APIs
primary actions include things like users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video
tracking system or handheld controller with an accelerometer.
... after checking to ensure that the received event is a
tracked-pointer event (the only kind we handle here), the target ray's pose is obtained using getpose().
... if the target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for selectstart events, a mybegin
tracking() function is called with the target ray pose's matrix.
...And 4 more matches
XRSession: selectstart event - Web APIs
primary actions include things like users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video
tracking system or handheld controller with an accelerometer.
... after checking to ensure that the received event is a
tracked-pointer event (the only kind we handle here), the target ray's pose is obtained using getpose().
... if the target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for selectstart events, a mybegin
tracking() function is called with the target ray pose's matrix.
...And 4 more matches
XRSession: squeezeend event - Web APIs
primary squeeze actions include things like users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video
tracking system or handheld controller with an accelerometer.
... after checking to ensure that the received event is a
tracked-pointer event (the only kind we handle here), the target ray's pose is obtained using getpose().
... if the target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for squeezestart events, a mybegin
tracking() function is called with the target ray pose's matrix.
...And 4 more matches
Web APIs
analysernode animation animationeffect animationevent animationplaybackevent animationtimeline arraybufferview attr audiobuffer audiobuffersourcenode audioconfiguration audiocontext audiocontextlatencycategory audiocontextoptions audiodestinationnode audiolistener audionode audionodeoptions audioparam audioparamdescriptor audioparammap audioprocessingevent audioscheduledsourcenode audio
track audio
tracklist audioworklet audioworkletglobalscope audioworkletnode audioworkletnodeoptions audioworkletprocessor authenticatorassertionresponse authenticatorattestationresponse authenticatorresponse b baseaudiocontext basiccardrequest basiccardresponse batterymanager beforeinstallpromptevent beforeunloadevent biquadfilternode blob blobbuilder blobevent bluetooth bluetoothadvertisin...
...oduct cssmathsum cssmathvalue cssmediarule cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration cssstylerule cssstylesheet cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist cssvariablereferencevalue cache cachestorage canvascapturemediastream
track canvasgradient canvasimagesource canvaspattern canvasrenderingcontext2d caretposition channelmergernode channelsplitternode characterdata childnode client clients clipboard clipboardevent clipboarditem closeevent comment compositionevent constantsourcenode constrainboolean constraindomstring constraindouble constrainulong contentindex contentindexevent convolvernode countqueuingstrate...
... htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlshadowelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement htmltablecaptionelement htmltablecellelement htmltablecolelement htmltableelement htmltablerowelement htmltablesectionelement htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement html
trackelement htmlulistelement htmlunknownelement htmlvideoelement hashchangeevent headers history hkdfparams hmacimportparams hmackeygenparams i idbcursor idbcursorsync idbcursorwithvalue idbdatabase idbdatabaseexception idbdatabasesync idbenvironment idbenvironmentsync idbfactory idbfactorysync idbindex idbindexsync idbkeyrange idblocaleawarekeyrange idbmutablefile idbobje...
...And 4 more matches
grid-template - CSS: Cascading Style Sheets
<string> <
track-size>?
...]+ [ / <explicit-
track-list> ]?
... sets grid-template-areas to the strings listed, grid-template-rows to the
track sizes following each string (filling in auto for any missing sizes), and splicing in the named lines defined before/after each size, and grid-template-columns to the
track listing specified after the slash (or none, if not specified).
...And 4 more matches
HTTP Index - HTTP
45 http cookies advertising, browser, cookies, cookies article, guide, http, history, javascript, privacy, protocols, server, storage, web development, data, request,
tracking an http cookie (web cookie, browser cookie) is a small piece of data that a server sends to the user's web browser.
... 112 dnt dnt, http, reference, header the dnt (do not
track) request header indicates the user's
tracking preference.
... 151 feature-policy: xr this feature policy directive was at one point defined as xr (but implemented only in chrome as vr), use xr-spatial-
tracking instead.
...And 4 more matches
Introduction to web APIs - Learn web development
for example, the web audio api provides javascript constructs for manipulating audio in the browser — taking an audio
track, altering its volume, applying effects to it, etc.
... audio and video apis like htmlmediaelement, the web audio api, and webrtc allow you to do really interesting things with multimedia such as creating custom ui controls for playing audio and video, displaying text
tracks like captions and subtitles along with your videos, grabbing video from your web camera to be manipulated via a canvas (see above) or displayed on someone else's computer in a web conference, or adding effects to audio
tracks (such as gain, distortion, panning, etc).
...next, we include a <button> that we'll use to play and stop the music, and an <input> element of type range, which we'll use to adjust the volume of the
track while it's playing.
...And 3 more matches
Gecko info for Windows accessibility vendors
microsoft active accessibility (msaa) an api devised by microsoft so that accessibility aids can
track what's going on inside the user interface of any software package that supports it.
...events such as focus changes must be
tracked through msaa events, rather than dom events.
...if it is a role_application, role_dialog or role_alert then stay in focus
tracking mode -- there is no need to parse the document.
...And 3 more matches
Localizing with Koala
for example: c:\users\stas> cd c:\mozilla\l10n\locale\x-testing c:\mozilla\l10n\locale\x-testing> rmdir 3.6 c:\mozilla\l10n\locale\x-testing> hg clone http://bitbucket.org/mozillal10n/x-testing 3.6 otherwise, it's a good idea to create your local repository in order to be able to
track changes you make to the localization files.
...this will allow you to
track changes, export them to remote repositories (first on bitbucket, later on hg.mozilla.org) and revert files to earlier versions in case of errors.
...browser\chrome\browser\searchbar.dtd the question marks ("?") in front of the file names indicate that the files are not
tracked by mercurial in this repository (yet).
...And 3 more matches
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
window.demo
trackallocations = function() { dbg = new debugger; // this makes hacking on the demo *much* more // pleasant.
... var w = gbrowser.selectedbrowser.contentwindow; console.log("
tracking allocations in page: " + w.location.href); // make that window a debuggee of our debugger.
... dbg.adddebuggee(w.wrappedjsobject); // enable allocation
tracking in dbg's debuggees.
...And 3 more matches
DisplayMediaStreamConstraints - Web APIs
the displaymediastreamconstraints dictionary is used to specify whether or not to include video and/or audio
tracks in the mediastream to be returned by getdisplaymedia(), as well as what type of processing must be applied to the
tracks.
... processing information is specified using media
trackconstraints objects providing options which are applied to the
track after the media data is received but before it is made available on the mediastream.
... properties audio a boolean or media
trackconstraints value; if a boolean, this value simply indicates whether or not to include an audio
track in the mediastream returned by getdisplaymedia().
...And 3 more matches
MediaStreamConstraints - Web APIs
the mediastreamconstraints dictionary is used when calling getusermedia() to specify what kinds of
tracks should be included in the returned mediastream, and, optionally, to establish constraints for those
tracks' settings.
...
track constraints audio either a boolean (which indicates whether or not an audio
track is requested) or a media
trackconstraints object providing the constraints which must be met by the audio
track included in the returned mediastream.
... if constraints are specified, an audio
track is inherently requested.
...And 3 more matches
Using the Screen Capture API - Web APIs
there are three new constraints added to media
trackconstraints (as well as to media
tracksupportedconstraints and media
tracksettings) for configuring a screen capture stream: cursor indicates whether or not to capture the mouse cursor, and if so, whether to do so all the time or only while the mouse is in motion.
...this could be refined further by specifying additional information for each of audio and video: const gdmoptions = { video: { cursor: "always" }, audio: { echocancellation: true, noisesuppression: true, samplerate: 44100 } } in this example the cursor will always be visible in the capture, and the audio
track should ideally have noise suppression and echo cancellation features enabled, as well as an ideal audio sample rate of 44.1khz.
... capturing audio is always optional, and even when web content requests a stream with both audio and video, the returned mediastream may still have only one video
track, with no audio.
...And 3 more matches
WebRTC Statistics API - Web APIs
rtcicecandidatestats rtcstats media-source statistics about the media produced by the mediastream
track attached to an rtp sender.
... the dictionary this key maps to depends on the
track's kind.
...this has been obsoleted since the transition to webrtc being
track-based rather than stream-based.
...And 3 more matches
Using bounded reference spaces - Web APIs
introduction a bounded reference space is one which represents an xr environment in which the user is able to move around physically in the real world while being
tracked by the xr hardware, with their movements being then transposed into the simulation.
... the boundaries established by the bounded reference space, then, represent the edges of the safely passable,
tracked space in the user's real world environment that are available for their movement while in the simulation.
... the requirements, then, for a bounded reference space are: xr hardware that can
track the user's movement in the real world, such as a camera-based system.
...And 3 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
the cameras may be fixed in place, but they may also be set up to move around as well,
tracking the movement of the performers, dollying in and out to achieve emotional impact, and so forth.
...for example: const transform = createperspectivematrix(viewport, 130, 1, 100); const translatevec = vec3.fromvalues(-
trackdistance, -cranedistance, pushdistance); mat4.translate(transform, transform, translatevec); this starts with the perspective matrix representing a 130° vertical field of view, then applies a translation that moves the camera in a manner that includes
track, crane, and push movements.
...in classic filmmaking, this is typically done with the camera mounted on a
track or on a moving vehicle.
...And 3 more matches
WebXR Device API - Web APIs
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.
... xrframe while presenting an xr session, the state of all
tracked objects which make up the session are represented by an xrframe.
...events which communicate
tracking states will also use xrframe to contain that information.
...And 3 more matches
XRPermissionDescriptor.optionalFeatures - Web APIs
xrboundedreferencespace local a
tracking space whose native origin is located near the viewer's position at the time the session was created.
...the user isn't expected to move much if at all beyond their starting position, and
tracking is optimized for this use case.
... for devices with six degrees of freedom (6dof)
tracking, the local reference space tries to keep the origin stable relative to the environment.
...And 3 more matches
XRPermissionDescriptor.requiredFeatures - Web APIs
xrboundedreferencespace local a
tracking space whose native origin is located near the viewer's position at the time the session was created.
...the user isn't expected to move much if at all beyond their starting position, and
tracking is optimized for this use case.
... for devices with six degrees of freedom (6dof)
tracking, the local reference space tries to keep the origin stable relative to the environment.
...And 3 more matches
XRPermissionStatus.granted - Web APIs
xrboundedreferencespace local a
tracking space whose native origin is located near the viewer's position at the time the session was created.
...the user isn't expected to move much if at all beyond their starting position, and
tracking is optimized for this use case.
... for devices with six degrees of freedom (6dof)
tracking, the local reference space tries to keep the origin stable relative to the environment.
...And 3 more matches
XRReferenceSpaceType - Web APIs
xrboundedreferencespace local a
tracking space whose native origin is located near the viewer's position at the time the session was created.
...the user isn't expected to move much if at all beyond their starting position, and
tracking is optimized for this use case.
... for devices with six degrees of freedom (6dof)
tracking, the local reference space tries to keep the origin stable relative to the environment.
...And 3 more matches
XRSession.requestReferenceSpace() - Web APIs
xrboundedreferencespace local a
tracking space whose native origin is located near the viewer's position at the time the session was created.
...the user isn't expected to move much if at all beyond their starting position, and
tracking is optimized for this use case.
... for devices with six degrees of freedom (6dof)
tracking, the local reference space tries to keep the origin stable relative to the environment.
...And 3 more matches
XRSession: squeezestart event - Web APIs
after checking to ensure that the received event is a
tracked-pointer event (the only kind we handle here), the target ray's pose is obtained using getpose().
... if the target ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for squeezestart events, a mybegin
tracking() function is called with the target ray pose's matrix.
... the mybegin
tracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up.
...And 3 more matches
XRTargetRayMode - Web APIs
targeting may be done by looking at the target using a gaze-
tracking system, pointing at the target with a hand controller, glove, or motion-
tracking system, or by tapping or clicking on the target using a finger on a screen or with a mouse.
... values gaze the user is using a gaze-
tracking system (or gaze input) which detects the direction in which the user is looking.
...
tracked-pointer targeting is being performed using a handheld device or hand-
tracking system which the user points in the direction of the target.
...And 3 more matches
Box-shadow generator - CSS: Cascading Style Sheets
true : false; this.topic = topic; this.node = node; var pointer = document.createelement('div'); pointer.classname = 'ui-slider-pointer'; node.appendchild(pointer); this.pointer = pointer; setmouse
tracking(node, updateslider.bind(this)); sliders[topic] = this; setvalue(topic, this.value); } var setbuttoncomponent = function setbuttoncomponent(node) { var type = node.getattribute('data-type'); var topic = node.getattribute('data-topic'); if (type === "sub") { node.textcontent = '-'; node.addeventlistener("click", function() { decrement(topic); }); } if (type === "ad...
... if (value > slider.max || value < slider.min) return; var delta = slider.max - slider.min; var width = slider.node.clientwidth; var offset = slider.pointer.clientwidth; var pos = (value - slider.min) * width / delta; slider.value = value; slider.pointer.style.left = pos - offset / 2 + "px"; slider.node.setattribute('data-value', value); notify.call(slider); } var setmouse
tracking = function setmouse
tracking(elem, callback) { elem.addeventlistener("mousedown", function(e) { callback(e); document.addeventlistener("mousemove", callback); }); document.addeventlistener("mouseup", function(e) { document.removeeventlistener("mousemove", callback); }); } var subscribe = function subscribe(topic, callback) { if (subscribers[topic] === undefined) subscr...
...snan(value) === false && value >= 0 && value <= 1) color.a = value.tofixed(2); updateui(); } var inputchangehexa = function inputchangehexa(topic) { var selector = "[data-action='set-hexa-" + topic + "']"; var node = document.queryselector("#colorpicker " + selector); var value = node.value; color.sethexa(value); color.updatehsv(); updateui(); } var setmouse
tracking = function setmouse
tracking(elem, callback) { elem.addeventlistener("mousedown", function(e) { callback(e); document.addeventlistener("mousemove", callback); }); document.addeventlistener("mouseup", function(e) { document.removeeventlistener("mousemove", callback); }); } /* * observer */ var setcolor = function setcolor(obj) { if(obj instanceof color !
...And 3 more matches
Grid template areas - CSS: Cascading Style Sheets
note that for the wide layout i keep my nine column
track grid, i redefine where items are placed using grid-template-areas.
... our grid is a two-column
track grid, with the column for the image sized at 1fr and the text 3fr.
...a single column
track of 1fr would then take up the rest of the space.
...And 3 more matches
Card - CSS: Cascading Style Sheets
recipe download this example choices made the card is laid out using css grid layout despite being a single dimensional layout, as it enables the use of content sizing for the grid
tracks.
... when setting up the single column grid i use the following: .card { display: grid; grid-template-rows: max-content 200px 1fr; } the heading
track is set to max-content, which prevents it from stretching.
... i have decided that i want my image to live within a
track that is 200 pixels tall.
...And 3 more matches
scrollbar-color - CSS: Cascading Style Sheets
the scrollbar-color css property sets the color of the scrollbar
track and thumb.
... the
track refers to the background of the scrollbar, which is generally fixed regardless of the scrolling position.
... the thumb refers to the moving part of the scrollbar, which usually floats on top of the
track.
...And 3 more matches
Autoplay guide for media and Web Audio APIs - Web media technologies
automatically starting the playback of audio (or videos with audio
tracks) immediately upon page load can be an unwelcome surprise to users.
... autoplay blocking is not applied to <video> elements when the source media does not have an audio
track, or if the audio
track is muted.
... media with an active audio
track are considered to be audible, and autoplay blocking applies to them.
...And 3 more matches
Enhanced Extension Installation - Archive of obsolete content
};
tracking install locations since there are only two locations, the installed location of an extension is expressed throughout the code using a boolean value, often referred to as isprofile - true if the item is installed in the profile directory's extensions folder.
...
tracking item type item type is
tracked for the most part by containment in one or other of the two containers.
... the extension manager loads the xml/rdf datasources (this is allowable and necessary because a major change has happened) and gets a list of all items that need to be installed (
tracked using a tobeinstalled flag on the item in the datasource).
...And 2 more matches
Building accessible custom components in XUL - Archive of obsolete content
when you click a spreadsheet cell, assistive technologies
track the focus change and know which cell has received focus.
...inspect32 confirms that assistive technologies
track the focus as we navigate within the spreadsheet.
... <caption>focus is
tracked properly during keyboard navigation</caption> further reading document object model events adding editing capabilities download stage-5.zip install stage-5.xpi we now have a fully accessible xul spreadsheet, correctly focusable, correctly keyboard-navigable, and correctly exposed to assistive technologies.
...And 2 more matches
mozbrowsersecuritychange
non-standard this feature is non-standard and is not on a standards
track.
...
trackingstate a domstring representing the current loading state of
tracking content.
... possible values are: loaded_
tracking_content: indicates that the
tracking content has been loaded.
...And 2 more matches
Key Values - Web APIs
vk_media_stop (0xb2) appcommand_media_stop gdk_key_audiostop (0x1008ff15) qt::key_mediastop (0x01000081) keycode_media_stop (86) "media
tracknext" [1] seeks to the next media or program
track.
... vk_media_next_
track (0xb0) appcommand_media_next
track gdk_key_audionext (0x1008ff17) qt::key_medianext (0x01000083) keycode_media_next (87) "media
trackprevious" [1] seeks to the previous media or program
track.
... vk_media_prev_
track (0xb1) appcommand_media_previous
track gdk_key_audioprev (0x1008ff16) qt::key_mediaprevious (0x01000082) keycode_media_previous (88) [1] internet explorer, edge, and firefox (36 and earlier) use "medianext
track" and "mediaprevious
track" instead of "media
tracknext" and "media
trackprevious".
...And 2 more matches
LocalMediaStream - Web APIs
see stopping a video stream in mediastream
track to learn how.
...however, control over playback of media has been moved to the individual mediastream
track objects, so this is no longer necessary.
... instead, media is stopped by calling mediastream
track.stop() on each
track that needs to be stopped.
...And 2 more matches
MediaDevices.getUserMedia() - Web APIs
the mediadevices.getusermedia() method prompts the user for permission to use a media input which produces a mediastream with
tracks containing the requested types of media.
... that stream can include, for example, a video
track (produced by either a hardware or virtual video source such as a camera, video recording device, screen sharing service, and so forth), an audio
track (similarly, produced by a physical or virtual audio source like a microphone, a/d converter, or the like), and possibly other
track types.
...if the browser cannot find all media
tracks with the specified types that meet the constraints given, then the returned promise is rejected with notfounderror.
...And 2 more matches
MediaStreamAudioSourceNode.mediaStream - Web APIs
the mediastreamaudiosourcenode interface's read-only mediastream property indicates the mediastream that contains the audio
track from which the node is receiving audio.
... syntax audiosourcestream = mediastreamaudiosourcenode.mediastream; value a mediastream representing the stream which contains the mediastream
track serving as the source of audio for the node.
... the user agent uses the first audio
track it finds on the specified stream as the audio source for this node.
...And 2 more matches
Media Source API - Web APIs
media source extensions concepts and usage playing video and audio has been available in web applications without plugins for a few years now, but the basic features offered have really only been useful for playing single whole
tracks.
...mse allows us to replace the usual single
track src value fed to media elements with a reference to a mediasource object, which is a container for information like the ready state of the media for being played, and references to multiple sourcebuffer objects that represent the different chunks of media that make up the entire stream.
...
trackdefault provides a sourcebuffer with kind, label, and language information for
tracks that do not contain this information in the initialization segments of a media chunk.
...And 2 more matches
RTCPeerConnection.getSenders() - Web APIs
the rtcpeerconnection method getsenders() returns an array of rtcrtpsender objects, each of which represents the rtp sender responsible for transmitting one
track's data.
... a sender object provides methods and properties for examining and controlling the encoding and transmission of the
track's data.
... syntax var senders = rtcpeerconnection.getsenders(); return value an array of rtcrtpsender objects, one for each
track on the connection.
...And 2 more matches
RTCRtpSender.setParameters() - Web APIs
the setparameters() method of the rtcrtpsender interface applies changes the configuration of sender's
track, which is the mediastream
track for which the rtcrtpsender is responsible.
... in other words, setparameters() updates the configuration of the rtp transmission as well as the encoding configuration for a specific media
track on the webrtc connection.
... syntax var promise = rtcrtpsender.setparameters(parameters) parameters parameters an object conforming with the rtcrtpsendparameters dictionary, specifying options for the rtcrtpsender; these include potential codecs that could be use for encoding the sender's
track.
...And 2 more matches
Storage Access API - Web APIs
prompting heuristics currently vary across the two implementers of the storage access api — safari shows prompts for all embedded
tracking content that has not previously received storage access, while firefox only prompts users after a
tracking origin has requested storage access on more than a threshold number of sites.
...design properties unique to firefox are summarized here: if the embedded origin
tracker.example has already obtained first-party storage access on the top-level origin foo.example, and the user visits a page from foo.example embedding a page from
tracker.example again in less than 30 days, the embedded origin will have storage access immediately when loading.
... if a page from top-level origin foo.example embeds more than one <iframe> from
tracker.example, and one of those <iframe>s uses the storage access api in order to obtain storage access successfully, all other iframes from
tracker.example on foo.example top-level origins will immediately gain storage access as well, without needing to call requeststorageaccess() separately.
...And 2 more matches
Touch events - Web APIs
to provide quality support for touch-based user interfaces, touch events offer the ability to interpret finger (or stylus) activity on touch screens or
trackpads.
...this may be a screen or
trackpad.
... example this example
tracks multiple touchpoints at a time, allowing the user to draw in a <canvas> with more than one finger at a time.
...And 2 more matches
XRInputSource.targetRayMode - Web APIs
the possible values are: gaze the user is using a gaze-
tracking system (or gaze input) which detects the direction in which the user is looking.
...
tracked-pointer targeting is being performed using a handheld device or hand-
tracking system which the user points in the direction of the target.
... for each such input, this example looks for inputs whose targetraymode is
tracked-pointer, indicating that the input is in fact intended to represent a targeting device rather than a gazing device, screen tap, or mouse click.
...And 2 more matches
XRInputSource.targetRaySpace - Web APIs
its native origin
tracks the position of the origin point of the target ray, and its orientation indicates the orientation of the controller device itself.
... the target ray space reported by
tracked pointer inputs (targetraymode of
tracked-pointer) is actually based upon the true spatial position and orientation of the input device.
... for each such input, this example looks for inputs whose targetraymode is
tracked-pointer, indicating that the input is in fact intended to represent a targeting device rather than a gazing device, screen tap, or mouse click.
...And 2 more matches
XRSession: squeeze event - Web APIs
examples of comon kinds of primary action are users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video
tracking system or handheld controller with an accelerometer.
...the handler fetches the pose representing the target ray for
tracked-pointer inputs and sends the pose's transform to a function called myhandlesqueezewithray().
... this code treats the squeeze as an instantaneous action that doesn't involve
tracking an ongoing activity.
...And 2 more matches
ARIA Test Cases - Accessibility
when the button is pressed, the menu should be
tracked like any other menu.
...menus are
tracked, closing menus also results in correct focus
tracking.
...menus and focus are properly
tracked upon activation.
...And 2 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
the grid in my next example has three columns and two row
tracks.
... this means there are three
tracks running down the block axis.
...it then moves onto the next line, creating a new row
track, and fills in more items: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); grid-gap: 10px; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item3">item 3</div> <div class="item4">item 4</div> ...
...And 2 more matches
Recipe: Media objects - CSS: Cascading Style Sheets
another reason to use grid layout is in order that i can use fit-content() for the
track sizing of the image.
... by using fit-content with a maximum size of 200 pixels, when we have a small image such as the icon, the
track only gets as large as the size of that image — the max-content size.
... if the image is larger, the
track stops growing at 200 pixels and as the image has a max-width of 100% applied, it scales down so that it continues to fit inside the column.
...And 2 more matches
WebKit CSS extensions - CSS: Cascading Style Sheets
bkit-text-combine -webkit-text-decoration-skip -webkit-text-decorations-in-effect -webkit-text-fill-color -webkit-text-security -webkit-text-stroke-color -webkit-text-stroke-width -webkit-text-stroke -webkit-text-zoom -webkit-transform-origin-x -webkit-transform-origin-y -webkit-transform-origin-z u -webkit-user-drag -webkit-user-modify * a few are on the standards, unprefixed
track ** new syntax has been standardized.
... webkit-prefixed properties on the standards
track -webkit-appearance -webkit-font-size-delta -webkit-mask-composite -webkit-mask-position-x -webkit-mask-position-y -webkit-mask-repeat-x -webkit-mask-repeat-y formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below.
...form-style -webkit-transition -webkit-transition-delay -webkit-transition-duration -webkit-transition-property -webkit-transition-timing-function u-w -webkit-user-select -epub-word-break -epub-writing-mode supported in non-webkit browsers without a prefix, but not standard the following properties are supported in at least one browser without a prefix, but are not on the standards
track.
...And 2 more matches
HTML attribute reference - HTML: Hypertext Markup Language
default <
track> indicates that the
track should be enabled unless the user's preferences indicate something different.
... kind <
track> specifies the kind of text
track.
... label <optgroup>, <option>, <
track> specifies a user-readable title of the element.
...And 2 more matches
Using HTTP cookies - HTTP
cookies are mainly used for three purposes: session management logins, shopping carts, game scores, or anything else the server should remember personalization user preferences, themes, and other settings
tracking recording and analyzing user behavior cookies were once used for general client-side storage.
...
tracking and privacy third-party cookies a cookie is associated with a domain.
...these are mainly used for advertising and
tracking across the web.
...And 2 more matches
DNT - HTTP
the dnt (do not
track) request header indicates the user's
tracking preference.
... header type request header forbidden header name yes syntax dnt: 0 dnt: 1 dnt: null directives 0 the user prefers to allow
tracking on the target site.
... 1 the user prefers not to be
tracked on the target site.
...And 2 more matches
JavaScript Debugger Service - Archive of obsolete content
in firefox versions prior to gecko 33 (firefox 33 / thunderbird 33 / seamonkey 2.30), the javascript debugger service (or simply jsd) used to be an xpcom component that allows the
tracking of javascript while it was being executed in the browser.
...see the
tracking bug bug 800200 for more details.
...l-known why debughook sometimes fails to trigger jsd.debughook = { onexecute: function(frame, type, rv) { stacktrace = ""; for (var f = frame; f; f = f.callingframe) { stacktrace += f.script.filename + "@" + f.line + "@" + f.functionname + "\n"; } dump(stacktrace); return components.interfaces.jsdiexecutionhook.return_continue; } }; filters jsd also allows the use of filters to
track which scripts should trigger the hooks.
... jsd.clearfilters(); // clear the list of filters // we exclude the scripts with the following filenames from being
tracked jsd.appendfilter(createfilter("*/firefox/components/*")); jsd.appendfilter(createfilter("*/firefox/modules/*")); jsd.appendfilter(createfilter("xstringbundle")); jsd.appendfilter(createfilter("chrome://*")); jsd.appendfilter(createfilter("x-jsd:ppbuffer*")); jsd.appendfilter(createfilter("xpcsafejsobjectwrapper.cpp")); jsd.appendfilter(createfilter("file://*")); note that appendfilter adds th...
Archived Mozilla and build documentation - Archive of obsolete content
searches, lookups, package
tracking, and even word definitions can all be retrieved from user-customized bookmarks.
...the extension will access tinderbox, mozilla.org's webtool for
tracking source code status, to get the status of the code.
...the space manager is responsible for keeping
track of where space is taken up and where it is available.
... tamarin the download manager schema the download manager uses an sqlite table to keep
track of downloads in progress as well as queued and past downloads.
Mozilla XForms Specials - Archive of obsolete content
(limitation
tracked in bug 280368) mixing repeat and table or ul it is not possible to mix repeats with either table or ul.
...(limitation
tracked in bug 313111)pseudo element support there is no support for the pseudo elements (::value, ::repeat-item, and ::repeat-index ).
...(limitation
tracked in bug 271724) optional parameters in xpath functions optional parameters in xpath functions are not supported, you will have to specify all parameters when calling a function.
...instead of using digest('abc', 'sha-1') explicitly use the third parameter (the results are equal): digest('abc', 'sha-1', 'base64') (limitation
tracked in bug 477857) extensions enumerating instances the standardized nsixformsmodelelement does not allow one to enumerate over all possible instances, but only to retrieve instances by their name.
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
grid lines are created when you define
tracks in the explicit grid using css grid layout.
... in the following example there is a grid with three column
tracks and two row
tracks.
... lines are also created in the implicit grid when implicit
tracks are created to hold content positioned outside of the explicit grid, however these lines cannot be addressed by a number.
...} <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 100px; } .item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } naming lines the lines created in the explicit grid can be named, by adding the name in square brackets before or after the
track sizing information.
Gutters - MDN Web Docs Glossary: Definitions of Web-related terms
gutters or alleys are spacing between content
tracks.
... in the example below we have a three-column and two-row
track grid, with 20-pixel gaps between column
tracks and 20px-gaps between row
tracks.
...und-color: #fff8f8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3,1.2fr); grid-auto-rows: 45%; grid-column-gap: 20px; grid-row-gap: 20px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> in terms of grid sizing, gaps act as if they were a regular grid
track however nothing can be placed into the gap.
... the grid-gap properties are not the only thing that can cause
tracks to space out.
Index - Learn web development
3 accessible multimedia accessibility, article, audio, beginner, codingscripting, html, images, javascript, learn, multimedia, video, captions, subtitles, text
tracks this chapter has provided a summary of accessibility concerns for multimedia content, along with some practical solutions.
...you should also appreciate that objects are very useful as structures for storing related data and functionality — if you tried to keep
track of all the properties and methods in our person object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names.
...as a recap, there are two distinct problems we've been discussing here: 250 video and audio content article, audio, beginner, guide, html, video, captions, subtitles,
track and that's a wrap; we hope you had fun playing with video and audio in web pages!
...we can now add todo items to our app, and the state of the data is
tracked using our service.
Experimental features in Firefox
nightly 64 no developer edition 64 no beta 64 no release 64 no preference name media.setsinkid.enabled htmlmediaelement properties: audio
tracks and video
tracks enabling this feature adds the htmlmediaelement.audio
tracks and htmlmediaelement.video
tracks properties to all html media elements.
... however, because firefox doesn't currently suport multiple audio and video
tracks, the most common use cases for these properties don't work, so they're both disabled by default.
... nightly 33 no developer edition 33 no beta 33 no release 33 no preference name media.
track.enabled dom document property: autoplaypolicy the document property autoplaypolicy returns a string indicating how the browser handles requests to automatically play media (either using the autoplay property on a media element or by attempting to trigger playback from javascript code.
...there currently is no real plan to ship this on desktop, but you can
track the state of that just in case it changes in bug 1551302.
Index
170 storage access policy: block cookies from
trackers privacy, storage access policy,
tracking protection firefox includes a new storage access policy that blocks cookies and other site data from third-party
tracking resources.
...the new policy protects against cross-site
tracking while minimizing the site breakage associated with traditional cookie blocking.
... 171
tracking protection privacy, private browsing, blocking,
tracking starting in version 42, firefox desktop and firefox for android include built-in
tracking protection.
... in private browsing windows (tabs, in firefox for android), firefox will block content loaded from domains that
track users across sites.
Shell global objects
setpromiserejection
trackercallback() sets the callback to be invoked whenever a promise rejection is unhandled or a previously-unhandled rejection becomes handled.
...
trackedopts(fun) returns an object describing the
tracked optimizations of fun, if any.
... enable
trackallocations() start capturing the js stack at every allocation.
... disable
trackallocations() stop capturing the js stack at every allocation.
nsIJumpListBuilder
the system
tracks removed items between commits.
...to prevent repeatedly adding entires users have removed, applications are encouraged to
track removed items internally.
...applications that use recent or frequent lists should keep document use
tracking up to date by calling the shaddtorecentdocs shell api.
...applications that use recent or frequent lists should keep document use
tracking up to date by calling the shaddtorecentdocs shell api.
nsIMsgWindow
transactionmanager nsitransactionmanager this is used to
track undo/redo transactions.
... openfolder nsimsgfolder this is used to
track the folder currently open in the ui.
... rootdocshell nsidocshell this is used to
track the chrome window's nsidocshell object.
... mailcharacterset acstring this is used to
track the character set of the currently displayed message.
BaseAudioContext.decodeAudioData() - Web APIs
this is the preferred method of creating an audio source for web audio api from an audio
track.
... older callback syntax in this example, the getdata() function uses xhr to load an audio
track, setting the responsetype of the request to arraybuffer so that it returns an array buffer as its response that we then store in the audiodata variable .
... the buttons in the example simply run getdata() to load the
track and start it playing, and stop it playing, respectively.
... note: you can run the example live (or view the source.) // define variables var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var source; var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); // use xhr to load an audio
track, and // decodeaudiodata to decode it and stick it in a buffer.
HTMLMediaElement - Web APIs
htmlmediaelement.audio
tracks a audio
tracklist that lists the audio
track objects contained in the element.
... htmlmediaelement.text
tracks read only returns the list of text
track objects contained in the element.
... htmlmediaelement.video
tracks read only returns the list of video
track objects contained in the element.
... htmlmediaelement.addtext
track() adds a text
track (such as a
track for subtitles) to a media element.
ImageCapture() constructor - Web APIs
syntax const imagecapture = new imagecapture(video
track) parameters video
track a mediastream
track from which the still images will be taken.
... return value a new imagecapture object which can be used to capture still frames from the specified video
track.
... example the following example shows how to use a call to mediadevices.getusermedia() to retrieve the mediastream
track needed by the imagecapture() constructor.
... navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream const
track = mediastream.getvideo
tracks()[0]; imagecapture = new imagecapture(
track); }) .catch(error => console.log(error)); specifications specification status comment mediastream image capturethe definition of 'imagecapture' in that specification.
MediaDevices.getDisplayMedia() - Web APIs
since getdisplaymedia() requires a video
track, the returned stream will have one even if no video
track is expressly requested by the constraints object.
... return value a promise that resolves to a mediastream containing a video
track whose contents come from a user-selected screen area, as well as an optional audio
track.
... note: browser support for audio
tracks varies, both in terms of whether or not they're supported at all by the media recorder and in terms of the which audio source or sourcoes are supported.
...the stream is then returned to the caller for use, perhaps for adding to a webrtc call using rtcpeerconnection.add
track() to add the video
track from the stream.
MediaRecorder.start() - Web APIs
invalidmodificationerror the number of
tracks on the stream being recorded has changed.
... you can't add or remove
tracks while recording media.
... notsupportederror the media stream you're attempting to record is inactive, or one or more of the stream's
tracks is in a format that can't be recorded using the current configuration.
... this also happens when a mediastream
track within the stream is marked as isolated due to the peeridentity constraint on the source stream.
RTCPeerConnection.addStream() - Web APIs
instead of using this obsolete method, you should instead use add
track() once for each
track you wish to send to the remote peer.
... navigator.mediadevices.getusermedia({video:true, audio:true}, function(stream) { var pc = new rtcpeerconnection(); pc.addstream(stream); }); migrating to add
track() compatibility allowing, you should update your code to instead use the add
track() method: navigator.getusermedia({video:true, audio:true}, function(stream) { var pc = new rtcpeerconnection(); stream.get
tracks().foreach(function(
track) { pc.add
track(
track, stream); }); }); the newer add
track() api avoids confusion over whether later changes to the
track-makeup of a stream affects a ...
...you can write web compatible code using feature detection instead: // add a
track to a stream and the peer connection said stream was added to: stream.add
track(
track); if (pc.add
track) { pc.add
track(
track, stream); } else { // if you have code listening for negotiationneeded events: settimeout(() => pc.dispatchevent(new event('negotiationneeded'))); } // remove a
track from a stream and the peer connection said stream was added to: stream.remove
track(
track); if (pc.remove
track) { pc.remove
track(pc.g...
...etsenders().find(sender => sender.
track ==
track)); } else { // if you have code listening for negotiationneeded events: settimeout(() => pc.dispatchevent(new event('negotiationneeded'))); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.addstream()' in that specification.
RTCPeerConnection: addstream event - Web APIs
you should instead watch for the
track event, which is sent for each media
track added to the rtcpeerconnection.
... examples this example looks to determine if the user's browser supports the
track event.
... if it does, a
track event listener is set up; otherwise, an addstream event listener is set up.
... if (pc.add
track !== undefined) { pc.on
track = ev => { ev.streams.foreach(stream => doaddstream(stream)); } } else { pc.onaddstream = ev => { doaddstream(ev.stream); } } this calls a function doaddstream() once for each stream being added to the rtcpeerconnection, regardless of whether the browser sends addstream or
track.
RTCPeerConnection.getStats() - Web APIs
the rtcpeerconnection method getstats() returns a promise which resolves with data providing statistics about either the overall connection or about the specified mediastream
track.
... syntax promise = rtcpeerconnection.getstats(selector) parameters selector optional a mediastream
track for which to gather statistics.
... exceptions this method does not throw exceptions; instead, it rejects the returned promise with one of the following errors: invalidaccesserror there is no rtcrtpsender or rtcrtpreceiver whose
track matches the specified selector, or selector matches more than one sender or receiver.
... promise = rtcpeerconnection.getstats(selector, successcallback, failurecallback) parameters selector optional a mediastream
track for which to gather statistics.
SourceBuffer - Web APIs
sourcebuffer.audio
tracks read only a list of the audio
tracks currently contained inside the sourcebuffer.
... sourcebuffer.text
tracks read only a list of the text
tracks currently contained inside the sourcebuffer.
... sourcebuffer.
trackdefaults specifies the default values to use if kind, label, and/or language information is not available in the initialization segment of the media to be appended to the sourcebuffer.
... sourcebuffer.video
tracks read only a list of the video
tracks currently contained inside the sourcebuffer.
VTTCue - Web APIs
the vttcue interface—part of the api for handling webvtt (text
tracks on media presentations)—describes and controls the text
track associated with a particular <
track> element.
... properties this interface also inherits properties from text
trackcue.
... example html <video controls src="https://udn.realityripple.com/samples/c6/f8a3489533.webm"></video> css video { width: 320px; height: 180px; } javascript let video = document.queryselector('video'); video.addeventlistener('loadedmetadata', () => { const
track = video.addtext
track("captions", "简体中文subtitles", "zh_cn");
track.mode = "showing"; const cuecn = new vttcue(0, 2.500, '字幕会在0至2.5秒间显示');
track.addcue(cuecn); const cueen = new vttcue(2.6, 4, 'subtitles will display between 2.6 and 4 seconds');
track.addcue(cueen); }); result chrome: please open in jsfiddle to view the live sample.
... specifications specification status comment webvtt: the web video text
tracks format candidate recommendation ...
Web Audio API - Web APIs
if multiple audio
tracks are present on the stream, the
track whose id comes first lexicographically (alphabetically) is used.
... mediastream
trackaudiosourcenode a node of type mediastream
trackaudiosourcenode represents an audio source whose data comes from a mediastream
track.
... when creating the node using the createmediastream
tracksource() method to create the node, you specify which
track to use.
... mediastreamaudiodestinationnode the mediastreamaudiodestinationnode interface represents an audio destination consisting of a webrtc mediastream with a single audiomediastream
track, which can be used in a similar way to a mediastream obtained from getusermedia().
XRInputSource.gripSpace - Web APIs
the read-only xrinputsource property gripspace returns an xrspace whose native origin
tracks the pose used to render virtual objects so they appear to be held in (or part of) the user's hand.
...gripspace is null if the input source is inherently un
trackable.
... for example, only inputs whose targetraymode is
tracked-pointer provide a gripspace.
...the native origin of the grip space is located at the centroid—the center of mass—of the user's fist,
tracking the position of the user's hand.
Keyboard-navigable JavaScript widgets - Accessibility
use onfocus to
track the current focus don't assume that all focus changes will come via key and mouse events: assistive technologies such as screen readers can set the focus to any focusable element.
...
track focus using onfocus and onblur instead.
...if you want to
track the focus status, you can use the document.activeelement to get the active element.
... technique 2: aria-activedescendant this technique involves binding a single event handler to the container widget and using the aria-activedescendant to
track a "virtual" focus.
Mouse gesture events - Developer guides
non-standard this feature is non-standard and is not on a standards
track.
...these are special movements that can be made with a mouse or
trackpad and can be interpreted to perform specific tasks.
...types of gesture events mozswipegesture the mozswipegesture event is sent when the user uses three fingers to "swipe" the
trackpad.
...mozrotategesturestart the mozrotategesturestart event is sent when the user begins performing a rotate gesture, by placing two fingers on the
trackpad and rotating them around the center of the
trackpad.
Web audio codec guide - Web media technologies
pulse code modulation (pcm) of voice frequencies rtp / webrtc g.722 7 khz audio coding within 64 kbps (for telephony/voip) rtp / webrtc mp3 mpeg-1 audio layer iii mp4, adts, mpeg1, 3gp opus opus webm, mp4, ogg vorbis vorbis webm, ogg [1] when mpeg-1 audio layer iii codec data is stored in an mpeg file, and there is no video
track on the file, the file is typically referred to as an mp3 file, even though it's still an mpeg format file.
...this can be particularly important for classical music, theatrical sound
tracks, and for background music during gameplay.
...these files are mpeg-1 files that contain an audio layer iii
track.
... voice recording and playback usually needs to be low-latency in order to synchronize with video
tracks, or in order to avoid cross-talk or other problems.
The "codecs" parameter in common media types - Web media technologies
however, many media types—especially those that support video
tracks—can benefit from the ability to more precisely describe the format of the data within them.
...this information may include things like the profile of the video codec, the type used for the audio
tracks, and so forth.
... audio/ogg; codecs=vorbis an ogg file containing a vorbis audio
track.
...both video and audio
tracks can be described using the codecs parameter with the following mime types: base mime types supporting the iso bmff codecs parameter mime type description audio/3gpp 3gp audio (rfc 3839: mime type registrations for 3rd generation partnership project (3gp) multimedia files) video/3gpp 3gp video (rfc 3839: mime type registrations for 3rd generation partners...
Intercepting Page Loads - Archive of obsolete content
it means you have to keep
track of tabs being opened and closed, in order to add and remove your listener.
... here's a code sample that keeps
track of your progress listeners for all tabs: init : function() { gbrowser.browsers.foreach(function (browser) { this._toggleprogresslistener(browser.webprogress, true); }, this); gbrowser.tabcontainer.addeventlistener("tabopen", this, false); gbrowser.tabcontainer.addeventlistener("tabclose", this, false); }, uninit : function() { gbrowser.browsers.foreach(function (browser) { this ._toggleprogresslistener(browser.webprogress, false); }, this); gbrowser.tabcontainer.removeeventlistener("tabopen", this, false); gbrowser.tabcontainer.removeeventlistener("tabclose", this, false); }, handleevent : function(aevent) { let tab = aevent.target; let webprogress = gbrowser.getbrowserfortab(tab).webprogress; this._toggleprogresslistene...
...we register and unregister the progress listeners for the first tab manually, and then add tab open and close event listeners so we can keep
track of the rest of the listeners for all the tabs.
Search Extension Tutorial (Draft) - Archive of obsolete content
cu.import("resource://gre/modules/services.jsm"); // keep
track of whether this is the first run.
...cu.import("resource://gre/modules/services.jsm"); // the details of the engine to add const engine_details = { name: "example engine", iconurl: "data:image/png;base64,...", alias: "example-engine", description: "an example search engine", method: "get", // the http request method url: "https://www.example.com/?q=_searchterms_" }; // keep
track of whether this is the first run.
...const engine_url = "chrome://example-engine/content/search.xml"; // keep
track of whether this is the first run.
Tree View Details - Archive of obsolete content
this is a fairly tricky process as it involves keeping
track of which items have children and also which rows are open and closed.
...the view is required to keep
track of this.
...remember that a custom view must keep
track of which items are visible itself.
Introduction to Public-Key Cryptography - Archive of obsolete content
with this arrangement, the user must supply a new password for each server, and the administrator must keep
track of the name and password for each user, typically on separate servers.
...users have difficulty keeping
track of different passwords, tend to choose poor ones, and tend to write them down in obvious places.
... administrators must keep
track of a separate password database on each server and deal with potential security problems related to the fact that passwords are sent over the network routinely and frequently.
Anatomy of a video game - Game development
* * mygame.lastrender keeps
track of the last provided requestanimationframe timestamp.
... * mygame.lasttick keeps
track of the last update time.
... // note: as we mention in summary, you should keep
track of how large numticks is.
Grid - MDN Web Docs Glossary: Definitions of Web-related terms
if you place content outside of this explicit grid, or if you are relying on auto-placement and the grid algorithm needs to create additional row or column
tracks to hold grid items, then extra
tracks will be created in the implicit grid.
... the implicit grid is the grid created automatically due to content being added outside of the
tracks defined.
...the third row on the grid is an implicit grid row
track, formed due to their being more than the six items which fill the explicit
tracks.
Responsive design - Learn web development
css grid in css grid layout the fr unit allows the distribution of available space across grid
tracks.
... the next example creates a grid container with three
tracks sized at 1fr.
... this will create three column
tracks, each taking one part of the available space in the container.
Framework main features - Learn web development
this component should be responsible for
tracking its own count state, and could be written like this: function counterbutton() { const [count] = usestate(0); return ( <button>clicked {count} times</button> ); } usestate() is a react hook which, given an initial data value, will keep
track of that value as it is updated.
... the code will be initially rendered like so in the browser: <button>clicked 0 times</button> the usestate() call keeps
track of the count value in a robust way across the app, without you needing to write code to do that yourself.
...all of them
track the current rendered version of your browser's dom, and each makes slightly different decisions about how the dom should change as components in your application re-render.
Componentizing our React app - Learn web development
in order to
track the names of tasks we want to complete, we should ensure that each <todo /> component renders a unique name.
... unique keys now that react is rendering our tasks out of an array, it has to keep
track of which one is which in order to render them properly.
... react tries to do its own guesswork to keep
track of things, but we can help it out by passing a key prop to our <todo /> components.
Componentizing our Svelte app - Learn web development
however, when your application grows larger and more complex it can easily get difficult to keep
track of all your bound values.
... handling the events we'll need one variable to
track whether we are in editing mode and another to store the name of the task being updated.
... add the following variable definitions at the bottom of the <script> section of the todo component: let editing = false //
track editing mode let name = todo.name // hold the name of the todo being edited we have to decide what events our todo component will emit: we could emit different events for the status toggle and editing of the name.
Application Translation with Mercurial
progress
tracking tool to
track which strings and files already have been translated and later also to see which new strings have already been tested in the product as being a good translation for the functionality behind the translated strings and that the translated texts fit into the available, the translation progress should be
tracked.
...
tracking the translation progress if you translate more than a few strings, you usually want to keep
track of what has already been translated (and later if the text has been tested in the product as fitting into the available area and suiting the functionality it describes).
... start
tracking changes you make against the localization repository by telling it that with the qnew subcommand to save these changes as patch in a mercurial queue.
What every Mozilla translator should know
l10n stands for localization = l + another 10 letters + n mailing lists and other resources there are several mailing lists to keep the
track of what's going on, which are available as newsgroups, as well, both on news.mozilla.org and google groups: the main l10n list also available as mozilla.dev.l10n, .l10n in short.
... to keep the
track of what's going on, it's also a good idea to read the planet mozilla l10n when you have a problem use the above mailing lists the person in charge of the mozilla l10n is axel hecht (l10n at mozilla.com), pike on irc another interesting way of getting help is the irc channel #l10n at irc.mozilla.org useful tools the l10n dashboard pontoon narro translate toolkit koala 0.1 mozillatr...
... bugzilla, the bug-
tracking system you do need an account in bugzilla you should configure the account to watch the following addresses: firefoxl10n@hotmail.com calendar-l10n@mozilla.bugs (specific for calendar related bugs) this way you will receive mail for bugs affecting many or even all locales.
Are We Slim Yet
the are we slim yet project (commonly known as awsy) for several years
tracked memory usage across builds on the (now defunct) website areweslimyet.com.
...the results are posted to perfherder where we can
track regressions automatically.
... as new processes are added to firefox we want to make sure their memory usage is also
tracked by awsy.
DMD
in this mode, dmd
tracks the contents of the heap, including which heap blocks have been reported by memory reporters.
...in this mode, dmd
tracks the current contents of the heap.
...in this mode, dmd
tracks both the past and current contents of the heap.
AsyncTestUtils extended framework
this class not only holds references to the syntheticmessage instances, but it also
tracks what folders they were injected into as well as what folders you move them to.
...keep in mind that the class is not magic and will lose
track of the message headers if you manipulate them without referencing the message set.
... messagemodifier.js: slightly misnamed, this provides the syntheticmessageset abstraction that is a set abstraction for syntheticmessages that also
tracks what folders they got injected into and provides code to directly manipulate or aid other code that wants to directly manipulate them.
Web Replay
this is done in code associated with the non-deterministic components, such as during gc or ion compilation, to help
track down behaviors that should go unrecorded.
... keeping
track of the exact point where an interrupt occurred would require quite a bit of recording overhead, and it doesn't seem worth it to try to do this.
... recording and replaying executions using these buffers will require new techniques like treating all accesses on the buffers as atomic (probably unacceptable overhead) or performing all accesses on the buffer on a single core and keeping
track of context switches.
Component Internals
xpcom registry manifests xpcom uses special files called manifests to
track and persist information about the components to the local system.
... there are two types of manifests that xpcom uses to
track components: component manifests when xpcom first starts up, it looks for the component manifest, which is a file that lists all registered components, and stores details on exactly what each component can do.
... the smart pointer class, nscomptr, for example, which makes reference counting less tedious and error-prone, is not actually frozen, and neither is nsdebug, a class for aiding in
tracking down bugs, nor is nsmemory, a class to ensure that everyone uses the same heap, generic factory, and module.
nsIDocShell
layouthistorystate nsilayouthistorystate loadedtransindex long keeps
track of the previous shtransaction index and the current shtransaction index at the time that the doc shell begins to load.
... previoustransindex long keeps
track of the previous shtransaction index and the current shtransaction index at the time that the doc shell begins to load.
... restoringdocument boolean
track whether we're currently restoring a document presentation.
Migrating from Firebug - Firefox Developer Tools
it is currently missing the preview for html, xml and svg, though, which is
tracked in bug 1247392 and bug 1262796, but when you click on the url of the request you switch to the network monitor, which has a preview tab.
...only the live preview of changes is currently missing, which is
tracked in bug 1067318 and bug 815464.
...a few property values are not auto-completed yet, which is
tracked in bug 1337918.
Examine and edit CSS - Firefox Developer Tools
click that icon to display the grid overlaid on the page, including grid lines and
tracks.
...ts the rule view displays the following pseudo-elements, if they are applied to the selected element: ::after ::backdrop ::before ::first-letter ::first-line ::selection :-moz-color-swatch :-moz-number-spin-box :-moz-number-spin-down :-moz-number-spin-up :-moz-number-text :-moz-number-wrapper :-moz-placeholder :-moz-progress-bar :-moz-range-progress :-moz-range-thumb :-moz-range-
track :-moz-selection if the selected element has pseudo-elements applied to it, they are displayed before the selected element but hidden by a disclosure triangle: clicking the triangle displays them: viewing common pseudo-classes there's a button to the right of the filter box: click the button to see checkboxes that you can use to enable the :hover, :active and :focus, :focus-within and ...
...
track changes when you are editing the rules in the rules view, you can see the changes you have made in the changes pane.
CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
clicking the icon toggles the display of a grid overlay on the page, which appears over the element, laid out like a grid to show the position of its grid lines and
tracks: the overlay is still shown when you select other elements, so you can edit related css properties and see how the grid is affected.
... extend lines infinitely: by default, grid lines/
tracks are only shown inside the element with display: grid set on it; when toggling this option on, the grid lines extend to the edge of the viewport along each axis.
... extend lines infinitely by default, the grid lines/
tracks are only shown inside the element with display: grid set on it.
Background Tasks API - Web APIs
currenttasknumber is used to
track how many tasks have been processed so far.
... statusrefreshscheduled is used to
track whether or not we've already scheduled an update of the status display box for the upcoming frame, so that we only do it once per frame the shim to function even if idle callbacks aren't supported.
... we increment currenttasknumber to
track how many tasks we've executed.
CacheStorage - Web APIs
use cachestorage.match() to check if a given request is a key in any of the cache objects that the cachestorage object
tracks.
... methods cachestorage.match() checks if a given request is a key in any of the cache objects that the cachestorage object
tracks, and returns a promise that resolves to that match.
... cachestorage.keys() returns a promise that will resolve with an array containing strings corresponding to all of the named cache objects
tracked by the cachestorage.
Force Touch events - Web APIs
non-standard this feature is non-standard and is not on a standards
track.
... force touch events are a proprietary, apple-specific feature which makes possible (where supported by the input hardware) new interactions based on how hard the user clicks or presses down on the touchscreen or
trackpad.
... event properties the following property is known to be available on the webkitmouseforcewillbegin, mousedown, webkitmouseforcechanged, webkitmouseforcedown, webkitmouseforceup, mousemove, and mouseup event objects: mouseevent.webkitforce read only the amount of pressure currently being applied to the
trackpad/touchscreen constants these constants are useful for determining the relative intensity of the pressure indicated by mouseevent.webkitforce: mouseevent.webkit_force_at_mouse_down read only minimum force necessary for a normal click mouseevent.webkit_force_at_force_mouse_down read only minimum force necessary for a force click specifications not part of any specification.
HTMLCanvasElement.captureStream() - Web APIs
the htmlcanvaselement capturestream() method returns a mediastream which includes a canvascapturemediastream
track containing a real-time video capture of the canvas's contents.
...if not set, a new frame will be captured each time the canvas changes; if set to 0, frames will not be captured automatically; instead, they will only be captured when the returned
track's requestframe() method is called.
... return value a reference to a mediastream object, which has a single canvascapturemediastream
track in it.
Using IndexedDB - Web APIs
if you're doing lots of database operations, then
tracking the transaction rather than individual requests can certainly aid your sanity.
...as a workaround for this normal shutdown notification, you might
track your transactions and add a beforeunload event to warn the user if any transactions have not yet completed at the time of unloading.
...); compat.empty(); compat.append('<ul id="compat-list"></ul>'); compat_envs.foreach(function(val, idx, array) { $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>'); }); const db_name = 'mdn-demo-indexeddb-epublications'; const db_version = 1; // use a long long for this value (don't use a float) const db_store_name = 'publications'; var db; // used to keep
track of which view is displayed to avoid uselessly reloading it var current_view_pub_key; function opendb() { console.log("opendb ..."); var req = indexeddb.open(db_name, db_version); req.onsuccess = function (evt) { // equal to: db = req.result; db = this.result; console.log("opendb done"); }; req.onerror = function (evt) { console.error("opendb:", evt...
KeyboardEvent: code values - Web APIs
"" 0x007d "intlyen" "intlyen" 0x007e "numpadcomma" "" 0x007f "unidentified" "" 0xe000 ~ 0xe007 "unidentified" "" 0xe008 "unidentified" "undo" 0xe009 "unidentified" "" 0xe00a "" "paste" 0xe00b ~ 0xe00f "" "" 0xe010 "media
trackprevious" "media
trackprevious" 0xe011 ~ 0xe016 "" "" 0xe017 "unidentified" "cut" 0xe018 "unidentified" "copy" 0xe019 "media
tracknext" "media
tracknext" 0xe01a, 0xe01b "unidentified" "" 0xe01c "numpadenter" "numpadenter" 0xe01d "controlright" "controlright" ...
...�� 0x00a2 "unidentified" "" 0x00a3 "launchmail" "" 0x00a4 "browserfavorites" "" 0x00a5 "unidentified" "" 0x00a6 "browserback" "browserback" 0x00a7 "browserforward" "browserforward" 0x00a8 "unidentified" "" 0x00a9 "eject" "" 0x00aa "unidentified" "" 0x00ab "media
tracknext" "" 0x00ac "mediaplaypause" "" 0x00ad "media
trackprevious" "" 0x00ae "mediastop" "" 0x00af ~ 0x00b2 "unidentified" "" 0x00b3 "launchmediaplayer" "" 0x00b4 "browserhome" "" 0x00b5 "browserrefresh" "browserrefresh" 0x00b6 ~ 0x00ba "unidentified" "" 0x00bb ...
... 0x008f "wakeup" 0x0090 "launchapp1" 0x0091 ~ 0x009b "unidentified" 0x009c "browserfavorites" 0x009d "unidentified" 0x009e "browserback" 0x009f "browserforward" 0x00a0 "unidentified" 0x00a1 "eject" 0x00a2 "unidentified" 0x00a3 "media
tracknext" 0x00a4 "mediaplaypause" 0x00a5 "media
trackprevious" 0x00a6 "mediastop" 0x00a7 ~ 0x00ac "unidentified" 0x00ad "browserrefresh" 0x00ae ~ 0x00b6 "unidentified" 0x00b7 "f13" 0x00b8 "f14" 0x00b9 "f15" 0x00ba "f16" 0x00bb "f17" 0x00bc "f18" ...
MediaDevices - Web APIs
getsupportedconstraints() returns an object conforming to media
tracksupportedconstraints indicating which constrainable properties are supported on the mediastream
track interface.
... getusermedia() with the user's permission through a prompt, turns on a camera and/or a microphone on the system and provides a mediastream containing a video
track and/or an audio
track with the input.
...var video = document.queryselector('video'); var constraints = window.constraints = { audio: false, video: true }; var errorelement = document.queryselector('#errormsg'); navigator.mediadevices.getusermedia(constraints) .then(function(stream) { var video
tracks = stream.getvideo
tracks(); console.log('got stream with constraints:', constraints); console.log('using video device: ' + video
tracks[0].label); stream.onremove
track = function() { console.log('stream ended'); }; window.stream = stream; // make variable available to browser console video.srcobject = stream; }) .catch(function(error) { if (error.name === 'constraintnotsatisfiederror') { errormsg('the resol...
MediaSession.setActionHandler() - Web APIs
it will be one of play, pause, seekbackward, seekforward, seekto, skipad,previous
track, or next
track.
...the following strings identify the currently available types of media session action: next
track advances playback to the next
track.
... previous
track moves back to the previous
track.
Media Session action types - Web APIs
to support an action on a media session, such as seeking, pausing, or changing
tracks, you need to call the mediasession interface's setactionhandler() method to establish a handler for that action.
...the following strings identify the currently available types of media session action: next
track advances playback to the next
track.
... previous
track moves back to the previous
track.
Using Pointer Events - Web APIs
this may be a
trackpad, a touch screen, or even a virtual mapping of a user's desk surface (or mousepad) with the physical screen.
...
tracking new touches we'll keep
track of the touches in-progress.
...the result is that we stop
tracking that touch point.
RTCConfiguration - Web APIs
if the remote endpoint is bundle-aware, all media
tracks and data channels are bundled onto a single transport at the completion of negotiation, regardless of policy used, and any superfluous transports that were created initially are closed at that point.
... "max-compat" the ice agent initially creates one rtcdtlstransport per media
track and a separate one for data channels.
...if the remote endpoint is not bundle-aware, then only a single
track will be negotiated and the rest ignored.
RTCPeerConnection.addTransceiver() - Web APIs
syntax rtptransceiver = rtcpeerconnection.addtransceiver(
trackorkind, init); parameters
trackorkind a mediastream
track to associate with the transceiver, or a domstring which is used as the kind of the receiver's
track, and by extension of the rtcrtpreceiver itself.
... streams optional a list of mediastream objects to add to the transceiver'srtcrtpreceiver; when the remote peer's rtcpeerconnection's
track event occurs, these are the streams that will be specified by that event.
... exceptions typeerror a string was specified as
trackorkind which is not valid.
RTCRtpEncodingParameters.maxBitrate - Web APIs
the rtcrtpencodingparameters dictionary's maxbitrate property specifies the maximum number of bits per second to allow a
track encoded with this encoding to use.
... syntax rtpencodingparameters.maxbitrate = maxbitspersecond; rtpencodingparameters = { maxbitrate: maxbitspersecond }; maxbitspersecond = rtpencodingparameters.maxbitrate; value an unsigned long integer value specifying the maximum bandwidth this encoding is permitted to use for a
track of media it encodes in terms of bits per second.
... other parameters may further reduce the bandwidth used by the
track; for example, maxframerate will, if set low enough, constrain the bandwidth as well.
RTCRtpReceiver - Web APIs
the rtcrtpreceiver interface of the webrtc api manages the reception and decoding of data for a mediastream
track on an rtcpeerconnection.
... properties rtcrtpreceiver.
track read only returns the mediastream
track associated with the current rtcrtpreceiver instance.
... rtcrtpreceiver.transport read only returns the rtcdtlstransport instance over which the media for the receiver's
track is received.
RTCRtpSendParameters.encodings - Web APIs
the rtcrtpsendparameters dictionary's encodings property is an rtcrtpencodingparameters object providing configuration settings for the encoder being used for the rtcrtpsender's
track.
... syntax sendparameters.encodings = encodingparameterlist; encodingparameterlist = sendparameters.encodings; value an array of objects conforming to the rtcrtpencodingparameters dictionary, each of which contains properties which provide settings and parameters that describe and configure a single codec that could be used to encode the
track.
... scaleresolutiondownby only used for senders whose
track's kind is video, this is a double-precision floating-point value specifying a factor by which to scale down the video during encoding.
Streams API concepts - Web APIs
an internal queue keeps
track of the chunks that have not yet been read (see the internal queues and queuing strategies section below).
... an internal queue keeps
track of the chunks that have been written to the stream but not yet been processed by the underlying sink.
... internal queues and queuing strategies as mentioned earlier, the chunks in a stream that have not yet been processed and finished with are kept
track of by an internal queue.
VTTCue() - Web APIs
syntax vttcue = new vttcue(starttime, endtime, text); parameters starttime this is a double representing the initial text
track cue start time.
... endtime this is a double representing the ending time for this text
track cue.
...var cue = new vttcue(2, 3, 'cool text to be displayed'); specifications specification status comment webvtt: the web video text
tracks formatthe definition of 'vttcue()' in that specification.
Rendering and the WebXR frame animation callback - Web APIs
the xrframe doesn't directly keep
track of the positions or orientations of the objects in your world.
...these input sources may include devices such as hand controllers, optical
tracking systems, acclerometers and magnetometers, and other devices of that nature.
... the third and final type of input is the traditional non-xr input device such as keyboards, mice,
trackpads, touch screens, and non-xr gamepads and joysticks.
Starting up and shutting down a WebXR session - Web APIs
first among these is that use of immersive-vr mode—which entirely replaces the user's view of the world—requires that the xr-spatial-
tracking feature policy be in place.
... detecting reference space resets occasionally, discontinuities or jumps in the native origin may occur while
tracking the user's position in the world.
... the most common scenarios in which this happens are when the user requests a recalibration of their xr device or when a hiccup or glitch occurs in the flow of
tracking data received from the xr hardware.
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
throttling of
tracking timeout scripts since firefox 55,
tracking scripts (e.g.
... google analytics, any script url that firefox recognises as a
tracking script through its tp lists) have been subject to further throttling.
... the prefs that control this behaviour are: dom.min_
tracking_timeout_value: 4 dom.min_
tracking_background_timeout_value: 10000 dom.timeout.
tracking_throttling_delay: 30000 late timeouts in addition to "clamping", the timeout can also fire later when the page (or the os/browser itself) is busy with other tasks.
XRPose.emulatedPosition - Web APIs
usage notes there are two basic categories of xr
tracking systems.
... a basic xr headset provides three degrees of freedom (3dof),
tracking the pitch, yaw, and roll of the user's head.
... 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.
XRSession: select event - Web APIs
examples of comon kinds of primary action are users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video
tracking system or handheld controller with an accelerometer.
...the handler fetches the pose representing the target ray for
tracked-pointer inputs and sends the pose's transform to a function called myhandleselectwithray().
... xrsession.addeventlistener("select", event => { if (event.inputsource.targetraymode == "
tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.transform); } } }); you can of course also set up a handler for select events by setting the xrsession object's onselect event handler property to a function that handles the event: xrsession.onselect = event => { if (event.inputsource.targetraymode == "
tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.transform); } } }; specif...
Perceivable - Accessibility
see text alternatives for static caption options, and audio transcripts, video text
tracks, and other multimedia content for other alternatives.
... see video text
tracks for html5 video captions, and other multimedia content for other technologies.
... understanding non-text contrast 1.4.12 text spacing (aa) added in 2.1 no loss of content or functionality occurs when the following styles are applied: line height (line spacing) to at least 1.5 times the font size spacing following paragraphs to at least 2 times the font size letter spacing (
tracking) to at least 0.12 times the font size word spacing to at least 0.16 times the font size understanding text spacing 1.4.13 content on hover or focus (aa) added in 2.1 while additional content may appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met: dismissable (can be ...
::-webkit-scrollbar - CSS: Cascading Style Sheets
::-webkit-scrollbar-
track — the
track (progress bar) of the scrollbar.
... ::-webkit-scrollbar-
track-piece — the part of the
track (progress bar) not covered by the handle.
..., .mostly-customized-scrollbar { display: block; width: 10em; overflow: auto; height: 2em; } .invisible-scrollbar::-webkit-scrollbar { display: none; } /* demonstrate a "mostly customized" scrollbar * (won't be visible otherwise if width/height is specified) */ .mostly-customized-scrollbar::-webkit-scrollbar { width: 5px; height: 8px; background-color: #aaa; /* or add it to the
track */ } /* add a thumb */ .mostly-customized-scrollbar::-webkit-scrollbar-thumb { background: #000; } <div class="visible-scrollbar"> etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
Border-radius generator - CSS: Cascading Style Sheets
= 0; i < size; i++) new checkbox(elem[i]); } return { init : init, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe } })(); window.addeventlistener("load", function() { borderradius.init(); }); var borderradius = (function borderradius() { function getelembyid(id) { return document.getelementbyid(id); } /** * shadow dragging */ var previewmouse
tracking = (function drag() { var active = false; var lastx = 0; var lasty = 0; var subscribers = []; var init = function init(id) { var elem = getelembyid(id); elem.addeventlistener('mousedown', dragstart, false); document.addeventlistener('mouseup', dragend, false); } var dragstart = function dragstart(e) { if (e.button !== 0) return; active = true; lastx = e.cl...
...e handle-top-left' if (x === 'right' && y == 'top') handle.classname = 'handle handle-top-right'; if (x === 'right' && y == 'bottom') handle.classname = 'handle handle-bottom-right'; if (x === 'left' && y == 'bottom') handle.classname = 'handle handle-bottom-left'; handle.addeventlistener("mousedown", function(e) { active = true; this.radius.style.display = 'block'; previewmouse
tracking.subscribe(this.updatecontainer.bind(this)); }.bind(this)); document.addeventlistener("mouseup", function(e) { this.radius.style.display = 'none'; if (active === true) previewmouse
tracking.unsubscribe(this.updatecontainer.bind(this)); }.bind(this)); inputslidermanager.subscribe(this.topic + '-w', this.setwidth.bind(this)); inputslidermanager.subscribe(this.topic + '-h', th...
... updateuiwidth); inputslidermanager.subscribe("height", updateuiheight); inputslidermanager.setvalue("width", subject.clientwidth); inputslidermanager.setvalue("height", subject.clientheight); } return { init : init, updateoutput : updateoutput } })(); /** * init tool */ var init = function init() { buttonmanager.init(); inputslidermanager.init(); previewmouse
tracking.init("preview"); tool.init(); } return { init : init } })(); ...
Box alignment in grid layout - CSS: Cascading Style Sheets
basic example in this example using grid layout, there is extra space in the grid container after laying out the fixed width
tracks on the inline (main) axis.
... content alignment justify-content align-content place-content these properties deal with aligning the
tracks of the grid when there is extra space to distribute.
... this scenario will occur if the
tracks that you have defined total less than the total width of the grid container.
Color picker tool - CSS: Cascading Style Sheets
= 'hsl' + a + hsl + v + ')'; return value; }; color.prototype.getcolor = function getcolor() { if (this.a | 0 === 1) return this.gethexa(); return this.getrgba(); }; /*=======================================================================*/ /*=======================================================================*/ /*========== capture mouse movement ==========*/ var setmouse
tracking = function setmouse
tracking(elem, callback) { elem.addeventlistener('mousedown', function(e) { callback(e); document.addeventlistener('mousemove', callback); }); document.addeventlistener('mouseup', function(e) { document.removeeventlistener('mousemove', callback); }); }; /*====================*/ // color picker class /*====================*/ function colorpicker(node)...
...ting the color-picker /*************************************************************************/ colorpicker.prototype.createpickingarea = function createpickingarea() { var area = document.createelement('div'); var picker = document.createelement('div'); area.classname = 'picking-area'; picker.classname = 'picker'; this.picking_area = area; this.color_picker = picker; setmouse
tracking(area, this.updatecolor.bind(this)); area.appendchild(picker); this.node.appendchild(area); }; colorpicker.prototype.createhuearea = function createhuearea() { var area = document.createelement('div'); var picker = document.createelement('div'); area.classname = 'hue'; picker.classname ='slider-picker'; this.hue_area = area; this.hue_picker = picker; setmouse
tracking(are...
...; colorpicker.prototype.createalphaarea = function createalphaarea() { var area = document.createelement('div'); var mask = document.createelement('div'); var picker = document.createelement('div'); area.classname = 'alpha'; mask.classname = 'alpha-mask'; picker.classname = 'slider-picker'; this.alpha_area = area; this.alpha_mask = mask; this.alpha_picker = picker; setmouse
tracking(area, this.updatealphaslider.bind(this)); area.appendchild(mask); mask.appendchild(picker); this.node.appendchild(area); }; colorpicker.prototype.createpreviewbox = function createpreviewbox(e) { var preview_box = document.createelement('div'); var preview_color = document.createelement('div'); preview_box.classname = 'preview'; preview_color.classname = 'preview-color'; ...
Microsoft CSS extensions - CSS: Cascading Style Sheets
microsoft-only properties (avoid using on websites) note: these properties will only work in microsoft applications, and are not on a standards
track.
... -ms-flow-from -ms-flow-into -ms-high-contrast-adjust -ms-hyphenate-limit-chars -ms-hyphenate-limit-lines -ms-hyphenate-limit-zone -ms-ime-align -ms-overflow-style -ms-scrollbar-3dlight-color -ms-scrollbar-arrow-color -ms-scrollbar-base-color -ms-scrollbar-darkshadow-color -ms-scrollbar-face-color -ms-scrollbar-highlight-color -ms-scrollbar-shadow-color -ms-scrollbar-
track-color -ms-scroll-chaining -ms-scroll-limit -ms-scroll-limit-x-max -ms-scroll-limit-x-min -ms-scroll-limit-y-max -ms-scroll-limit-y-min -ms-scroll-rails -ms-scroll-snap-points-x -ms-scroll-snap-points-y -ms-scroll-snap-x -ms-scroll-snap-y -ms-scroll-translation -ms-text-autospace -ms-touch-select -ms-wrap-flow -ms-wrap-margin -ms-wrap-through zoom pseudo-elements ::-ms-b...
...rowse ::-ms-check ::-ms-clear ::-ms-expand ::-ms-fill ::-ms-fill-lower ::-ms-fill-upper ::-ms-reveal ::-ms-thumb ::-ms-ticks-after ::-ms-ticks-before ::-ms-tooltip ::-ms-
track ::-ms-value media features -ms-high-contrast css-related dom apis mscontentzoomfactor msgetpropertyenabled msgetregioncontent msrangecollection msregionoverflow ...
Mozilla CSS extensions - CSS: Cascading Style Sheets
mozilla-only properties and pseudo-classes (avoid using on websites) note: these properties and pseudo-classes will only work in mozilla applications such as firefox, and are not on a standards
track.
...-moz-window-titlebar -moz-window-titlebar-maximized progressbar progresschunk radio radio-container radio-label radiomenuitem resizer resizerpanel scale-horizontal scalethumb-horizontal scalethumb-vertical scale-vertical scrollbarbutton-down scrollbarbutton-left scrollbarbutton-right scrollbarbutton-up scrollbar-small scrollbarthumb-horizontal scrollbarthumb-vertical scrollbar
track-horizontal scrollbar
track-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusbar statusbarpanel tab tabpanels tab-scroll-arrow-back tab-scroll-arrow-forward textfield textfield-multiline toolbar toolbarbutton-dropdown toolbox tooltip treeheadercell treeheadersortarrow treeitem treetwisty treetwistyopen treeview window background-imag...
...ale-dir(ltr) :-moz-locale-dir(rtl) :-moz-lwtheme :-moz-lwtheme-brighttext :-moz-lwtheme-darktext n – r :-moz-native-anonymous :-moz-only-whitespace ::-moz-page ::-moz-page-sequence ::-moz-pagebreak ::-moz-pagecontent :-moz-placeholderobsolete since gecko 51 ::-moz-placeholderdeprecated since gecko 51 ::-moz-progress-bar ::-moz-range-progress ::-moz-range-thumb ::-moz-range-
track :-moz-read-only :-moz-read-write s ::-moz-scrolled-canvas ::-moz-scrolled-content ::-moz-scrolled-page-sequence ::-moz-selectiondeprecated since gecko 62 :-moz-submit-invalid :-moz-suppressed ::-moz-svg-foreign-content t ::-moz-table ::-moz-table-cell ::-moz-table-column ::-moz-table-column-group ::-moz-table-outer ::-moz-table-row ::-moz-table-row-group :-moz-tree-ce...
fit-content() - CSS: Cascading Style Sheets
the function can be used as a
track size in css grid properties, where the maximum size is defined by max-content and the minimum size by auto, which is calculated similar to auto (i.e., minmax(auto, max-content)), except that the
track size is clamped at argument if it is greater than the auto minimum.
... in grid properties it is relative to the inline size of the grid container in column
tracks and to the block size of the grid container for row
tracks.
... candidate recommendation defines the function when used as a
track size.
Audio and Video Delivery - Developer guides
for further info see cross browser audio basics (html5 audio in detail) html video <video controls width="640" height="480" poster="initialimage.png" autoplay muted> <source src="videofile.mp4" type="video/mp4"> <!-- fallback for browsers that don't support mp4 --> <source src="videofile.webm" type="video/webm"> <!-- specifying subtitle files --> <
track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="english"> <
track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="norwegian"> <!-- fallback for browsers that don't support video tag --> <a href="videofile.mp4">download video</a> </video> the code above creates a video player of dimensions 640x480 pixels, displaying a poster image until the video is played.
...other functionality such as the
track element for subtitles can also be provided through media libraries.
... advanced tutorials adding captions and subtitles to html5 video this article explains how to add captions and subtitles to html5 <video>, using web_video_text_
tracks_format and the <
track> element.
Touch events (Mozilla experimental) - Developer guides
this api allowed you to
track the movement of the user's finger on a touch screen, monitoring the raw touch events generated by the system.
... although touch events were based on — and work similarly to — mouse events, each event included an identifier that allowed you to
track multiple fingers moving on the screen at the same time.
...this lets you
track each finger's movements on the touch screen independently.
Index - Developer guides
7 adding captions and subtitles to html5 video html5, media, webvtt, captions, subtitles,
track in other articles we looked at how to build a cross browser video player using the htmlmediaelement and window.fullscreen apis, and also at how to style the player.
... this article will take the same player and show how to add captions and subtitles to it, using the webvtt format and the <
track> element.
...these are special movements that can be made with a mouse or
trackpad and can be interpreted to perform specific tasks.
itemprop - HTML: Hypertext Markup Language
property values are either a string or a url and can be associated with a very wide range of elements including <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source> , <
track>, and <video>.
... if the element is a meta element the value is the value of the element's content attribute if the element is an audio, embed, iframe, img, source,
track, or video element the value is the resulting url string that results from parsing the value of the element's src attribute relative to the node document (part of the microdata dom api) of the element at the time the attribute is set if the element is an a, area, or link element the value is the resulting url string that results from parsing the value of the element's href attrib...
...the url property elements are the a, area, audio, embed, iframe, img, link, object, source,
track, and video elements.
HTML documentation index - HTML: Hypertext Markup Language
property values are either a string or a url and can be associated with a very wide range of elements including <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source> , <
track>, and <video>.
... 213 <
track>: the embed text
track element accessibility, cues, element, html, html embedded content, html5, multimedia, reference, text
track, web, a11y,
track the html <
track> element is used as a child of the media elements, <audio> and <video>.
... it lets you specify timed text
tracks (or time-based data), for example to automatically handle subtitles.
Index - HTTP
56 dnt dnt, http, reference, header the dnt (do not
track) request header indicates the user's
tracking preference.
... 106 tk dnt, http, reference, response, header,
tracking the tk response header indicates the
tracking status that applied to the corresponding request.
...it is used for
tracking message forwards, avoiding request loops, and identifying the protocol capabilities of senders along the request/response chain.
HTTP headers - HTTP
do not
track dnt expresses the user's
tracking preference.
... tk indicates the
tracking status of the corresponding response.
...it is a structured header whose value is a token with possible values audio, audioworklet, document, embed, empty, font, image, manifest, object, paintworklet, report, script, serviceworker, sharedworker, style,
track, video, worker, xslt, and nested-document.
HTTP resources and specifications - HTTP
cookies from non-secure origins ietf draft rfc 2145 use and interpretation of http version numbers informational rfc 6585 additional http status codes proposed standard rfc 7538 the hypertext transfer protocol status code 308 (permanent redirect) proposed standard rfc 7725 an http status code to report legal obstacles on the standard
track rfc 2397 the "data" url scheme proposed standard rfc 3986 uniform resource identifier (uri): generic syntax internet standard rfc 5988 web linking defines the link header proposed standard experimental spec hypertext transfer protocol (http) keep-alive header informational (expired) draft spec http client hints ietf dr...
... proposed standard rfc 2817 upgrading to tls within http/1.1 proposed standard rfc 7540 hypertext transfer protocol version 2 (http/2) proposed standard rfc 7541 hpack: header compression for http/2 on the standard
track rfc 7838 http alternative services on the standard
track rfc 7301 transport layer security (tls) application-layer protocol negotiation extension used to negotiate http/2 at the transport to save an extra request/response round trip.
... proposed standard rfc 2324 hyper text coffee pot control protocol (htcpcp/1.0) april 1st joke spec rfc 7168 the hyper text coffee pot control protocol for tea efflux appliances (htcpcp-tea) april 1st joke spec html living standard html defines extensions of http for server-sent events living standard
tracking preference expression dnt header editor's draft / candidate recommendation reporting api report-to header draft draft spec expect-ct extension for http ietf draft ...
Keyed collections - JavaScript
you can get the size of a map easily, while you have to manually keep
track of size for an object.
...you don't have to manually keep
track of duplicates.
...they will not leak memory, so it can be safe to use dom elements as a key and mark them for
tracking purposes, for example.
tabs - Archive of obsolete content
usage open a tab you can open a new tab, specifying various properties including location: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com");
track tabs you can register event listeners to be notified when tabs open, close, finish loading dom content, or are made active or inactive: var tabs = require("sdk/tabs"); // listen for tab openings.
... console.log(tab.title); you can also access individual tabs by index: var tabs = require('sdk/tabs'); tabs.on('ready', function () { console.log('first: ' + tabs[0].title); console.log('last: ' + tabs[tabs.length-1].title); }); you can access the currently active tab: var tabs = require('sdk/tabs'); tabs.on('activate', function () { console.log('active: ' + tabs.activetab.url); });
track a single tab given a tab, you can register event listeners to be notified when the tab is closed, activated or deactivated, or when the page hosted by the tab is loaded or retrieved from the "back-forward cache": var tabs = require("sdk/tabs"); function onopen(tab) { console.log(tab.url + " is open"); tab.on("pageshow", logshow); tab.on("activate", logactivate); tab.on("deactivate", lo...
Creating annotations - Archive of obsolete content
you should see the highlight appearing when you move the mouse over certain elements: click on the highlight and you should see something like this in the console output: info: show info: http://blog.mozilla.com/addons/2011/02/04/overview-amo-review-process/, post-2249,when you submit a new add-on, you will have to choose between 2 review
tracks: full review and preliminary review.
...you should see a panel with a text area for a note: enter the note and press the return key: you should see console output like this: info: http://blog.mozilla.com/addons/2011/02/04/overview-amo-review-process/, post-2249,when you submit a new add-on, you will have to choose between 2 review
tracks: full review and preliminary review.
Examples and demos from articles - Archive of obsolete content
in such a condition is difficult and unnatural to keep
track of all events started and then to stop them when appropriate through the cleartimeout() function.
...in such a condition is difficult and unnatural to keep
track of all events started and then to stop them when appropriate through the cleartimeout() function.
MMgc - Archive of obsolete content
classic reference counting previous versions of the flash player, up to flash player 7, used reference counting to
track object lifetimes.
...reference counting can
track relationships between objects, and as long as addref and release are called at the proper times, can reclaim memory from objects that are no longer referenced.
Bookmark Keywords - Archive of obsolete content
searches, lookups, package
tracking, and even word definitions can all be retrieved from user-customized bookmarks.
... bookmark suggested keywords find bugzilla entry bug, bugzilla, bz search devmo devmo, de google search google, gg dictionary search dictionary, dict, define, word thesaurus search thesaurus, like fedex
tracking fedex ups
tracking ups of course, these are just a beginning.
In-Depth - Archive of obsolete content
other sites which list mozilla specific css properties xulplanet.com [dead link, 26.03.13] mozilla-prefixed properties on the standard
track 26.03.13 -moz-appearance makes a widget look like it's from your operating system.
...own, listbox, menu, menulist-textfield, menulist-button, menulist, menulist-text, progressbar, progresschunk, radio-container, radio, resizer, resizerpanel, separator, scrollbar, statusbar, statusbarpanel, toolbarbutton, toolbox, toolbar, treeheadercell, treeheadersortarrow, treeview, treeitem, treetwisty, treetwistyopen, tooltip, textfield, tabpanels, tab, tab-left-edge, tab-right-edge, scrollbar
track-horizontal, scrollbar
track-vertical, scrollbarthumb-vertical, scrollbarthumb-horizontal, scrollbarbutton-right, scrollbarbutton-down, scrollbarbutton-left, scrollbarbutton-up, scrollbargripper-vertical, scrollbargripper-horizontal -moz-border-bottom-colors defines a series of colours.
Repackaging Firefox - Archive of obsolete content
using an extension makes it far easier to keep
track of your changes easily when the time comes to upgrade to new versions of firefox, and also ensures, when set-up correctly, that users are able to safely receive firefox updates from mozilla.
...they help mozilla
track your distribution, and plan upgrades accordingly.
Tamarin build documentation - Archive of obsolete content
what we want is to have the indexer
track the currently selected build config (so the correct conditional compiles are highlighted in the editor).
...o workspace' click finish building in eclipse 8 build configurations are included for macos with the gcc 4.0 toolchain: mac-32-release mac-64-release mac-32-debug mac-64-debug mac-32-release-debugger mac-64-release-debugger mac-32-debug-debugger mac-64-debug-debugger the build location will be project_root/build_name/avm note: as discussed above, the c++ indexer has been setup to
track the current build config, so the correct conditional compiles are highlighted in the editor run/debug from eclipse for test purposes, a launch config (running the helloworld test from esc) has been included for each of the build configs.
XBL - Archive of obsolete content
xbl bindings have been removed from the firefox codebase and the work was
tracked in bug 1397874 and are we xbl still?.
... removal of the xbl implementation is being
tracked in bug 1566221.
prefpane - Archive of obsolete content
void userchangedvalue(in domelement element); the user changed the value in a widget that the preferences system does not automatically
track state changes for (1) and the preference element associated with the widget should be updated based on the state held by the widget.
... (1) an example of a widget that has state changes
tracked for it includes the checkbox element, whose state is
tracked automatically when the "command" event fires.
NPP_Write - Archive of obsolete content
the plug-in can use the offset parameter to
track the bytes that are written.
...in a seekable stream with byte range requests, you can use this parameter to
track npn_requestread requests.see also npp_destroystream, npp_newstream, npp_writeready, npstream, npp ...
Using workers in extensions - Archive of obsolete content
then it sets the worker's onmessage event handler to a function which looks at the event passed into it, and does one of two things: if there is a data field on the event, the stock symbol being
tracked is set to the upper case version of that value.
...it needs to be updated to post a message to the worker to tell it which stock symbol to
track.
::-ms-fill-upper - Archive of obsolete content
the ::-ms-fill-upper css pseudo-element is a microsoft extension that represents the upper portion of the
track of a slider control; that is, the portion corresponding to values greater than the value currently selected by the thumb.
... see also ::-ms-fill-lower ::-ms-
track ::-ms-thumb ::-moz-range-progress css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting sliders ...
::-ms-thumb - Archive of obsolete content
the ::-ms-thumb css pseudo-element is a microsoft extension that represents the thumb that the user moves within the
track of a slider control to alter its numerical value.
... see also ::-ms-
track ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-thumb ::-moz-range-thumb css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting sliders ...
::-ms-ticks-after - Archive of obsolete content
the ::-ms-ticks-after css pseudo-element is a microsoft extension that applies one or more styles to the tick marks that appear after the
track of a slider control.
... it is possible to use the ::-ms-ticks-after, ::-ms-ticks-before, and ::-ms-
track pseudo-elements together.
::-ms-ticks-before - Archive of obsolete content
the ::-ms-ticks-before css pseudo-element is a microsoft extension that applies one or more styles to the tick marks that appear before the
track of a slider control.
... it is possible to use the ::-ms-ticks-after, ::-ms-ticks-before, and ::-ms-
track pseudo-elements together.
Index - Game development
26 audio for web games audio, games, web audio api, audio sprites, spatialization, syncing
tracks audio is an important part of any game; it adds feedback and atmosphere.
... 69
track the score and win beginner, canvas, games, javascript, tutorial, scoring, winning destroying the bricks is really cool, but to be even more awesome the game could award points for every brick a user hits, and keep count of the total score.
Efficient animation for web games - Game development
you must keep
track of time and set your animation properties based on elapsed time.
...we would recommend keeping
track of when requestanimationframe has been called and only having a single handler for it.
Collision detection - Game development
eft; var bricky = (r*(brickheight+brickpadding))+brickoffsettop; bricks[c][r].x = brickx; bricks[c][r].y = bricky; ctx.beginpath(); ctx.rect(brickx, bricky, brickwidth, brickheight); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } } } }
tracking and updating the status in the collision detection function now we need to involve the brick status property in the collisiondetection() function: if the brick is active (its status is 1) we will check whether the collision happens; if a collision does occur we'll set the status of the given brick to 0 so it won't be painted on the screen.
...in the eighth chapter we will be looking at how to
track the score and win.
Test your skills: Grid Layout - Learn web development
the grid should have three columns sharing the available space equally, and a 20-pixel gap between the column and row
tracks.
...by editing the css rules for the two child elements, cause them to span over several grid
tracks each; the second item should overlay the first as in the image below.
Introduction to CSS layout - Learn web development
in addition to using display: grid, we are also defining some row and column
tracks on the parent using the grid-template-rows and grid-template-columns properties respectively.
...this causes the items to span multiple
tracks.
What is a Domain Name? - Learn web development
companies called registrars use domain name registries to keep
track of technical and administrative information connecting you to your domain name.
... note : for some domain name, it might not be a registrar which is in charge of keeping
track.
How to build custom form controls - Learn web development
the script is in conflict with a third party script: this can happen with
tracking scripts or any bookmarklets the user uses.
...such a control will keep
track of the value with all the built-in controls provided by the browser, and the value will be sent as usual when a form is submitted.
Graceful asynchronous programming with Promises - Learn web development
the code that the video chat application would use might look something like this: function handlecallbutton(evt) { setstatusmessage("calling..."); navigator.mediadevices.getusermedia({video: true, audio: true}) .then(chatstream => { selfviewelem.srcobject = chatstream; chatstream.get
tracks().foreach(
track => mypeerconnection.add
track(
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.
... it then calls getusermedia(), asking for a stream that has both video and audio
tracks, then once that's been obtained, sets up a video element to show the stream coming from the camera as a "self view," then takes each of the stream's
tracks and adds them to the webrtc rtcpeerconnection representing a connection to another user.
Drawing graphics - Learn web development
te origin sit in the middle of the canvas: ctx.translate(width/2, height/2); now let's create a new htmlimageelement object, set its src to the image we want to load, and add an onload event handler that will cause the draw() function to fire when the image is loaded: let image = new image(); image.src = 'walk-right.png'; image.onload = draw; now we'll add some variables to keep
track of the position the sprite is to be drawn on the screen, and the sprite number we want to display.
...first of all, we keep
track of the mouse's x and y coordinates and whether it is being clicked or not with three variables: curx, cury, and pressed.
Inheritance in JavaScript - Learn web development
when using inheritance, you are advised to not have too many levels of inheritance, and to keep careful
track of where you define your methods and properties.
...if you find yourself creating a bunch of related variables and functions and want to
track them all together and package them neatly, an object is a good idea.
JavaScript performance - Learn web development
often times third party scripts and apis are added, including a/b testing,
tracking pixels, and features like maps and support features.
...often times third party scripts and apis are added, including a/b testing,
tracking pixels, and features like maps and support features.
Getting started with Ember - Learn web development
the glimmer vm enables extremely fast dom change
tracking without the need to manage and diff a cached virtual representation (which is a common approach to mitigating the slow i/o of dom changes).
...todomvc is a basic to-do
tracking app implemented in many different technologies.
Accessibility in React - Learn web development
we want this constant to
track the previous value of isediting, so we call useprevious with isediting as an argument: const wasediting = useprevious(isediting); with this constant, we can update our useeffect() hook to implement the pseudocode we discussed before — update it as follows: useeffect(() => { if (!wasediting && isediting) { editfieldref.current.focus(); } if (wasediting && !isediting) { editbutto...
...add it to the top of your app.js file, just below the imports: function useprevious(value) { const ref = useref(); useeffect(() => { ref.current = value; }); return ref.current; } now add the following, above the return statement inside the app() function: const prevtasklength = useprevious(tasks.length); here we are invoking useprevious() to
track the length of the tasks state, like so: note: since we're now utilizing useprevious() in two files, a good efficiency refactor would be to move the useprevious() function into its own file, export it from that file, and import it where you need it.
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
that's because svelte can't
track object references, so we have to explicitly tell it that obj has changed by issuing an assignment.
...add this just below your other variable definitions: let editbuttonpressed = false //
track if edit button has been pressed, to give focus to it after cancel or save next, we'll modify the edit button's functionality to save this flag, and create the action for it.
Using Vue computed properties - Learn web development
currently, we're not actually
tracking the "done" data in any fashion, so the number of completed items does not change.
...
tracking changes to "done" we can use events to capture the checkbox update and manage our list accordingly.
Introduction to automated testing - Learn web development
note: all the videos and images captured inside a test session are captured inside the gallery, test logs, and issue
tracker at lambdatest.
... issue
tracker (looks like a deck of cards) — view previously captured bugs/screenshots.
Handling common HTML and CSS problems - Learn web development
this includes linting code, handling css prefixes, using browser dev tools to
track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.
... note: when trying to
track down a tricky layout issue, a good technique is to add a brightly colored outline to the offending element, or all the elements nearby.
Handling common JavaScript problems - Learn web development
this includes information on using browser dev tools to
track down and fix problems, using polyfills and libraries to work around problems, getting modern javascript features working in older browsers, and more.
...when
tracking a device's location using repeated geolocation calls, make sure you turn it off when the user stops using it.
Strategies for carrying out testing - Learn web development
once you've finished filling in everything, press the get
tracking id button, then accept the terms of service that appear.
...for a basic website, what you need to do is copy the website
tracking code block and paste it into all the different pages you want to
track using google analytics on your site.
Cross browser testing - Learn web development
this includes linting code, handing css prefixes, using browser dev tools to
track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.
...this includes information on using browser dev tools to
track down and fix problems, using polyfills and libraries to work around problems, getting modern javascript features working in older browsers, and more.
Mozilla accessibility architecture
member variables in nsaccessible that keep
track of the number of children (maccchildcount), the parent (mparent), the first child (mfirstchild) and the next sibling (mnextsibling).
...the member variables keeping
track of the number of children, parent, first child and next sibling allow us to have instant traversal around accessible nodes that have already been visited.
Testopia
it is designed to be a generic tool for
tracking test cases, allowing for testing organizations to integrate bug reporting with their test case run results.
... though it is designed with software testing in mind, it can be used to
track testing on virtually anything in the engineering process.
Bugzilla
bugzilla.mozilla.org (often abbreviated b.m.o) is mozilla.org's bug-
tracking system, a database for recording bugs and enhancement requests for firefox, thunderbird, seamonkey, camino, and other mozilla.org projects.
... how to tell if a bug has already been reported it's useful (but not mandatory) for you to check if the problem you're reporting has been already
tracked.
Debugging
it is slow, but good for
tracking down difficult memory safety bugs.
... gecko logging using old-school logging to try to
track down what's going on.
Developer guide
tools bugzilla the bugzilla database used to
track issues for mozilla projects.
... crash
tracking information about the socorro crash reporting system.
Errors
this page lists the errors that can be raised due to firefox's anti-
tracking functionality, governed by the storage access policy.
... you can find further information about them by clicking on the links below: a request to access cookies or storage was blocked because of a custom cookie permission blocked because it came from a
tracker and content blocking is enabled blocked because we are blocking all storage access requests blocked because we are blocking all third-party storage access requests and content blocking is enabled granted partitioned access because it came from a third-party and dynamic first-party isolation is enabled ...
overflow-clip-box
non-standard this feature is non-standard and is not on a standards
track.
...ip-box: padding-box; } js function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard
track but, if accepted, should appear in css overflow module level 3.
Getting from Content to Layout
restyling the restyle
tracker maintains a list of restyles to process.
... the restyles accumulated in the restyle
tracker are dispensed with from various method on the presshell that involve reflow and flushing notifications.
IPDL Tutorial
a sub-protocol is bound to a "manager" which
tracks its lifetime and acts as a factory.
...ipdl
tracks all active protocols between two endpoints.
Localization technical reviews
tracking your progress you can
track your reviews progress two ways: within the bug and through your team's dashboard.
...these bugs are also pulled into the dashboards, which
track your revision's progress.
Automated performance testing and sheriffing
we also generate some metrics as part of the build process (like installer size) that are interesting to
track over time.
... current list of automated systems we are
tracking (at least to some degree): talos: the main performance system, run on virtually every check-in to an integration branch build metrics: a grab bag of performance metrics generated by the build system arewefastyet: a generic javascript and web benchmarking system areweslimyet: a memory benchmarking tool ...
Investigating leaks using DMD heap scan mode
firefox’s dmd heap scan mode
tracks the set of all live blocks of malloc-allocated memory and their allocation stacks, and allows you to log these blocks, and the values stored in them, to a file.
...n firefox will look something like this: xpcom_mem_bloat_log=1 moz_cc_log_shutdown=1 moz_disable_content_sandbox=t moz_cc_log_directory=$logdir moz_cc_log_process=content moz_cc_log_thread=main moz_dmd_shutdown_log=$logdir moz_dmd_log_process=tab ./mach run --dmd --mode=scan breaking this down: xpcom_mem_bloat_log=1: this reports a list of the counts of every object created and destroyed and
tracked by the xpcom leak
tracking system.
Memory Profiler
moreover, they usually don't keep
tracks of how objects are allocated.
...naturally, not only javascript objects but also native allocations are
tracked.
Refcount tracing and balancing
refcount tracing and balancing are advanced techniques for
tracking down leak of refcounted objects found with bloatview.
...when this is set, along with xpcom_mem_log_classes and xpcom_mem_refcnt_log, a stack
track will be generated for only the specific objects that you list.
TimerFirings logging
-991946880[7f46c365ba00]: [6775] fn timer (slack 100 ms): layeractivity
tracker -991946880[7f46c365ba00]: [6775] fn timer (one_shot 250 ms): presshell::spaintsuppressioncallback -991946880[7f46c365ba00]: [6775] fn timer (one_shot 160 ms): nsbrowserstatusfilter::timeouthandler -991946880[7f46c365ba00]: [6775] iface timer (one_shot 200 ms): 7f46964d7f80 -1340643584[7f46c365ec00]: [6775] obs timer (slack 1000 ms): 7f46a95a0200 each line has the following i...
... 204 fn timer (one_shot): [content] http://widgets.outbrain.com/outbrain.js:20:330 186 fn timer (one_shot): nsbrowserstatusfilter::timeouthandler 138 fn timer (one_shot): [content] https://self-repair.mozilla.org/repair/:7:13669 118 fn timer (one_shot): [content] http://a.visualrevenue.com/vrs.js:6:9423 108 fn timer (slack): layeractivity
tracker 104 fn timer (slack): nsidocument::selectorcache 104 fn timer (slack): cctimerfired ...
Performance
awsy) is a memory usage and regression
tracker.
... refcount tracing and balancing refcount tracing and balancing are ways to
track down leaks caused by incorrect uses of reference counting.
Profile Manager
by default, this means it
tracks a list of firefox applications that are installed on your system, and a list of profiles for use by firefox.
... profile manager does not
track these backups in the ui, but using profile archives is an easy way to move profiles between machines.
NSS API Guidelines
estructor_list preprocessor definition, and the code it encloses, are an effort to make the following work together: arenas, letting you allocate stuff and then removing them all at once lazy creation of pure-memory objects from asn.1 blobs, for example use of nsspkixcertificate doesn't drag all the code in for all constituent objects, unless they're actually being used our agressive pointer-
tracking facility all these are useful, but they don't combine well.
... now some of the pointer-
tracking pressure has eased off, we can drop its use when it becomes too difficult.
AT APIs Support
supported at apis at apis terms microsoft active accessibility (msaa) an api devised by microsoft so that accessibility aids can
track what's going on inside the user interface of any software package that supports it.
... assistive technology service provider interface (at-spi) an api devised by sun microsystems so that accessibility aids can
track what's going on inside the user interface of any software package that supports it.
Introduction to XPCOM for the DOM
the
tracking bug for this document is bug 99592.
...this is why it is very important to keep
track of the reference count of each object.
nsIDOMHTMLAudioElement
firefox 4 / thunderbird 3.3 / seamonkey 2.1) inherits from: nsidomhtmlmediaelement method overview unsigned long long mozcurrentsampleoffset(); void mozsetup(in pruint32 channels, in pruint32 rate); [implicit_jscontext] unsigned long mozwriteaudio(in jsval data); methods mozcurrentsampleoffset() non-standard this feature is non-standard and is not on a standards
track.
...mozsetup() non-standard this feature is non-standard and is not on a standards
track.
nsIDOMMozTouchEvent
this differs from
tracking mouse events in that touch events can be generated independently for each finger touching the screen.
... in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtarget relatedtargetarg, in unsigned long streamidarg); attributes attribute type description streamid unsigned long a unique identifier for each finger, so that each finger's movement can be
tracked separately.
nsIXULWindow
highestz 9 methods addchildwindow() tell this window that it has picked up a child xul window.note that xul windows do not currently
track child xul windows.
...note that xul windows do not currently
track child xul windows.
Mozilla
bugzilla bugzilla.mozilla.org (often abbreviated b.m.o) is mozilla.org's bug-
tracking system, a database for recording bugs and enhancement requests for firefox, thunderbird, seamonkey, camino, and other mozilla.org projects.
... how to get a process dump with windows task manager when
tracking down the causes of process hangs, it is often helpful to obtain a process dump while the process is experiencing a hang.
URLs - Plugins
the browser notifies the plug-in by calling the plug-in's npp_urlnotify function and passing it the notifydata value, which may be used to
track multiple requests.
...the notifydata parameter contains plug-in-private data passed by npp_urlnotify and may be used for
tracking multiple posts.
Debugger - Firefox Developer Tools
(naturally, the debugger.object instance this method returns does hold a strong reference to the added global.) if this debugger is
tracking allocation sites and cannot
track allocation sites forglobal, this method throws an error.
... if this debugger is
tracking allocation sites and cannot
track allocation sites for some global, this method throws an error.
AudioBufferSourceNode.loopStart - Web APIs
example in this example, the audiocontext.decodeaudiodata() function is used to decode an audio
track and put it into an audiobuffersourcenode.
...for example, if you set their values to 20 and 25, respectively, the audio will start to loop between 20 and 25 seconds in to the
track.
AudioConfiguration - Web APIs
channels: the number of channels used by the audio
track.
... examples //create media configuration to be tested const mediaconfig = { type : 'file', // 'record', 'transmission', or 'media-source' audio : { contenttype : "audio/ogg", // valid content type channels : 2, // audio channels used by the
track bitrate : 132700, // number of bits used to encode 1s of audio samplerate : 5200 // number of audio samples making up that 1s.
AudioProcessingEvent - Web APIs
example the following example shows basic usage of a scriptprocessornode to take a
track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input
track (buffer) and play it through the audiodestinationnode.
...or('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio
track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio...
BaseAudioContext.createScriptProcessor() - Web APIs
example the following example shows basic usage of a scriptprocessornode to take a
track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input
track (buffer) and play it through the audiodestinationnode.
...or('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio
track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio...
Document.requestStorageAccess() - Web APIs
note: if the requesting origin is not classified as a
tracking origin, the access request is automatically given an ephemeral storage access grant, which will go away when the page is reloaded.
...all calls to requeststorageaccess() by origins classified as
trackers will trigger a prompt.
GlobalEventHandlers.oncuechange - Web APIs
the cuechange event fires when a text
track has changed the currently displaying cues.
... the event is sent to both the text
track and to the <
track> element the
track is being presented by, if any; in the latter case, its handler is on an html
trackelement object.
HTMLMediaElement: loadedmetadata event - Web APIs
using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('loadedmetadata', (event) => { console.log('the duration and dimensions ' + ' of the media and
tracks are now known.
... '); }); using the onloadedmetadata event handler property: const video = document.queryselector('video'); video.onloadedmetadata = (event) => { console.log('the duration and dimensions ' + ' of the media and
tracks are now known.
In depth: Microtasks and the JavaScript runtime environment - Web APIs
each context additionally
tracks the next line in the program that should be run and other information critical to that context's operation.
...this allows the javascript runtime to
track the levels of recursion and the return of results through that recursion, but it also means that each time a function recurses, more memory is needed to create the new context.
The HTML DOM API - Web APIs
t htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement htmltablecaptionelement htmltablecellelement htmltablecolelement htmltableelement htmltablerowelement htmltablesectionelement htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement html
trackelement htmlulistelement htmlunknownelement htmlvideoelement deprecated html element interfaces htmlmarqueeelement obsolete html element interfaces htmlbasefontelement htmlfontelement htmlframeelement htmlframesetelement htmlisindexelement htmlmenuitemelement web app and browser integration interfaces these interfaces offer access to the browser window and d...
... audio
track audio
tracklist mediaerror text
track text
trackcue text
trackcuelist text
tracklist timeranges
trackevent video
track video
tracklist drag and drop interfaces these interfaces are used by the html_drag_and_drop_api to represent individual draggable (or dragged) items, groups of dragged or draggable items, and to handle the drag and drop process.
ImageCapture.getPhotoCapabilities() - Web APIs
this example also shows how the imagecapture object is created using a mediastream
track retrieved from a device's mediastream.
... const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const
track = mediastream.getvideo
tracks()[0]; imagecapture = new imagecapture(
track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.
track.getsettings(); input.min = photocapabilities.imagewidth.min; input.max = photocapabilities.imagewidth.max; input.step = photocapabilities.imagewidth.step; return imagecapture.getphotosettings(); }) .then(photosettings => { input.value = photosettings.imagewidth; }) .catch(error => console.log('argh!', error.name || error)); specifications specification ...
ImageCapture.getPhotoSettings() - Web APIs
this example also shows how the imagecapture object is created using a mediastream
track retrieved from a device's mediastream.
... const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const
track = mediastream.getvideo
tracks()[0]; imagecapture = new imagecapture(
track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.
track.getsettings(); input.min = photocapabilities.imagewidth.min; input.max = photocapabilities.imagewidth.max; input.step = photocapabilities.imagewidth.step; return imagecapture.getphotosettings(); }) .then(photosettings => { input.value = photosettings.imagewidth; }) .catch(error => console.log('argh!', error.name || error)); specifications specification ...
Browser storage limits and eviction criteria - Web APIs
in firefox, an internal browser tool called the quota manager keeps
track of how much disk space each origin is using up, and deletes data if necessary.
... we
track the "last access time" for each origin using temporary storage.
Intersection Observer API - Web APIs
the intersection root and root margin before we can
track the intersection of an element with a container, we need to know what that container is.
... finally, in order to
track whether the intersection ratio is going up or down, we remember the current ratio in the variable prevratio.
MediaConfiguration - Web APIs
channels: number of channels used by the audio
track.
... } }; const audioencoderconfig = { type : 'file', // 'record', 'transmission', or 'media-source' audio : { contenttype : "audio/ogg", // valid content type channels : 2, // audio channels used by the
track bitrate : 132700, // number of bits used to encode 1s of audio samplerate : 5200 // number of audio samples making up that 1s.
MediaDevices.getSupportedConstraints() - Web APIs
the getsupportedconstraints() method of the mediadevices interface returns an object based on the media
tracksupportedconstraints dictionary, whose member fields each specify one of the constrainable properties the user agent understands.
... return value a new object based on the media
tracksupportedconstraints dictionary listing the constraints supported by the user agent.
MediaPositionState.position - Web APIs
if the media is still playing when the interval is fired, setpositionstate() is called with an object that specifies the duration, playback rate, and position as reported by a mymedia object that describes the
track being played.
... let positioninterval = window.setinterval(() => { if (mymedia.isplaying) { navigator.mediasession.setpositionstate({ duration: mymedia.
trackdurationinseconds, playbackrate: mymedia.playbackrate, position: mymedia.
trackplaypositioninseconds }); } else { window.clearinterval(positioninterval); } }, 1000); specifications specification status comment media session standardthe definition of 'mediapositionstate.position' in that specification.
MediaRecorder - Web APIs
options are available to do things like set the container's mime type (such as "video/webm" or "video/mp4") and the bit rates of the audio and video
tracks or a single overall bit rate.
... mediarecorder.ignoremutedmedia indicates whether the mediarecorder instance will record input when the input mediastream
track is muted.
MediaSession.setPositionState() - Web APIs
if the media is still playing when the interval is fired, setpositionstate() is called with an object that specifies the duration, playback rate, and position as reported by a mymedia object that describes the
track being played.
... let positioninterval = window.setinterval(() => { if (mymedia.isplaying) { navigator.mediasession.setpositionstate({ duration: mymedia.
trackdurationinseconds, playbackrate: mymedia.playbackrate, position: mymedia.
trackplaypositioninseconds }); } else { window.clearinterval(positioninterval); } }, 1000); specifications specification status comment media session standardthe definition of 'mediasession.setpositionstate()' in that specification.
MediaSessionActionDetails.action - Web APIs
syntax let mediasessionactiondetails = { action: actiontype }; let actiontype = mediasessionactiondetails.action; value a domstring specifying which of the action types the callback is being invoked for: next
track advances playback to the next
track.
... previous
track moves back to the previous
track.
MediaSessionActionDetails - Web APIs
the following strings identify the currently available types of media session action: next
track advances playback to the next
track.
... previous
track moves back to the previous
track.
MediaSource.activeSourceBuffers - Web APIs
the activesourcebuffers read-only property of the mediasource interface returns a sourcebufferlist object containing a subset of the sourcebuffer objects contained within sourcebuffers — the list of objects providing the selected video
track, enabled audio
tracks, and shown/hidden text
tracks.
... syntax var myactivesourcebuffers = mediasource.activesourcebuffers; value a sourcebufferlist containing the sourcebuffer objects for each of the active
tracks.
active - Web APIs
a stream is considered active if at least one of its mediastream
tracks is not in the mediastream
track.ended state.
... once every
track has ended, the stream's active property becomes false.
MediaStream.clone() - Web APIs
this new mediastream object has a new unique id and contains clones of every mediastream
track contained by the mediastream on which clone() was called.
... return value a new mediastream instance which has a new unique id and contains clones of every mediastream
track contained by the mediastream on which clone() was called.
MediaStreamAudioDestinationNode - Web APIs
the mediastreamaudiodestinationnode interface represents an audio destination consisting of a webrtc mediastream with a single audiomediastream
track, which can be used in a similar way to a mediastream obtained from navigator.getusermedia.
... mediastreamaudiodestinationnode.stream is a mediastream containing a single audiomediastream
track with the same number of channels as the node itself.
MediaStreamAudioSourceNode() - Web APIs
the web audio api's mediastreamaudiosourcenode() constructor creates and returns a new mediastreamaudiosourcenode object which uses the first audio
track of a given mediastream as its source.
... exceptions invalidstateerror the specified mediastream doesn't have any audio
tracks.
Recording a media element - Web APIs
stopping the input stream the stop() function simply stops the input media: function stop(stream) { stream.get
tracks().foreach(
track =>
track.stop()); } this works by calling mediastream.get
tracks(), using foreach() to call mediastream
track.stop() on each
track in the stream.
...ownloadbutton.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.mediadevices.getusermedia() is called to request a new mediastream that has both video and audio
tracks.
Media Session API - Web APIs
*/ }); navigator.mediasession.setactionhandler('previous
track', function() { /* code excerpted.
... */ }); navigator.mediasession.setactionhandler('next
track', function() { /* code excerpted.
Navigator - Web APIs
navigator.donot
track reports the value of the user's do-not-
track preference.
... when this value is "yes", your web site or application should not
track the user.
NotifyAudioAvailableEvent - Web APIs
non-standard this feature is non-standard and is not on a standards
track.
... time a floating-point value indicating the time in seconds at which the first sample in the framebuffer occurs, relative to the start of the audio
track.
OfflineAudioContext.startRendering() - Web APIs
we use the audiocontext to load an audio
track via xhr (audiocontext.decodeaudiodata), then the offlineaudiocontext to render the audio into an audiobuffersourcenode and play the
track through.
... note: for a working example, see our offline-audio-context-promise github repo (see the source code too.) // define online and offline audio context var audioctx = new audiocontext(); var offlinectx = new offlineaudiocontext(2,44100*40,44100); source = offlinectx.createbuffersource(); // use xhr to load an audio
track, and // decodeaudiodata to decode it and offlineaudiocontext to render it function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffe...
OfflineAudioContext - Web APIs
we use the audiocontext to load an audio
track via xhr (audiocontext.decodeaudiodata), then the offlineaudiocontext to render the audio into an audiobuffersourcenode and play the
track through.
... note: for a working example, see our offline-audio-context-promise github repo (see the source code too.) // define online and offline audio context var audioctx = new audiocontext(); var offlinectx = new offlineaudiocontext(2,44100*40,44100); source = offlinectx.createbuffersource(); // use xhr to load an audio
track, and // decodeaudiodata to decode it and offlineaudiocontext to render it function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffe...
OverconstrainedError.OverconstrainedError() - Web APIs
the overconstrainederror constructor creates a new overconstrainederror object which indicates that the set of desired capabilities for the current mediastream
track cannot currently be met.
... when this event is thrown on a mediastream
track, it is muted until either the current constraints can be established or until satisfiable constraints are applied.
OverconstrainedError - Web APIs
the overconstrainederror interface of the media capture and streams api indicates that the set of desired capabilities for the current mediastream
track cannot currently be met.
... when this event is thrown on a mediastream
track, it is muted until either the current constraints can be established or until satisfiable constraints are applied.
PhotoCapabilities - Web APIs
this example also shows how the imagecapture object is created using a mediastream
track retrieved from a device's mediastream.
... const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const
track = mediastream.getvideo
tracks()[0]; imagecapture = new imagecapture(
track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.
track.getsettings(); input.min = photocapabilities.imagewidth.min; input.max = photocapabilities.imagewidth.max; input.step = photocapabilities.imagewidth.step; return imagecapture.getphotosettings(); }) .then(photosettings => { input.value = photosettings.imagewidth; }) .catch(error => console.log('argh!', error.name || error)); specifications specification ...
Pointer Lock API - Web APIs
a
tracker is also set up to write out the x and y values to the screen, for reference.
... var
tracker = document.getelementbyid('
tracker'); var animation; function updateposition(e) { x += e.movementx; y += e.movementy; if (x > canvas.width + radius) { x = -radius; } if (y > canvas.height + radius) { y = -radius; } if (x < -radius) { x = canvas.width + radius; } if (y < -radius) { y = canvas.height + radius; }
tracker.textcontent = "x position: " + x + ", y position: " + y; if (!animation) { animation = requestanimationframe(function() { animation = null; canvasdraw(); }); } } the canvasdraw() function draws the ball in the current x and y positions: function canvasdraw() { ctx.fillstyle = "black"; ctx.fillrect(0, 0, canvas.width, canvas.height); ctx.fillstyle = "#f00"; ctx.beginpath(); ctx.arc(x, y, radiu...
RTCInboundRtpStreamStats.qpSum - Web APIs
the qpsum property of the rtcinboundrtpstreamstats dictionary is a value generated by adding the quantization parameter (qp) values for every frame sent or received to date on the video
track corresponding to this rtcinboundrtpstreamstats object.
... syntax var qpsum = rtcinboundrtpstreamstats.qpsum; value an unsigned 64-bit integer value which indicates the sum of the quantization parameter (qp) value for every frame sent or received so far on the
track described by the rtcinboundrtpstreamstats object.
RTCOutboundRtpStreamStats.qpSum - Web APIs
the qpsum property of the rtcoutboundrtpstreamstats dictionary is a value generated by adding the quantization parameter (qp) values for every frame this sender has produced to date on the video
track corresponding to this rtcoutboundrtpstreamstats object.
... syntax var qpsum = rtcoutboundrtpstreamstats.qpsum; value an unsigned 64-bit integer value which indicates the sum of the quantization parameter (qp) value for every frame sent so far on the
track described by the rtcoutboundrtpstreamstats object.
RTCPeerConnection.onremovestream - Web APIs
the removestream event has been removed from the webrtc specification in favor of the existing remove
track event on the remote mediastream and the corresponding mediastream.onremove
track event handler property of the remote mediastream.
... the rtcpeerconnection api is now
track-based, so having zero
tracks in the remote stream is equivalent to the remote stream being removed and the old removestream event.
RTCPeerConnection: removestream event - Web APIs
bubbles no cancelable no interface mediastreamevent event handler property rtcpeerconnection.onremovestream important: this event has been removed from the webrtc specification in favor of the existing remove
track event on the remote mediastream and the corresponding mediastream.onremove
track event handler property of the remote mediastream.
... the rtcpeerconnection api is now
track-based, so having zero
tracks in the remote stream is equivalent to the remote stream being removed, which caused a removestream event.
RTCRtpEncodingParameters.scaleResolutionDownBy - Web APIs
the rtcrtpencodingparameters dictionary's scaleresolutiondownby property can be used to specify a factor by which to reduce the size of a video
track during encoding.
... this property is only available for
tracks whose kind is video.
RTCRtpSender.dtmf - Web APIs
syntax var dtmfsender = rtcrtpsender.dtmf; value an rtcdtmfsender which can be used to send dtmf over the rtp session, or null if the
track being carried by the rtp session or the rtcpeerconnection as a whole doesn't support dtmf.
... only audio
tracks can support dtmf, and typically only one audio
track per rtcpeerconnection will have an associated rtcdtmfsender example tbd specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender.dtmf' in that specification.
RTCRtpStreamStats.kind - Web APIs
syntax mediakind = rtcrtpstreamstats.kind; value a domstring whose value is "audio" if the
track whose statistics are given by the rtcrtpstreamstats object contains audio, or "video" if the
track contains video media.
... this string will always be the same as the one provided by the associated mediastream
track object's kind property.
RTCRtpStreamStats.qpSum - Web APIs
the qpsum property of the rtcrtpstreamstats dictionary is a value generated by adding the quantization parameter (qp) values for every frame sent or received to date on the video
track corresponding to this rtcrtpstreamstats object.
... syntax var qpsum = rtcrtpstreamstats.qpsum; value an unsigned 64-bit integer value which indicates the sum of the quantization parameter (qp) value for every frame sent or received so far on the
track described by the rtcrtpstreamstats object.
RTCStatsReport - Web APIs
track the object is one of the types based on rtcmediahandlerstats: for audio
tracks, the type is rtcsenderaudio
trackattachmentstats and for video
tracks, the type is rtcsendervideo
trackattachmentstats.
... the data within provides statistics related to a particular mediastream
track's attachment to an rtcrtpsender; also included are the media level metrics that go along with the
track.
RTCStatsType - Web APIs
track the object is one of the types based on rtcmediahandlerstats: for audio
tracks, the type is rtcsenderaudio
trackattachmentstats and for video
tracks, the type is rtcsendervideo
trackattachmentstats.
... the data within provides statistics related to a particular mediastream
track's attachment to an rtcrtpsender; also included are the media level metrics that go along with the
track.
ScriptProcessorNode.bufferSize - Web APIs
example the following example shows basic usage of a scriptprocessornode to take a
track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input
track (buffer) and play it through the audiodestinationnode.
...selector('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio
track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio da...
ScriptProcessorNode.onaudioprocess - Web APIs
} example the following example shows basic usage of a scriptprocessornode to take a
track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input
track (buffer) and play it through the audiodestinationnode.
...or('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio
track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio...
ScriptProcessorNode - Web APIs
examples the following example shows basic usage of a scriptprocessornode to take a
track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input
track (buffer) and play it through the audiodestinationnode.
...selector('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio
track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio da...
Touch - Web APIs
the contact point is commonly a finger or stylus and the device may be a touchscreen or
trackpad.
...this lets you ensure that you're
tracking the same touch all the time.
VTTRegion - Web APIs
the vttregion interface—part of the api for handling webvtt (text
tracks on media presentations)—describes a portion of the video to render a vttcue onto.
... specifications specification status comment webvtt: the web video text
tracks format candidate recommendation ...
Animating objects with WebGL - Web APIs
the first thing we'll need is a variable in which to
track the current rotation of the square: var squarerotation = 0.0; now we need to update the drawscene() function to apply the current rotation to the square when drawing it.
...we can do that by creating a new variable to
track the time at which we last animated (let's call it then), then adding the following code to the end of the main function var then = 0; // draw the scene repeatedly function render(now) { now *= 0.001; // convert to seconds const deltatime = now - then; then = now; drawscene(gl, programinfo, buffers, deltatime); requestanimationframe(render); } requestanimationfra...
WebGL best practices - Web APIs
you can rely on this document to guide your choice of approach, and ensure you're on the right
track no matter what browser or hardware your users run.
...implementations
track the liveness of objects, so 'deleting' them at the api level only releases the handle that refers to the actual object.
WebRTC connectivity - Web APIs
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.mediadevices.getusermedia() the caller creates rtcpeerconnection and called rtcpeerconnection.add
track() (since addstream is deprecating) the caller calls rtcpeerconnection.createoffer() to create an offer.
... the recipient does any setup it needs to do for its end of the call: capture its local media, and attach each media
tracks into the peer connection via rtcpeerconnection.add
track() the recipient then creates an answer by calling rtcpeerconnection.createanswer().
Lifetime of a WebRTC session - Web APIs
each peer establishes a handler for
track event, which is received when the remote peer adds a
track to the stream.
... this code should connect the
tracks to its consumer, such as a <video> element.
Using WebRTC data channels - Web APIs
firefox support for ndata is in the process of being implemented; see bug 1381145 to
track it becoming available for general use.
... the chrome team is
tracking their implementation of ndata support in chrome bug 5696.
Controlling multiple parameters with ConstantSourceNode - Web APIs
playing a boolean that we'll use to keep
track of whether or not we're currently playing the tones.
... once all three oscillators have been created, they're started by calling each one's constantsourcenode.start() method in turn, and playing is set to true to
track that the tones are playing.
Migrating from webkitAudioContext - Web APIs
console.log(context.activesourcecount); could be rewritten like that: // array to
track the playing source nodes: var sources = []; // when starting the source, put it at the end of the array, // and set a handler to make sure it gets removed when the // audiobuffersourcenode reaches its end.
... you can simply
track where the audioparam object is coming from in your code if you need this information.
Using Web Workers - Web APIs
this makes it easier for workers to keep
track of where their dependencies are.
... first, we create a queryableworker class that takes the url of the worker, a default listener, and an error handler, and this class is going to keep
track of a list of listeners and help us communicate with the worker: function queryableworker(url, defaultlistener, onerror) { var instance = this, worker = new worker(url), listeners = {}; this.defaultlistener = defaultlistener || function() {}; if (onerror) {worker.onerror = onerror;} this.postmessage = function(message) { worker.postmessage(message); ...
XRBoundedReferenceSpace - Web APIs
this is typically used when the xr system is capable of
tracking the user's physical movement within a limited distance of their starting position.
... at a minimum, the boundaries indicate the area in which the xr device is capable of
tracking the user's movement.
XRFrame - Web APIs
events which communicate the
tracking state of objects also provide an xrframe reference as part of their structure.
... properties session read only the xrsession that for which this xrframe describes the
tracking details for all objects.
XRInputSource - Web APIs
gripspaceread only an xrspace whose origin
tracks the pose which is used to render objects which should appear as if they're held in the hand indicated by handedness.
... targetraymoderead only a domstring indicating the methodology used to produce the target ray: gaze,
tracked-pointer, or screen.
XRInputSourcesChangeEvent.added - Web APIs
it looks for new and removed devices whose targetraymode is
tracked-pointer.
... xrsession.oninputsourcescchange = event => { for (let input of event.added) { if (input.targetraymode == "
tracked-pointer") { addedpointerdevice(input); } } for (let input of event.removed) { if (input.targetraymode == "
tracked-pointer") { removedpointerdevice(input); } } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent.added' in that specification.
XRInputSourcesChangeEvent.removed - Web APIs
it looks for new and removed devices whose targetraymode is
tracked-pointer.
... xrsession.oninputsourcescchange = event => { for (let input of event.added) { if (input.targetraymode == "
tracked-pointer") { addedpointerdevice(input); } } for (let input of event.removed) { if (input.targetraymode == "
tracked-pointer") { removedpointerdevice(input); } } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent.removed' in that specification.
XRPose.transform - Web APIs
example this handler for the xrsession event select handles events for
tracked pointers.
... xrsession.addeventlistener("select", event => { let source = event.inputsource; let frame = event.frame; let targetraypose = frame.getpose(source.targetrayspace, myrefspace); let targetobject = findtargetusingray(targetray.transform.matrix); if (source.targetraymode == "
tracked-pointer") { if (source.handedness == user.handedness) { targetobject.primaryaction(); } else { targetobject.offhandaction(); } } }); specifications specification status comment webxr device apithe definition of 'xrpose.transform' in that specification.
XRSession.onselect - Web APIs
the select event is sent after
tracking of the primary action begins, as announced by the selectstart event, and immediately before the
tracking of the primary action ends, which is announced by the selectend event.
... xrsession.onselect = event => { let source = event.inputsource; if (source.handedness == user.handedness) { if (source.targetraymode == "
tracked-pointer") { let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose); } } } }; specifications specification status comment webxr device apithe definition of 'xrsession.onselect' in that specification.
XRSession.requestAnimationFrame() - Web APIs
the callback takes two parameters as inputs: an xrframe describing the state of all
tracked objects for the session, and a time stamp you can use to compute any animation updates needed.
... xrframe an xrframe object describing the state of the objects being
tracked by the session.
Web accessibility for seizures and physical reactions - Accessibility
developmental & experimental features mdn navigator.donot
track from the documentation: "returns the user's do-not-
track setting.
... this is "1" if the user has requested not to be
tracked by web sites, content, or advertising" media queries level 5 environmentmq (planned in media queries level 5) light-level has three valid values: dim, normal, and washed.
-webkit-border-before - CSS: Cascading Style Sheets
this property is on the standard
track as border-block-start.
... <percentage><hue> = <number> | <angle> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; -webkit-border-before: 5px dashed blue; } result specifications not part of any standard, but it relates to the standards-
track border-block-start property.
::cue-region - CSS: Cascading Style Sheets
this can be used to style captions and other cues in media with vtt
tracks.
...font-style font-variant font-weight line-height opacity outline outline-color outline-style outline-width ruby-position text-combine-upright text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-shadow visibility white-space specifications specification status comment webvtt: the web video text
tracks formatthe definition of 'the ::cue-region pseudo-element' in that specification.
::cue - CSS: Cascading Style Sheets
this can be used to style captions and other cues in media with vtt
tracks.
... ::cue { color: #fff; background-color: rgba(0, 0, 0, 0.6); } specifications specification status comment webvtt: the web video text
tracks formatthe definition of '::cue' in that specification.
CSS Box Alignment - CSS: Cascading Style Sheets
css grid layout alignment example in this example using grid layout, there is extra space in the grid container after laying out the fixed width
tracks on the inline (main) axis.
... the gap property is a shorthand for row-gap and column-gap, which allows us to set these properties at once: row-gap column-gap gap in the below example, a grid layout uses the gap shorthand to set a 10px gap between row
tracks, and a 2em gap between column
tracks.
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
i can turn my <ul> into a grid container with three column
tracks.
... however, the width i have assigned to the list items themselves still applies, and it now makes those items a third of the width of the
track: if i reset the width to auto, then this will stop the float behavior happening for older browsers.
CSS Grid Layout - CSS: Cascading Style Sheets
basic example the example below shows a three-column
track grid with new rows created at a minimum of 100 pixels and a maximum of auto.
...ies grid-template-columns grid-template-rows grid-template-areas grid-template grid-auto-columns grid-auto-rows grid-auto-flow grid grid-row-start grid-column-start grid-row-end grid-column-end grid-row grid-column grid-area row-gap column-gap gap css functions repeat() minmax() fit-content() css data types <flex> glossary entries grid grid lines grid
tracks grid cell grid area gutters grid axis grid row grid column guides basic concepts of grid layout relationship of grid layout to other layout methods layout using line-based placement grid template areas layout using named grid lines auto-placement in css grid layout box alignment in css grid layout css grid, logical values and writing modes css grid layout and accessibility ...
Grid wrapper - CSS: Cascading Style Sheets
recipe download this example choices made this recipe uses the css grid minmax() function to define the grid
track sizes in the grid-template-columns property.
... for the central columns with a maximum width we can set a minimum value of 0 or greater and a maximum value that specifies the maximum size the column
tracks will grow to.
Sticky footers - CSS: Cascading Style Sheets
grid auto-placement will place our items in source order and so the header goes into the first auto sized
track, the main content into the 1fr
track and the footer into the final auto sized
track.
... the 1fr
track will take up all available space and so grows to fill the gap.
grid - CSS: Cascading Style Sheets
sets up an auto-flow by setting the row
tracks explicitly via the grid-template-rows property (and the grid-template-columns property to none) and specifying how to auto-repeat the column
tracks via grid-auto-columns (and setting grid-auto-rows to auto).
.../ <'grid-template-columns'> sets up an auto-flow by setting the column
tracks explicitly via the grid-template-columns property (and the grid-template-rows property to none) and specifying how to auto-repeat the row
tracks via grid-auto-rows (and setting grid-auto-columns to auto).
Event reference
sswindowclosing addons specific the session store will stop
tracking this window.
... sstabclosing addons specific the session store will stop
tracking this tab.
HTML5 - Developer guides
track and webvtt the <
track> element allows subtitles and chapters.
... webvtt is a text
track format.
<img>: The Image Embed element - HTML: Hypertext Markup Language
setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content (it’s decoration or a
tracking pixel), and that non-visual browsers may omit it from rendering.
...this is an anti-
tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to
track a user's approximate scroll position throughout a session, by strategically placing images in a page's markup such that a server can
track how many images are requested and when.
<input type="color"> - HTML: Hypertext Markup Language
tracking color changes as is the case with other <input> types, there are two events that can be used to detect changes to the color value: input and change.
... example let's create an example which does a little more with the color input by
tracking the change and input events to take the new color and apply it to every <p> element in the document.
<input type="hidden"> - HTML: Hypertext Markup Language
tracking edited content one of the most common uses for hidden inputs is to keep
track of what database record needs to be updated when an edit form is submitted.
... examples let's look at how we might implement a simple version of the edit form we described earlier (see
tracking edited content), using a hidden input to remember the id of the record being edited.
Evolution of HTTP - HTTP
ssl was put on the standards
track and eventually became tls, with versions 1.0, 1.1, 1.2, and 1.3 appearing successfully to close vulnerabilities.
...notable headers are do not
track (dnt) header to control privacy, x-frame-options, or upgrade-insecure-requests but many more exist.
ETag - HTTP
etags are therefore similar to fingerprints, and might also be used for
tracking purposes by some servers.
... they might also be set to persist indefinitely by a
tracking server.
WeakSet - JavaScript
use case: detecting circular references functions that call themselves recursively need a way of guarding against circular data structures by
tracking which objects have already been processed.
... the number of objects or their traversal order is immaterial, so a weakset is more suitable (and performant) than a set for
tracking object references, especially if a very large number of objects is involved.
Web video codec guide - Web media technologies
global motion compensation generally adjusts for camera movements such as
tracking, dolly movements, panning, tilting, rolling, and up and down movements.
...the resulting file will use a bit rate of no more than 800 mbps shared between the video and audio
tracks.
Web media technologies
<
track> the html <
track> element can be placed within an <audio> or <video> element to provide a reference to a webvtt format subtitle or caption
track to be used when playing the media.
... accessible from javascript as html
trackelement objects.
Privacy, permissions, and information security
personally identifiable information personally identifiable information (pii) is information which can be used, in whole or in part, to
track down and/or identify a specific person.
...for example, if a site leaks a list of users' names and zip codes online, a bad actor could almost certainly
track down at least some percentage of those users by simply using the corresponding phone books.
private-browsing - Archive of obsolete content
nction() {" + " console.log(document.body.innerhtml);" + "});"; function logpublicpagecontent(worker) { if (privatebrowsing.isprivate(worker)) { console.log("private window, doing nothing"); } else { worker.port.emit("log-content"); } } pagemod.pagemod({ include: "*", contentscript: loggingscript, onattach: logpublicpagecontent });
tracking private-browsing exit sometimes it can be useful to cache some data from private windows while they are open, as long as you don't store it after the private browsing windows have been closed.
dev/panel - Archive of obsolete content
options) { this.debuggee = options.debuggee; }, dispose: function() { this.debuggee = null; }, onready: function() { this.postmessage("message from the add-on", [this.debuggee]); } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); this is being
tracked as bug 1079540.
Miscellaneous - Archive of obsolete content
addon) { // this is an asynchronous callback function that might not be called immediately alert("my extension's version is " + addon.version); }); restarting firefox/thunderbird/seamonkey_2.0 for firefox 3 see onwizardfinish around here: http://mxr.mozilla.org/seamonkey/sou...pdates.js#1639 for firefox 2 see around here: http://mxr.mozilla.org/mozilla1.8/so...pdates.js#1631 bug 338039
tracks improving this situation by providing a simple method to restart the application.
Promises - Archive of obsolete content
the downloads object provides a promise-based api for downloading remote files, with full support for progress
tracking, pause and resume, and, optionally, integration with the download manager ui.
Tamarin Roadmap - Archive of obsolete content
tation tamarin:strings bug 465506 complete enhanced c++ profiler enhance memory profiler to work in release builds and be more performant in progress enable lir for arm targets bug 460764 complete amd64 nanojit bug 464476 in progress port nanojit to powerpc bug 458077 complete add mac-x64 and linux-x64 buildbots complete fail build on assertion in acceptance tests complete merge
tracking bug bug 469836 in progress tc feb '09 spring backlog tbd.
Treehydra Manual - Archive of obsolete content
users only need to define their esp property variables, abstract values, and the flow semantics of gimple statements, and the library will do all of the substate
tracking and fixed-point solving.
Venkman Introduction - Archive of obsolete content
loading scripts into the debugger whether or not you start venkman first or the browser component, when the mozilla suite starts up, the javascript engine begins to keep
track of and compile all the scripts that are loaded in web pages and in the various mozilla user interfaces themselves.
::-ms-fill-lower - Archive of obsolete content
the ::-ms-fill-lower css pseudo-element represents the lower portion of the
track of a slider control; that is, the portion corresponding to values less than the value currently selected by the thumb.
Using the Right Markup to Invoke Plugins - Archive of obsolete content
here is an example: <object type="application/x-java-applet;jpi-version=1.4.1_01" width="460" height="160"> <param name="code" value="animator.class" /> <param name="imagesource" value="images/beans" /> <param name="backgroundcolor" value="0xc0c0c0" /> <param name="endimage" value="10" /> <param name="soundsource" value="audio"> <param name="sound
track" value="spacemusic.au" /> <param name="sounds" value="1.au|2.au|3.au|4.au|5.au|6.au|7.au|8.au|9.au|0.au" /> <param name="pause" value="200" /> <p>you need the java plugin.
2D breakout game using pure JavaScript - Game development
lesson details all the lessons — and the different versions of the mdn breakout game we are building together — are available on github: create the canvas and draw on it move the ball bounce off the walls paddle and keyboard controls game over build the brick field collision detection
track the score and win mouse controls finishing up starting with pure javascript is the best way to get a solid knowledge of web game development.
Gecko FAQ - Gecko Redirect 1
layout component
tracks content layout bugs that may be related to a variety of specifications html 4.0 elements, form controls, frames, tables, and form submission bug reports marked with the html4 keyword "meta bug" for
tracking outstanding issues with html 4.01 compliance css: style system component (see also bug reports marked with the css1, css2, and css3 keywords) dom: see dom0, dom1, dom2 and...
MDN Web Docs Glossary: Definitions of Web-related terms
eneral header gif gij git global object global scope global variable glyph gonk google chrome gpl gpu graceful degradation grid grid areas grid axis grid cell grid column grid container grid lines grid row grid
tracks guard gutters gzip compression h hash head high-level programming language hmac hoisting host hotlink houdini hpkp hsts html html5 http http header http/2 http/3 https hyperlink hypert...
How can we design for all types of users? - Learn web development
expressed with ems: body { font-size:1em; } /* 1em = 100% of the browser's base font size, so in most cases this will render as 16 pixels */ h1 { font-size:2em; } /* twice the size of the body, thus 32 pixels */ span.subheading { font-size:0.5em; } /* half the size of the h1, thus 16 pixels to come back to the original size */ as you can see, the math quickly gets daunting when you have to keep
track of the parent, the parent's parent, the parent's parent's parent, and so on.
What are hyperlinks? - Learn web development
back in 1989, tim berners-lee, the web's inventor, spoke of the three pillars on which the web stands: url, an address system that keeps
track of web documents http, a transfer protocol to find documents when given their urls html, a document format allowing for embedded hyperlinks as you can see in the three pillars, everything on the web revolves around documents and how to access them.
Advanced form styling - Learn web development
you can use something like the following to remove the default slider
track completely and replace it with a custom style (a thin red
track, in this case): input[type="range"] { appearance: none; -webkit-appearance: none; background: red; height: 2px; padding: 0; outline: 1px solid transparent; } however, it is very difficult to customize the style of the range control's drag handle — to get full control over range styling you'll need to use a whole bunch...
Styling web forms - Learn web development
note: there are some proprietary css pseudo-elements available that allow you to style internal components of these form controls, such as ::-moz-range-
track, but these are not consistent across browsers, so can't be relied upon.
Your first form - Learn web development
there is great benefit to doing this — it associates the label with the form control, enabling mouse,
trackpad, and touch device users to click on the label to activate the corresponding control, and it also provides an accessible name for screen readers to read out to their users.
HTML basics - Learn web development
this contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio
tracks or whatever else.
Third-party APIs - Learn web development
when the developer has registered for a key, they are then known to the api provider, and action can be taken if they start to do anything malicious with the api (such as
tracking people's location or trying to spam the api with loads of requests to stop it working, for example).
A first splash into JavaScript - Learn web development
<label for="guessfield">enter a guess: </label><input type="text" id="guessfield" class="guessfield"> <input type="submit" value="submit guess" class="guesssubmit"> our final two variables store a guess count of 1 (used to keep
track of how many guesses the player has had), and a reference to a reset button that doesn't exist yet (but will later).
JavaScript object basics - Learn web development
you should also appreciate that objects are very useful as structures for storing related data and functionality — if you tried to keep
track of all the properties and methods in our person object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names.
Aprender y obtener ayuda - Learn web development
also, it might be a good idea to have some sub-goals worked out to allow you to keep
track of where you are more easily, for example: html and css basics learnt by summer javascript basics learnt by december example website project built by next april etc.
Web performance - Learn web development
in this article we discuss the impact video content has on performance, and cover tips like removing audio
tracks from background videos can improve performance.
Ember resources and troubleshooting - Learn web development
more concretely, using mut allows for template-only settings functions to be declared: <checkbox @value={{this.somedata}} @ontoggle={{fn (mut this.somedata) (not this.somedata)}} /> whereas, without mut, a component class would be needed: import component from '@glimmer/component'; import {
tracked } from '@glimmer/
tracking'; import { action } from '@ember/object'; export default class example extends component { @
tracked somedata = false; @action setdata(newvalue) { this.somedata = newvalue; } } which would then be called in the template like so: <checkbox @data={{this.somedata}} @onchange={{this.setdata}} /> due to the conciseness of using mut, it may be desireable to r...
Introduction to cross browser testing - Learn web development
reporting bugs just to reiterate on what was said above, if you discover bugs in browsers, you should report them: firefox bugzilla edgehtml issue
tracker safari chrome opera summary this article should have given you a high-level understanding of the most important concepts you need to know about cross browser testing.
Deploying our app - Learn web development
a quick way to verify this is to run the following command: git status you should get a status report of what files are being
tracked, what files are staged, and so on — all terms that are part of the git grammar.
Accessibility API cross-reference
ui controls, see armed focused focused focused available to javascript as document.activeelement appearance has changed for mouseover hot
tracked n/a n/a especially used for sliders, scrollbars, toolbars, tablists...
Accessibility information for UI designers and developers
text spacing users should be able to make the following changes to their text spacing: set line height (leading) to at least 1.5 times the font size set spacing following paragraphs to at least 2 times the font size set letter spacing (
tracking) to at least 0.12 times the font size set word spacing to at least 0.16 times the font size this does not mean that your page needs to offer controls to make such changes, merely that if someone does these things in a custom stylesheet, they should not break the interface.
CSUN Firefox Materials
screen magnifier users can also benefit from firefox's powerful features today, as caret and focus
tracking are fully enabled.
Software accessibility: Where are we today?
enter open source software microsoft was on the right
track with microsoft active accessibility, but because the source code to most popular desktop applications which are used in large corporations is not publicly available, they were never made fully accessible.
ZoomText
comboboxes report incorrect bounds, causing zoomtext
tracking to move to the wrong area of the screen.
Continuous Integration
perfherder alerts we
track changes to talos and other performance frameworks inside perfherder, and try to automatically alert when there is a sustained change exceeding a certain magnitude (specified per test).
Cookies Preferences in Mozilla
network.cookie.cookiebehavior default value: 0 0 = accept all cookies by default 1 = only accept from the originating site (block third party cookies) 2 = block all cookies by default 3 = use p3p settings (note: this is only applicable to older mozilla suite and seamonkey versions.) 4 = storage access policy: block cookies from
trackers network.cookie.lifetimepolicy default value: 0 0 = accept cookies normally 1 = prompt for each cookie (prompting was removed in firefox 44) 2 = accept for current session only 3 = accept for n days network.cookie.lifetime.days default value: 90 only used if network.cookie.lifetimepolicy is set to 3 sets the number of days that the lifetime of cookies should be limited to.
Debugging OpenGL
if you start up firefox with this variable defined, the following behavior changes occur: each time you issue an opengl call, a check is performed to ensure that the gl context is current, using a thread-local static variable to keep
track of this.
Inner and outer windows
that lets the document interact with the "physical" window, while the outer window can keep
track of all the documents (inner windows) it contains.
Reviewer Checklist
good web citizenship make sure new web-exposed apis actually make sense and are either standards
track or preffed off by default.
ChromeWorker
non-standard this feature is non-standard and is not on a standards
track.
:-moz-lwtheme
non-standard this feature is non-standard and is not on a standards
track.
::-moz-tree-row
non-standard this feature is non-standard and is not on a standards
track.
overflow-clip-box-block
padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard
track but, if accepted, should appear in css overflow module level 3.
overflow-clip-box-inline
padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard
track but, if accepted, should appear in css overflow module level 3.
JavaScript-DOM Prototypes in Mozilla
this registration is done with the nsscriptnamespacemanager, which is in charge of keeping
track of what names are registered in the global namespace, and what kinds of names those names are (i.e.
AddonInstall
an addoninstall instance
tracks download and installation process of an add-on.
CustomizableUI.jsm
for each area, customizableui keeps
track of a list of the widgets they contain, generally refered to as 'placements'.
Log.jsm
progress is
tracked in bugzilla using dependencies of bug 451283.
source-editor.jsm
the editor simply
tracks their existence and marks them with annotations in the editor.
Index
now we'll walk you through performing some quality assurance testing on your work to make sure you're on the right
track.
Initial setup
locale-specific bugzilla component having a bugzilla component specific to your locale will help us to
track your localization's progress from first steps to official release.
QA phase
now we'll walk you through performing some quality assurance testing on your work to make sure you're on the right
track.
Translation phase
if your locale has an hg repository hosted on the mozilla servers, you can
track your localization's current progress by visiting the l10n dashboards.
Localization sign-off reviews
you can work with the l10n-drivers to
track the progress of your review and correlate your review/sign-off's approval progress with specific bugzilla bugs.
MathML3Testsuite
however, any report is welcome on the
tracking bug for the mathml testsuite.
Mozilla DOM Hacking Guide
static prbool sisinitialized: keeps
track of wether class info was already initialized, because init() shouldn't be called twice.
Build Metrics
"build metrics" is a catch-all term for performance measures that are generated by the firefox build system and
tracked by perfherder.
BloatView
== bloatview: all (cumulative) leak and bloat statistics, tab process 1862 |<----------------class--------------->|<-----bytes------>|<----objects---->| | | per-inst leaked| total rem| 0 |total | 17 2484|253953338 38| 17 |asynctransaction
trackersholder | 40 40| 10594 1| 78 |compositorchild | 472 472| 1 1| 79 |condvar | 24 48| 3086 2| 279 |messagepump | 8 8| 30 1| 285 |mutex | 20 60| 89987 3| 302 |pcompositor...
Profiling with Xperf
however, even despite this, it's a useful way to
track allocations/deallocations.
TraceMalloc
if filename is -, nothing is written to a file, but tracemalloc will be active and will
track live allocations and their stack traces.
HTTP delegation
to find an example implementation, you may look at bug 111384, which
tracks the implementation in mozilla client applications.
HTTP delegation
to find an example implementation, you may look at bug 111384, which
tracks the implementation in mozilla client applications.
Index
the implementation of arenas makes sure that all individual memory blocks are
tracked.
JSS
jss source should now be checked out from the github: git clone git@github.com:dogtagpki/jss.git -- or -- git clone https://github.com/dogtagpki/jss.git all future upstream enquiries to jss should now use the pagure issue
tracker system: https://pagure.io/jss/issues documentation regarding the jss project should now be viewed at: http://www.dogtagpki.org/wiki/jss note: as much of the jss documentation is sorely out-of-date, updated information will be a work in progress, and many portions of any legacy documentation will be re-written over the course of time.
NSS_3.12_release_notes.html
584: nss pkcs12 decoder fails to import bags without nicknames bug 332633: remove duplicate header files in nss/cmd/sslsample bug 335019: pk12util takes friendly name from key, not cert bug 339173: mem leak whenever secmod_handle_string_arg called in loop bug 353904: klocwork null ptr deref in secasn1d.c bug 366390: correct misleading function names in fipstest bug 370536: memory leaks in pointer
tracker code in debug builds only bug 372242: cert_comparerdn uses incorrect algorithm bug 379753: s/mime should support aes bug 381375: ocspclnt doesn't work on windows bug 398693: der_asciitotime produces incorrect output for dates 1950-1970 bug 420212: empty cert dns handled badly, display as !invalid ava!
NSS PKCS11 Functions
many tokens keep
track of the number of attempts to enter a password and do not allow further attempts after a certain point.
PKCS11 Implement
slot and token management c_getslotlist the nss calls c_getslotlist on startup or when it loads a new module, requests all the module's slots, and keeps
track of the list from that point on.
Python binding for NSS
how to report a bug python-nss bugs are currently being
tracked in the red hat bugzilla system for fedora.
gtstd.html
netscape software uses a file called secmod.db to keep
track of the modules available.
pkfnc.html
many tokens keep
track of the number of attempts to enter a password and do not allow further attempts after a certain point.
sslfnc.html
peerid an id number assigned by the application to keep
track of the ssl session associated with the peer.
Pork
old pork page pork details that haven't been moved to mdc renaming with pork sample pork application todos pork 1.0 release
tracking bug pork releases download pork here community view pork forums...
Rhino overview
security the security features in rhino provide the ability to
track the origin of a piece of code (and any pieces of code that it may in turn generate).
Shumway
there are two places where shumway bugs are
tracked: github (via issues and pull requests) manages problems relating to shumway, itself.
SpiderMonkey compartments
spidermonkey
tracks the creation of these cross-compartment wrappers and thus it knows at all times what objects from a compartment are kept alive by outside references (through cross-compartment wrappers).
Exact Stack Rooting
the downside of this efficiency is that gcpointers must be added to and removed from this rootedset
tracking structure in lifo order.
Statistics API
overview each time a garbage collection occurs, spidermonkey keeps
track of how long each phase of the collection took, along with some related data.
Tracing JIT
the monitor also keeps
track of how many times it has attempted to record a trace starting at each pc value, so if a particular pc causes too many aborted recordings, the monitor blacklists the pc and will not attempt recording it any longer.
JSAPI User Guide
using these functions ensures that the js engine will keep
track of the objects and clean them up during garbage collection, if appropriate.
JS_SetOptions
mxr id search for jsoption_dont_report_uncaught jsoption_relimit added in spidermonkey 1.8 throw an exception if a regular expression back
tracks more than n3 times, where n is the length of the input string.
Secure Development Guidelines
it would lead to a double free race conditions: prevention be very careful when working with threads, the file system, or signals
track down shared resources and lock them accordingly for signal handlers never use non-atomic operations longjmp() is a sign of badness even exit() could cause problems, but _exit() is okay deadlocks and locking issues locks are used when dealing with threads acquiring more than one lock to perform an action if a second thread acquires the same locks but in a diff...
Task graph
the result of each task is sent to treeherder where developers and sheriffs can
track the status of the push.
Gecko states
state_hot
tracked the object is hot-
tracked by the mouse, which means that its appearance has changed to indicate that the mouse pointer is located over it.
History Service Design
an additional property of a visit is the visit we have come from, this is used to
track visit chains in global history, so for example if clicking a link causes a redirect the from visit will allow to follow up the chain of visits.
An Overview of XPCOM
when a component gets created, an integer inside the component
tracks the number of clients who have an interface to the components -- also known as the reference count.
Building the WebLock UI
since the weblock component is always initialized as unlocked, we can have the client code - the javascript code in the interface - represent this state and
track it as the user manipulates the iweblock interface.
Detailed XPCOM hashtable guide
using nsthashtable as a hash-set a hash set only
tracks the existence of keys: it does not associate data with the keys.
Mozilla internal string guide
*/ void replacetabs2(nsastring& data) { int len = data.length(); char16_t *cur = data.beginwriting(); char16_t *end = data.endwriting(); // because `cur` may change during the loop,
track the position // within the string.
Index
this differs from
tracking mouse events in that touch events can be generated independently for each finger touching the screen.
Components.utils.Sandbox
this property is optional, but very useful for
tracking memory usage of add-ons and other javascript compartments.
Components object
non-standard this feature is non-standard and is not on a standards
track.
Development
bugs all javaxpcom bugs are
tracked in bugzilla, using the "core" product and "java to xpcom bridge" component.
mozIPlacesAutoComplete
toolkit/components/places/public/moziplacesautocomplete.idlscriptable this interface provides some constants used by the places autocomplete search provider as well as methods to
track opened pages for autocomplete purposes.
nsIAccessibleStates
state_hot
tracked 0x00000080 the object is hot-
tracked by the mouse, which means that its appearance has changed to indicate that the mouse pointer is located over it.
nsIContentPrefService2
in addition to caching preference values, the cache also keeps
track of preferences that are known not to exist.
nsIDOMSimpleGestureEvent
dom/interfaces/events/nsidomsimplegestureevent.idlscriptable this interface describes a mouse or
trackpad gesture event.
nsIDocumentLoader
uriloader/base/nsidocumentloader.idlscriptable this interface responsible for
tracking groups of loads that belong together (images, external scripts, and so on.) and subdocuments (iframe, frame, and so on.).
nsIDownloadHistory
there is a separate interface specifically for downloads in case embedders choose to
track downloads differently from other types of history.
nsIDownloader
if an explicit download location is specified then the resulting file will not be deleted, and it will be the callers responsibility to keep
track of the file, and so on.
nsINavHistoryResultNode
view-implementations may use this value to
track the node index in the view, for example the tree view uses this value to indicate the row in the tree that this node is at.
nsIPropertyBag
goodies obtained from window.navigator are: appcodename:"mozilla" appname:"netscape" appversion:"5.0 (windows)" battery:batterymanager buildid:"20140529161749" cookieenabled:true donot
track:"yes" geolocation:geolocation language:"en-us" mimetypes:mimetypearray mozalarms:null mozapps:xpcwrappednative_nohelper mozcameras:cameramanager mozconnection:mozconnection mozcontacts:contactmanager mozid:null mozkeyboard:xpcwrappednative_nohelper mozpay:null mozpermissionsettings:null mozphonenumberservice:phonenumberservice mozpower:mozpowermanager moztcpsocket:null online:true oscpu:"windows ...
nsIProtocolHandler
(many servers do not support utf-8 iris at the present time, so we must be careful about
tracking the native charset of the origin server.) nsiuri newuri( in autf8string aspec, in string aorigincharset, in nsiuri abaseuri ); parameters aspec the uri string in utf-8 encoding.
nsISmsRequestManager
constant value description success_no_error 0 no_signal_error 1 not_found_error 2 unknown_error 3 internal_error 4 methods addrequest()
track an already existing request object.
nsITelemetry
toolkit/components/telemetry/nsitelemetry.idlscriptable a service to gather performance data that can be
tracked over time to allow generating histograms.
nsITraceableChannel
1.0 66 introduced gecko 1.9.0.4 inherits from: nsisupports last changed in gecko 1.9.0.4 the typical way to use this interface is as follows: register for the "http-on-examine-response" notification to
track all http responses; skip redirects (responsestatus = 3xx on nsihttpchannel), since otherwise you may end up with two listeners registered for a channel; qi the channel passed as the "subject" to your observer to nsitraceablechannel, and replace the default nsistreamlistener (that passes the data to the original requester - e.g.
nsITransactionListener
editor/txmgr/idl/nsitransactionlistener.idlscriptable this interface is implemented by an object that
tracks transactions.
nsITransactionManager
editor/txmgr/idl/nsitransactionmanager.idlscriptable this interface is implemented by an object that wants to manage/
track transactions.
nsITransferable
remarks the load context is used to
track whether the transferable is storing privacy-sensitive information.
nsIUpdate
used by the extension system to
track compatibility of installed add-ons with this update.
nsIWinTaskbar
see bug 744992 for details and to
track progress on a fix.
nsIWindowMediator
xpfe/appshell/public/nsiwindowmediator.idlscriptable the window mediator is a mozilla component that keeps
track of open windows.
nsIXFormsModelElement
rebuild() signals the xforms processor to rebuild any internal data structures used to
track computational dependencies within the given xforms model.
Setting HTTP request headers
by not advertising to all sites what extensions are installed this improves both privacy (this makes it harder to
track a user known by his set of plugins, addons and extensions) and security (some plugins, addons and extensions may be known to have flaws by attackers).
Events
this reference will help you
track those events down and learn how to use them.
Index
this reference will help you
track those events down and learn how to use them.
Mail composition back end
ns_imethod addlistener(nsimsgsendlistener *alistener) = 0; ns_imethod removelistener(nsimsgsendlistener *alistener) = 0; sending listener interfaces the nsimsgsendlistener interface will let a caller keep
track of the progress and any status of a send operation.
Using the Multiple Accounts API
you should not use createinstance() to create any of the relevant objects because the account manager needs to keep
track of all of these objects as they are created.
Zombie compartments
multiple compartments can share a zone, where a zone keeps
track of things that can easily and securely be shared between related compartments such as string data and type information.
Declaring types
for example, to create a type for an array of c standard i/o file pointers (perhaps for
tracking a number of active files on disk): const file = new ctypes.structtype("file").ptr; // create file as a file * type const filearray = new ctypes.arraytype(file); // create a filearray type in this example, file is an opaque pointer we can use to refer to c file records, as defined in stdio.h.
Introduction to DOM Inspector - Firefox Developer Tools
the dom inspector keeps
track of all the windows that are open, so to inspect the dom of a particular window in the dom inspector, simply access that window as you would normally and then choose its title from this dynamically updated menulist.
Debugger.Object - Firefox Developer Tools
allocationsite if object allocation site
tracking was enabled when this debugger.object’s referent was allocated, return the javascript execution stack captured at the time of the allocation.
Debugger.Script - Firefox Developer Tools
for scripts created by eval or the function constructor, this may be a synthesized filename, starting with a valid url and followed by information
tracking how the code was introduced into the system; the entire string is not a valid url.
Debugger.Source - Firefox Developer Tools
for scripts created by eval or the function constructor, this may be a synthesized filename, starting with a valid url and followed by information
tracking how the code was introduced into the system; the entire string is not a valid url.
Debugger-API - Firefox Developer Tools
gecko-specific features while the debugger core api deals only with concepts common to any javascript implementation, it also includes some gecko-specific features: [global
tracking][global] supports debugging all the code running in a gecko instance at once—the ‘chrome debugging’ model.
Index - Firefox Developer Tools
113 the firefox javascript debugger debugger, debugging, dev tools, javascript, tools, l10n:priority the javascript debugger enables you to step through javascript code and examine or modify its state to help
track down bugs.
Network request details - Firefox Developer Tools
(see referrer-policy for a description of possible values) blocking: if the request is to a site that is associated with a known
tracker, an icon and a message are shown; otherwise, this field is not shown.
Network request list - Firefox Developer Tools
monitor displays an icon in the domain column: this gives you extra information about the security status of the request: icon meaning https weak https (for example, a weak cipher was used) failed https (for example, a certificate was invalid) http localhost indicates that the url belongs to a known
tracker that would be blocked with content blocking enabled.
AudioBufferSourceNode.loop - Web APIs
when the time specified by the loopend property is reached, playback continues at the time specified by loopstart example in this example, the audiocontext.decodeaudiodata function is used to decode an audio
track and put it into an audiobuffersourcenode.
AudioContext - Web APIs
audiocontext.createmediastream
tracksource() creates a mediastream
trackaudiosourcenode associated with a mediastream representing an media stream
track.
AudioListener.dopplerFactor - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.forwardX - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.forwardY - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.forwardZ - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.positionX - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.positionY - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.positionZ - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.setOrientation() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.setPosition() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.speedOfSound - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.upX - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.upY - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener.upZ - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
AudioListener - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
BaseAudioContext.createConvolver() - Web APIs
// grab audio
track via xhr for convolver node var soundsource, concerthallbuffer; ajaxrequest = new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuf...
BaseAudioContext.createPanner() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
BaseAudioContext - Web APIs
audiobuffers are created using audiocontext.createbuffer or returned by audiocontext.decodeaudiodata when it successfully decodes an audio
track.
Body.arrayBuffer() - Web APIs
if you need to play ogg during downloading (stream it) - consider htmlaudioelement: new audio("music.ogg").play(); in getdata() we create a new request using the request() constructor, then use it to fetch an ogg music
track.
CacheStorage.keys() - Web APIs
the keys() method of the cachestorage interface returns a promise that will resolve with an array containing strings corresponding to all of the named cache objects
tracked by the cachestorage object in the order they were created.
Using images - Web APIs
so you need to be sure to use the load event so you don't try this before the image has loaded: var img = new image(); // create new img element img.addeventlistener('load', function() { // execute drawimage statements here }, false); img.src = 'myimage.png'; // set source path if you're only using one external image this can be a good approach, but once you need to
track more than one we need to resort to something more clever.
ChannelMergerNode - Web APIs
example the following example shows how you could separate a stereo
track (say, a piece of music), and process the left and right channel differently.
ChannelSplitterNode - Web APIs
example the following simple example shows how you could separate a stereo
track (say, a piece of music), and process the left and right channel differently.
Console.timeEnd() - Web APIs
in addition, the call to timeend() has the additional information, "timer ended" to make it obvious that the timer is no longer
tracking time.
Console.timeLog() - Web APIs
in addition, the call to timeend() has the additional information, "timer ended" to make it obvious that the timer is no longer
tracking time.
ConvolverNode.buffer - Web APIs
// grab audio
track via xhr for convolver node var soundsource, concerthallbuffer; ajaxrequest = new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuf...
ConvolverNode.normalize - Web APIs
// grab audio
track via xhr for convolver node var soundsource, concerthallbuffer; ajaxrequest = new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuf...
Document: animationiteration event - Web APIs
examples this code uses animationiteration to keep
track of the number of iterations an animation has completed: let iterationcount = 0; document.addeventlistener('animationiteration', () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }); the same, but using the onanimationiteration event handler property: let iterationcount = 0; document.onanimationiteration = () => { iterationcount++; console.log(`ani...
Element: mouseover event - Web APIs
the mouseover event is fired at an element when a pointing device (such as a mouse or
trackpad) is used to move the cursor onto the element or one of its child elements.
Element: mouseup event - Web APIs
the mouseup event is fired at an element when a button on a pointing device (such as a mouse or
trackpad) is released while the pointer is located inside it.
Element: mousewheel event - Web APIs
if the device supports continuous scroll (e.g.,
trackpad of macbook or mouse wheel which can be turned smoothly), the value is computed from accelerated scroll amount.
Element: webkitmouseforcedown event - Web APIs
after a mousedown event has been fired at the element, if and when sufficient pressure has been applied to the mouse or
trackpad button to qualify as a "force click," safari begins sending webkitmouseforcedown events to the element.
Element - Web APIs
webkitmouseforcechanged fired each time the amount of pressure changes on the
trackpadtouchscreen.
Event - Web APIs
vent keyboardevent mediastreamevent messageevent mouseevent mutationevent offlineaudiocompletionevent overconstrainederror pagetransitionevent paymentrequestupdateevent pointerevent popstateevent progressevent relatedevent rtcdatachannelevent rtcidentityerrorevent rtcidentityevent rtcpeerconnectioniceevent sensorevent storageevent svgevent svgzoomevent timeevent touchevent
trackevent transitionevent uievent userproximityevent webglcontextevent wheelevent constructor event() creates an event object, returning it to the caller.
FileSystemDirectoryReader - Web APIs
because this is a non-standard api, whose specification is not currently on a standards
track, it's important to keep in mind that not all browsers implement it, and those that do may implement only small portions of it.
FileSystemEntry - Web APIs
because this is a non-standard api, whose specification is not currently on a standards
track, it's important to keep in mind that not all browsers implement it, and those that do may implement only small portions of it.
File and Directory Entries API - Web APIs
because this is a non-standard api, whose specification is not currently on a standards
track, it's important to keep in mind that not all browsers implement it, and those that do may implement only small portions of it.
HTMLElement: animationiteration event - Web APIs
bubbles yes cancelable no interface animationevent event handler property onanimationiteration examples this code uses animationiteration to keep
track of the number of iterations an animation has completed: const animated = document.queryselector('.animated'); let iterationcount = 0; animated.addeventlistener('animationiteration', () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }); the same, but using the onanimationiteration event handler property: const animated = document.queryselector('.animat...
HTMLLinkElement.as - Web APIs
the as property of the htmllinkelement interface returns a domstring representing the type of content being loaded by the html link, one of "script", "style", "image", "video", "audio", "
track", "font", "fetch".
HTMLMediaElement.autoplay - Web APIs
note: sites which automatically play audio (or videos with an audio
track) can be an unpleasant experience for users, so it should be avoided when possible.
HTMLSelectElement - Web APIs
have the following html <select id='s'> <option>first</option> <option selected>second</option> <option>third</option> </select> */ var select = document.getelementbyid('s'); // return the index of the selected option console.log(select.selectedindex); // 1 // return the value of the selected option console.log(select.options[select.selectedindex].value) // second a better way to
track changes to the user's selection is to watch for the change event to occur on the <select>.
MediaCapabilities.decodingInfo() - Web APIs
example //create media configuration to be tested const mediaconfig = { type : 'file', // or 'media-source' audio : { contenttype : "audio/ogg", // valid content type channels : 2, // audio channels used by the
track bitrate : 132700, // number of bits used to encode 1s of audio samplerate : 5200 // number of audio samples making up that 1s.
MediaImage - Web APIs
its contents can be displayed by the user agent in appropriate contexts, like player interface to show the current playing video or audio
track.
MediaMetadata.MediaMetadata() - Web APIs
album: "podcast name", artwork: [{src: "podcast.jpg"}] }); navigator.mediasession.setactionhandler('play', function() {}); navigator.mediasession.setactionhandler('pause', function() {}); navigator.mediasession.setactionhandler('seekbackward', function() {}); navigator.mediasession.setactionhandler('seekforward', function() {}); navigator.mediasession.setactionhandler('previous
track', function() {}); navigator.mediasession.setactionhandler('next
track', function() {}); } specifications specification status comment media session standardthe definition of 'mediametadata()' in that specification.
MediaRecorder.ignoreMutedMedia - Web APIs
the ignoremutedmedia property of the mediarecorder interface indicates whether the mediarecorder instance will record input, when the input mediastream
track is muted.
MediaRecorder.onerror - Web APIs
this also happens when a mediastream
track within the stream is marked as isolated due to the peeridentity constraint on the source stream.
MediaSession.metadata - Web APIs
album: "podcast name", artwork: [{src: "podcast.jpg"}] }); navigator.mediasession.setactionhandler('play', function() {}); navigator.mediasession.setactionhandler('pause', function() {}); navigator.mediasession.setactionhandler('seekbackward', function() {}); navigator.mediasession.setactionhandler('seekforward', function() {}); navigator.mediasession.setactionhandler('previous
track', function() {}); navigator.mediasession.setactionhandler('next
track', function() {}); } specifications specification status comment media session standardthe definition of 'mediasession.metadata' in that specification.
MediaSession - Web APIs
album: "podcast name", artwork: [{src: "podcast.jpg"}] }); navigator.mediasession.setactionhandler('play', function() {}); navigator.mediasession.setactionhandler('pause', function() {}); navigator.mediasession.setactionhandler('seekbackward', function() {}); navigator.mediasession.setactionhandler('seekforward', function() {}); navigator.mediasession.setactionhandler('previous
track', function() {}); navigator.mediasession.setactionhandler('next
track', function() {}); } the following example sets up event handlers for pausing and playing: var audio = document.queryselector("#player"); audio.src = "song.mp3"; navigator.mediasession.setactionhandler('play', play); navigator.mediasession.setactionhandler('pause', pause); function play() { audio.play(); navigator.media...
MediaSettingsRange - Web APIs
const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const
track = mediastream.getvideo
tracks()[0]; imagecapture = new imagecapture(
track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.
track.getsettings(); input.min = photocapabilities.imagewidth.min; input.max = photocapabilities.imagewidth.max; input.step = photocapabilities.imagewidth.step; return imagecapture.getphotosettings(); ...
MediaSource - Web APIs
mediasource.activesourcebuffers read only returns a sourcebufferlist object containing a subset of the sourcebuffer objects contained within mediasource.sourcebuffers — the list of objects providing the selected video
track, enabled audio
tracks, and shown/hidden text
tracks.
MediaStream.ended - Web APIs
this property has been removed from the specification; you should instead rely on the ended event or check the value of mediastream
track.readystate to see if its value is "ended" for the
track or
tracks you want to ensure have finished playing.
MediaStreamAudioSourceOptions.mediaStream - Web APIs
syntax mediastreamaudiosourceoptions = { mediastream: audiosourcestream; } mediastreamaudiosourceoptions.mediastream = audiosourcestream; value a mediastream representing the stream from which to use a mediastream
track as the source of audio for the node.
MediaStream Recording API - Web APIs
create a mediarecorder object, specifying the source stream and any desired options (such as the container's mime type or the desired bit rates of its
tracks).
MutationObserver.observe() - Web APIs
theoretically, this means that if you keep
track of the mutationrecord objects describing the changes that occur, you should be able to "undo" the changes, rewinding the dom back to its initial state.
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.
Online and offline events - Web APIs
references 'online/offline events' section from the whatwg web applications 1.0 specification the bug
tracking online/offline events implementation in firefox and a follow-up a simple test case an explanation of online/offline events ...
NodeIterator.previousNode() - Web APIs
erator.previousnode(); example var nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false // this optional argument is not used any more ); currentnode = nodeiterator.nextnode(); // returns the next node previousnode = nodeiterator.previousnode(); // same result, since we back
tracked to the previous node specifications specification status comment domthe definition of 'nodeiterator.previousnode' in that specification.
Page Visibility API - Web APIs
the user doesn't lose their place in the video, the video's sound
track doesn't interfere with audio in the new foreground tab, and the user doesn't miss any of the video in the meantime.
PannerNode.distanceModel - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
PannerNode.maxDistance - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
PannerNode.panningModel - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
PannerNode.setOrientation() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
PannerNode.setPosition() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
PannerNode.setVelocity() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
PannerNode - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a
track on a boom box and then walk around the boom box to see how the sound changes!
PerformanceEventTiming - Web APIs
// keep
track of whether (and when) the page was first hidden, see: // https://github.com/w3c/page-visibility/issues/29 // note: ideally this check would be performed in the document <head> // to avoid cases where the visibility state changes before this code runs.
Pinch zoom gestures - Web APIs
function pointerup_handler(ev) { log(ev.type, ev); // remove this pointer from the cache and reset the target's // background and border remove_event(ev); ev.target.style.background = "white"; ev.target.style.border = "1px solid black"; // if the number of pointers down is less than two then reset diff
tracker if (evcache.length < 2) { prevdiff = -1; } } application ui the application uses a <div> element for the touch area and provides buttons to enable logging and to clear the log.
RTCDTMFSender.insertDTMF() - Web APIs
return value undefined exceptions invalidstateerror the dtmf tones couldn't be sent because the
track has been stopped, or is in a read-only or inactive state.
RTCDTMFSender - Web APIs
you gain access to the connection's rtcdtmfsender through the rtcrtpsender.dtmf property on the audio
track you wish to send dtmf with.
RTCDtlsTransport - Web APIs
for this reason, you'll sometimes see separate transports created at first, one for each
track, then see them get bundled up once it's known that bundling is possible.
RTCInboundRtpStreamStats - Web APIs
trackid a string which identifies the statistics object representing the receiving
track; this object is one of two types: rtcreceiveraudio
trackattachmentstats or rtcreceivervideo
trackattachmentstats.
RTCOutboundRtpStreamStats - Web APIs
trackid the id of the rtcsenderaudio
trackattachmentstats or rtcsendervideo
trackattachmentstats object containing the current
track attachment to the rtcrtpsender responsible for this stream.
RTCPeerConnection.createOffer() - Web APIs
the sdp offer includes information about any mediastream
tracks already attached to the webrtc session, codec, and options supported by the browser, and any candidates already gathered by the ice agent, for the purpose of being sent over the signaling channel to a potential peer to request a connection or to update the configuration of an existing connection.
RTCPeerConnection.getReceivers() - Web APIs
each rtp receiver manages the reception and decoding of data for a mediastream
track on an rtcpeerconnection syntax var receivers = rtcpeerconnection.getreceivers(); return value an array of rtcrtpreceiver objects, one for each
track on the connection.
RTCPeerConnection.getStreamById() - Web APIs
example var stream = pc.getstreambyid(my
trackid); if (stream) { console.log("found stream: " + stream.id); } polyfill running the following code before any other code will create rtcpeerconnection.prototype.getstreambyid() if it's not natively available.
RTCRtpContributingSource - Web APIs
timestamp optional a domhighrestimestamp indicating the most recent time at which a frame originating from this source was delivered to the receiver's mediastream
track specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpcontributingsource' in that specification.
RTCRtpEncodingParameters - Web APIs
scaleresolutiondownby only used for senders whose
track's kind is video, this is a double-precision floating-point value specifying a factor by which to scale down the video during encoding.
RTCRtpReceiver.getParameters() - Web APIs
the getparameters() method of the rtcrtpreceiver interface returns an rtcrtpreceiveparameters object describing the current configuration for the encoding and transmission of media on the receiver's
track.
RTCRtpSendParameters - Web APIs
encodings an array of rtcrtpencodingparameters objects, each specifying the parameters for a single codec that could be used to encode the
track's media.
RTCRtpSender.getParameters() - Web APIs
the getparameters() method of the rtcrtpsender interface returns an rtcrtpsendparameters object describing the current configuration for the encoding and transmission of media on the sender's
track.
RTCRtpTransceiver.stop() - Web APIs
the receiver then stops receiving media; the receiver's
track is stopped, and the transceiver's direction is changed to stopped, and renegotiation is triggered by sending a negotiationneeded event to the rtcpeerconnection.
RTCRtpTransceiverInit - Web APIs
streams optional a list of mediastream objects to add to the transceiver'srtcrtpreceiver; when the remote peer's rtcpeerconnection's
track event occurs, these are the streams that will be specified by that event.
TimeRanges - Web APIs
the timeranges interface is used to represent a set of time ranges, primarily for the purpose of
tracking which portions of media have been buffered when loading it for use by the <audio> and <video> elements.
TouchList - Web APIs
for example, if the user has three fingers on the touch surface (such as a screen or
trackpad), the corresponding touchlist object would have one touch object for each finger, for a total of three entries.
Taking still photos with WebRTC - Web APIs
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 media
trackconstraints object passed into getusermedia().
Writing WebSocket servers - Web APIs
keeping
track of clients this doesn't directly relate to the websocket protocol, but it's worth mentioning here: your server must keep
track of clients' sockets so you don't keep handshaking again with clients who have already completed the handshake.
WebXR application life cycle - Web APIs
this serves as preparation for the next few articles in these webxr guides, which cover starting up and shutting down a webxr session, geometry, simulating cameras, spatial
tracking, and more.
Web Audio API best practices - Web APIs
both are legitimate ways of working, however, it's more common to use the former when you are working with full-length
tracks, and the latter when working with shorter, more sample-like
tracks.
Web audio spatialization basics - Web APIs
the panner node does some very involved maths under the hood; there are a number of tests here so you can keep
track of the status of the inner workings of this node across different platforms.
Window: animationiteration event - Web APIs
examples this code uses animationiteration to keep
track of the number of iterations an animation has completed: let iterationcount = 0; window.addeventlistener('animationiteration', () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }); the same, but using the onanimationiteration event handler property: let iterationcount = 0; window.onanimationiteration = () => { iterationcount++; console.log(`animati...
Window.sessionStorage - Web APIs
// get the text field that we're going to
track let field = document.getelementbyid("field"); // see if we have an autosave value // (this will only happen if the page is accidentally refreshed) if (sessionstorage.getitem("autosave")) { // restore the contents of the text field field.value = sessionstorage.getitem("autosave"); } // listen for changes in the text field field.addeventlistener("change", function() { // and save the result...
XMLHttpRequest.upload - Web APIs
it is an opaque object, but because it's also an xmlhttprequesteventtarget, event listeners can be attached to
track its process.
XRInputSourceArray.entries() - Web APIs
let sources = xrsession.inputsources; for (let input of sources.entries()) { if (input.gamepad) { checkgamepad(input.gamepad); } else { 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-point...
XRInputSourceArray.forEach() - Web APIs
let inputsources = xrsession.inputsources; inputsources.foreach((input) => { if (input.gamepad) { checkgamepad(input.gamepad); } else { 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, 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 tr...
XRInputSourceEvent - Web APIs
the webxr device api's xrinputsourceevent interface describes an event which has occurred on a webxr user input device such as a hand controller, gaze
tracking system, or motion
tracking system.
XRInputSourcesChangeEvent - Web APIs
xrsession.addeventlistener("inputsourceschange", oninputsourceschange); function oninputsourceschange(event) { for (let input of event.added) { if (input.targetraymode == "
tracked-pointer") { loadcontrollermesh(input); } } } you can also add a handler for inputsourceschange events by setting the oninputsourceschange event handler: xrsession.oninputsourceschange = oninputsourceschange; specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent' in that specification.
XRPose - Web APIs
xrpose.emulatedposition read only a boolean value which is false if the position and orientation given by transform is obtained directly from a full six degree of freedom (6dof) xr device (that is, a device which
tracks not only the pitch, yaw, and roll of the head but also the forward, backward, and side-to-side motion of the viewer).
XRSessionInit - Web APIs
by session type, those are: reference space type user consent rquirement feature policy requirement bounded-floor always required xr-spatial-
tracking local always required for inline sessions xr-spatial-
tracking local-floor always required xr-spatial-
tracking unbounded always required xr-spatial-
tracking viewer always required — ...
XRSessionMode - Web APIs
inline sessions can be presented in either mono or stereo mode, and may or may not have viewer
tracking available.
XRSystem: devicechange event - Web APIs
bubbles no cancelable no interface event event handler xrsystem.ondevicechange usage notes devicechange events are not delivered if the document which owns the xrsystem object has been granted permission to do so through the xr-spatial-
tracking feature policy.
XRView.eye - Web APIs
port(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); renderscene(gl, view); } } for each of the views, the value of eye is checked and if it's either left or right, we check to see if the body.lefteye.injured or body.righteye.injured property is true; if so, we call a function updateinjury() on that eye to do things such as allow a bit of healing to occur,
track the progress of a poison effect, or the like, as appropriate for the game's needs.
XRViewerPose - Web APIs
usage notes the xrviewerpose object is used to describe the state of a viewer of a webxr scene as it's
tracked by the user's xr hardware.
ARIA annotations - Accessibility
<ul> <li><label>apple: <input type="radio" name="fruit" value="apple"></label></li> <li><label>orange: <input type="radio" name="fruit" value="orange"></label></li> <li><label>banana: <input type="radio" name="fruit" value="banana"></label></li> </ul> </form> </section> insertions and deletions a common wish in online document systems like google docs is to be able to
track changes, to see what reviewers or editors have suggested as changes to the text, before the managing editor or author accepts or rejects those changes.
ARIA: Navigation Role - Accessibility
examples <div role="navigation" aria-label="customer service"> <ul> <li><a href="#">help</a></li> <li><a href="#">order
tracking</li> <li><a href="#">shipping & delivery</a></li> <li><a href="#">returns</a></li> <li><a href="#">contact us</a></li> <li><a href="#">find a store</a></li> </ul> </div> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.
Keyboard - Accessibility
this includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or
trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
al div { color: black; -moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; } <div>lorem</div> firefox scrollbarthumb-vertical div { color: black; -moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; } <div>lorem</div> firefox scrollbar
track-horizontal div { color: black; -moz-appearance: scrollbar
track-horizontal; -webkit-appearance: scrollbar
track-horizontal; } <div>lorem</div> firefox scrollbar
track-vertical div { color: black; -moz-appearance: scrollbar
track-vertical; -webkit-appearance: scrollbarbar
track-vertical; } <div>lorem</div> firefox ...
Cross-browser audio basics - Developer guides
myaudio.addeventlistener("ended", function() { //do something once audio
track has finished playing }); volumechange the volumechange event signifies that the volume has changed; that includes being muted.
Audio and video manipulation - Developer guides
use this web audio node type an audio
track from an html <audio> or <video> element mediaelementaudiosourcenode a plain raw audio data buffer in memory audiobuffersourcenode an oscillator generating a sine wave or other computed waveform oscillatornode an audio
track from webrtc (such as the microphone input you can get using getusermedia().
Event developer guide - Developer guides
these are special movements that can be made with a mouse or
trackpad and can be interpreted to perform specific tasks.mutation eventsmutation events provide a mechanism for a web page or an extension to get notified about changes made to the dom.
User input and controls - Developer guides
examples
tracking multiple touch points at a time this example
tracks multiple touch points at a time, allowing the user to draw in a <canvas> with more than one finger at a time.
Writing forward-compatible websites - Developer guides
avoid depending on cutting-edge nonstandard features even if the feature is prefixed, using it could be dangerous: as the specification evolves the browser's prefixed implementation can likewise change to
track the specification.
<link>: The External Resource Link element - HTML: Hypertext Markup Language
font css @font-face image <img> and <picture> elements with srcset or imageset attributes, svg <image> elements, css *-image rules object <object> elements script <script> elements, worker importscripts style <link rel=stylesheet> elements, css @import
track <
track> elements video <video> elements worker worker, sharedworker crossorigin this enumerated attribute indicates whether cors must be used when fetching the resource.
Common MIME types - HTTP
icalendar format text/calendar .jar java archive (jar) application/java-archive .jpeg .jpg jpeg images image/jpeg .js javascript text/javascript, per the following specifications: https://html.spec.whatwg.org/multipage/#scriptinglanguages https://html.spec.whatwg.org/multipage/#dependencies:willful-violation https://data
tracker.ietf.org/doc/draft-ietf-dispatch-javascript-mjs/ .json json format application/json .jsonld json-ld format application/ld+json .mid .midi musical instrument digital interface (midi) audio/midi audio/x-midi .mjs javascript module text/javascript .mp3 mp3 audio audio/mpeg .mpeg mpeg video video/...
Configuring servers for Ogg media - HTTP
serve media with the correct mime type *.ogg and *.ogv files containing video (possibly with an audio
track as well, of course), should be served with the video/ogg mime type.
CSP: media-src - HTTP
examples violation cases given this csp header: content-security-policy: media-src https://example.com/ the following <audio>, <video> and <
track> elements are blocked and won't load: <audio src="https://not-example.com/audio"></audio> <video src="https://not-example.com/video"> <
track kind="subtitles" src="https://not-example.com/subtitles"> </video> specifications specification status comment content security policy level 3the definition of 'media-src' in that specification.
Feature-Policy: xr - HTTP
this feature policy directive was at one point defined as xr (but implemented in chrome as vr), use xr-spatial-
tracking instead.
Feature-Policy - HTTP
xr-spatial-
tracking controls whether or not the current document is allowed to use the webxr device api to interact with a webxr session.
Sec-Fetch-Dest - HTTP
audio sec-fetch-dest: audioworklet sec-fetch-dest: document sec-fetch-dest: embed sec-fetch-dest: empty sec-fetch-dest: font sec-fetch-dest: image sec-fetch-dest: manifest sec-fetch-dest: nested-document sec-fetch-dest: object sec-fetch-dest: paintworklet sec-fetch-dest: report sec-fetch-dest: script sec-fetch-dest: serviceworker sec-fetch-dest: sharedworker sec-fetch-dest: style sec-fetch-dest:
track sec-fetch-dest: video sec-fetch-dest: worker sec-fetch-dest: xslt sec-fetch-dest: audioworklet sec-fetch-dest: audioworklet values audio audioworklet document embed empty font image manifest object paintworklet report script serviceworker sharedworker style
track video worker xslt nested-document examples todo specifications ...
Via - HTTP
it is used for
tracking message forwards, avoiding request loops, and identifying the protocol capabilities of senders along the request/response chain.
JavaScript language resources - JavaScript
you can participate in or just
track the work on the next revisions of the ecmascript language specification, code-named "harmony", and the ecmascript internationalization api specification via public wiki and the es-discuss mailing list linked from ecmascript.org.
The arguments object - JavaScript
e behavior as exhibited by all strict-mode functions, regardless of the type of variables they are passed): function func(a = 55) { arguments[0] = 99; // updating arguments[0] does not also update a console.log(a); } func(10); // 10 and also: function func(a = 55) { a = 99; // updating a does not also update arguments[0] console.log(arguments[0]); } func(10); // 10 and also: // an un
tracked default parameter function func(a = 55) { console.log(arguments[0]); } func(); // undefined specifications specification ecmascript (ecma-262)the definition of 'arguments exotic objects' in that specification.
JSON.stringify() - JavaScript
note: if you wish the replacer to distinguish an initial object from a key with an empty string property (since both would give the empty string as key and potentially an object as value), you will have to keep
track of the iteration count (if it is beyond the first iteration, it is a genuine empty string key).
Strict mode - JavaScript
arguments[i] does not
track the value of the corresponding named argument, nor does a named argument
track the value in the corresponding arguments[i].
Web Performance
additional tips like removing audio
tracks from background videos can improve performance even further.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
path measured in text elements coordinate system implementation status unknown embedded content change notes <video> implementation status unknown <audio> implementation status unknown <iframe> implementation status unknown <canvas> implementation status unknown <source> implementation status unknown <
track> implementation status unknown painting change notes paint-order implemented (bug 828805) will-change instead of buffered-rendering implementation status unknown context-fill and context-stroke paint values implemented (bug 719286 (firefox 18.0 / thunderbird 18.0 / seamonkey 2.15) and bug 798843 (firefox 26.0 / thunderbird 26.0 / seam...