# video踩雷日記

現在在做的東西是一個遠端監測的軟體，透過websocket將video stream串接到監控者的電腦上播放。

//React code
const playVideo = () => {
    //串接ws並播放
}

useEffect(() = > {
    playVideo()
}, [])

<video autoPlay playsInline></video>

<br/>

playVideo內的log顯示出ws連線正常，web畫面上的video也有反應，因為接到較大的電腦螢幕畫面直播，所以整個block被撐開。

但是影片一片空白完全沒畫面，也沒有錯誤訊息，原本以為是串接的內容有誤，但那是[mtxmedia](https://github.com/bluenviron/mediamtx/blob/586df289e236417f4aa08a549510156130197bfd/internal/core/webrtc_publish_index.html#L4)中的code修改而來的，在範例中也運作正常，一時找不到問題在哪，卡了我大半天。
<br/>
結果最後在一陣亂找下，發現問題點在**Autoplay policy**，目前主流瀏覽器都有一個規範，如果要讓影片自動播放，需要靜音影片，這是瀏覽器開發團隊為了提升使用者體驗而加入的規範。

我的情況是傳過來的stream不含音源，所以無視了muted設定，然後也不需要控制選項，所以關掉controls，結果導致沒發現stream其實沒開始播，以為是串流有問題。

//加個muted就能自動播了 (或是加上controls讓使用者自行決定何時開始播)

<video autoPlay muted playsInline></video>

<br/>

解決之後覺得自己像個腦殘，但還是記錄一下。

###### tags: `video` `websocket`