web-dev-qa-db-fra.com

Comment définir srcObject sur un élément audio avec React

J'ai essayé de définir l'attribut src d'une balise audio dans React, mais la piste n'est jamais lue.

playTrack(track) {
    const stream = new MediaStream()
    stream.addTrack(track)
    this.setState(() => ({ stream }))
}

render() {
    return (
        <audio src={this.state.stream || null} controls volume="true" autoPlay />
    )
}

Lorsque je vérifie le débogueur de chrome, cela indique que la source de la balise audio est [MediaStream], mais que rien n’est lu et que tous les contrôles sont restés estompés.

Faire cela au lieu de définir l'état fonctionne, mais je suppose que ceci est très mal vu dans React.

const audio = document.querySelector('audio')
audio.srcObject = stream
reactjsweb-audioweb-audio-api
6
Erik

Si le stockage du flux dans l'état n'est pas obligatoire, vous pouvez mettre à jour la propriété srcObject à l'aide de ref:

playTrack(track) {
    const stream = new MediaStream()
    stream.addTrack(track)
    this.audio.srcObject = stream;
}

render() {
    return (
        <audio ref={audio => {this.audio = audio}} controls volume="true" autoPlay />
    )
}

Si vous avez besoin d'accéder au flux depuis l'état, vous pouvez essayer ceci

<audio ref={audio => { audio.srcObject = this.state.stream }} />

La raison pour laquelle src={this.state.stream} ne fonctionne pas est que src s'attend à une chaîne qui représente l'URL de la ressource audio, alors que this.state.stream est un objet MediaStream.

audio.src et audio.srcObject sont des propriétés différentes qui attendent différents types de valeur.

12
FuzzyTree

Pour ceux qui utilisent des accessoires et n'aiment pas créer de fonction sur chaque rendu:

constructor(props) {
  super(props)
  this.videoRef = React.createRef()
}

render() {
  return <video ref={this.videoRef}/>
}

componentDidMount() {
  this.updateVideoStream()    
}

componentDidUpdate() {
  this.updateVideoStream()
}

updateVideoStream() {
  if (this.videoRef.current.srcObject !== this.props.stream) {
    this.videoRef.current.srcObject = this.props.stream
  }
}
2
Alexander Danilov