Render HTMLAudioElement DOM element with React

Question

我在我的项目中使用 Twillio JS API 来显示来自多个来源的视频输出。此 API 生成可附加到页面的 DOM 视频/音频元素的枚举，如下所示：

let tracks = TwillioVideo.createLocalTracks({
video: { deviceId: this.state.selectedVideoInput.deviceId },
audio: { deviceId: this.state.selectedAudioInput.deviceId }
}
//Find dom element to attach tracks to
let previewContainer = document.getElementById('local-media')
//Attach all tracks
this.setState({localTracks: tracks})
tracks.forEach(track => previewContainer.appendChild(track.attach()))

track.attach()生成一个可以附加的 dom 元素，但它不是我可以放在 React 状态的东西，所以它可以像这样呈现：

<div id="local-media">{this.state.localTracks.map(track => track.attach()}</div>

如果我真的尝试这样做，我会得到：

未处理的拒绝(不变冲突(：对象不能作为 React child(找到：[object HTMLAudioElement](。如果您打算渲染 子项的集合，请改用数组。

编辑1：我能够通过这样做摆脱错误：

{this.state.localTracks.map(track => track.attach().Element)}

但它没有返回可渲染的 HTML，而是undefined

Answer 1

Twilio开发者布道者在这里。

Twilio Video 中的attach方法可以接受一个参数，这是一个HTMLMediaElement，并将媒体附加到该元素。

我建议您创建一个组件，可用于渲染每个媒体轨道的媒体，然后使用 React refs 获取指向 DOM 元素的指针。

像这样：

import React, { Component, createRef } from 'react';
class Participant extends Component {
constructor(props) {
super(props);
this.video = createRef();
this.audio = createRef();
this.trackAdded = this.trackAdded.bind(this);
}
trackAdded(track) {
if (track.kind === 'video') {
track.attach(this.video.current);
} else if (track.kind === 'audio') {
track.attach(this.audio.current);
}
}
componentDidMount() {
const videoTrack = Array.from(
this.props.participant.videoTracks.values()
)[0];
if (videoTrack) {
videoTrack.attach(this.video.current);
}
const audioTrack = Array.from(
this.props.participant.audioTracks.values()
)[0];
if (audioTrack) {
audioTrack.attach(this.audio.current);
}
this.props.participant.on('trackAdded', this.trackAdded);
}
render() {
return (
<div className="participant">
<h3>{this.props.participant.identity}</h3>
<video ref={this.video} autoPlay={true} muted={true} />
<audio ref={this.audio} autoPlay={true} muted={true} />
</div>
);
}
}
export default Participant;

然后，对于聊天中的每个参与者，您可以呈现其中一个组件。

让我知道这是否有帮助。