我在我的項(xiàng)目中使用 Twillio JS API 來(lái)顯示來(lái)自多個(gè)來(lái)源的視頻輸出。此 API 生成可附加到頁(yè)面的 DOM 視頻/音頻元素的枚舉,如下所示:let tracks = TwillioVideo.createLocalTracks({ video: { deviceId: this.state.selectedVideoInput.deviceId }, audio: { deviceId: this.state.selectedAudioInput.deviceId }}//Find dom element to attach tracks tolet previewContainer = document.getElementById('local-media')//Attach all tracksthis.setState({localTracks: tracks})tracks.forEach(track => previewContainer.appendChild(track.attach()))track.attach() 生成一個(gè)可以附加的 dom 元素,但它不是我可以放入 React 狀態(tài)的東西,所以它可以像這樣呈現(xiàn):<div id="local-media">{this.state.localTracks.map(track => track.attach()}</div>如果我實(shí)際上嘗試這樣做,我會(huì)得到:Unhandled Rejection (Invariant Violation):對(duì)象作為 React 子對(duì)象無(wú)效(找到:[object HTMLAudioElement])。如果您打算渲染一組子項(xiàng),請(qǐng)改用數(shù)組。編輯 1: 我能夠通過(guò)這樣做來(lái)擺脫錯(cuò)誤:{this.state.localTracks.map(track => track.attach().Element)}但它沒(méi)有返回渲染HTML,但undefined代替
使用 React 渲染 HTMLAudioElement DOM 元素
不負(fù)相思意
2021-10-21 14:09:42