Sergey Krashevich
ef38468fa7
This commit improves the visibility and aesthetics of form elements (input, select, textarea) and horizontal rules (hr) in dark mode by adjusting their styles. Specifically, it sets a darker background color, lighter text color, and modifies border colors to ensure these elements are both visually appealing and easily distinguishable against the dark background. Additionally, placeholder text color has been adjusted to maintain readability without being overly prominent. The removal of a fixed width on the navigation bar (`nav`) style is aimed at enhancing responsiveness and flexibility in various screen sizes, promoting a better user experience across devices. These changes contribute to a more cohesive and accessible dark mode theme, aligning with modern web design practices that prioritize user comfort and interface adaptability.
Browser support
ECMAScript 2019 (ES10) supported by iOS 12 (iPhone 5S, iPad Air, iPad Mini 2, etc.).
But ECMAScript 2017 (ES8) almost fine (es6 + async) and recommended for React+TypeScript.
Known problems
- Autoplay doesn't work for WebRTC in Safari read more.
HTML5
1. Autoplay video tag
Video auto play is not working
Recently many browsers can only autoplay the videos with sound off, so you'll need to add muted attribute to the video tag too
<video id="video" autoplay controls playsinline muted></video>
2. [Safari] pc.createOffer
Don't work in Desktop Safari:
pc.createOffer({offerToReceiveAudio: true, offerToReceiveVideo: true})
Should be replaced with:
pc.addTransceiver('video', {direction: 'recvonly'});
pc.addTransceiver('audio', {direction: 'recvonly'});
pc.createOffer();
3. pc.ontrack
TODO
pc.ontrack = ev => {
const video = document.getElementById('video');
// when audio track not exist in Chrome
if (ev.streams.length === 0) return;
// when audio track not exist in Firefox
if (ev.streams[0].id[0] === '{') return;
// when stream already init
if (video.srcObject !== null) return;
video.srcObject = ev.streams[0];
}
Chromecast 1
2023-02-02. Error:
InvalidStateError: Failed to execute 'addTransceiver' on 'RTCPeerConnection': This operation is only supported in 'unified-plan'. 'unified-plan' will become the default behavior in the future, but it is currently experimental. To try it out, construct the RTCPeerConnection with sdpSemantics:'unified-plan' present in the RTCConfiguration argument.
User-Agent: Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.47 Safari/537.36 CrKey/1.36.159268
https://webrtc.org/getting-started/unified-plan-transition-guide?hl=en
Useful links
- https://www.webrtc-experiment.com/DetectRTC/
- https://divtable.com/table-styler/
- https://www.chromium.org/audio-video/
- https://web.dev/i18n/en/fast-playback-with-preload/#manual_buffering
- https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API
- https://chromium.googlesource.com/external/w3c/web-platform-tests/+/refs/heads/master/media-source/mediasource-is-type-supported.html
- https://googlechrome.github.io/samples/media/sourcebuffer-changetype.html
- https://chromestatus.com/feature/5100845653819392
- https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari
- https://dirask.com/posts/JavaScript-supported-Audio-Video-MIME-Types-by-MediaRecorder-Chrome-and-Firefox-jERn81
- https://privacycheck.sec.lrz.de/active/fp_cpt/fp_can_play_type.html