Alexey Khit
75 lines
2.4 KiB
Markdown
75 lines
2.4 KiB
Markdown
# HTML5
|
|
|
|
**1. Autoplay video tag**
|
|
|
|
[Video auto play is not working](https://stackoverflow.com/questions/17994666/video-auto-play-is-not-working-in-safari-and-chrome-desktop-browser)
|
|
|
|
> Recently many browsers can only autoplay the videos with sound off, so you'll need to add muted attribute to the video tag too
|
|
|
|
```html
|
|
|
|
<video id="video" autoplay controls playsinline muted></video>
|
|
```
|
|
|
|
**2. [Safari] pc.createOffer**
|
|
|
|
Don't work in Desktop Safari:
|
|
|
|
```js
|
|
pc.createOffer({offerToReceiveAudio: true, offerToReceiveVideo: true})
|
|
```
|
|
|
|
Should be replaced with:
|
|
|
|
```js
|
|
pc.addTransceiver('video', {direction: 'recvonly'});
|
|
pc.addTransceiver('audio', {direction: 'recvonly'});
|
|
pc.createOffer();
|
|
```
|
|
|
|
**3. pc.ontrack**
|
|
|
|
TODO
|
|
|
|
```js
|
|
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
|