>

src 를 설정하려고했습니다  React의 오디오 태그 속성이지만 트랙이 재생되지 않습니다.

playTrack(track) {
    const stream = new MediaStream()
    stream.addTrack(track)
    this.setState(() => ({ stream }))
}
render() {
    return (
        <audio src={this.state.stream || null} controls volume="true" autoPlay />
    )
}

크롬 디버거를 체크인하면 오디오 태그에 [MediaStream] 가 있음을 나타냅니다  소스로 설정했지만 아무 것도 재생되지 않고 모든 컨트롤이 회색으로 유지됩니다.

상태를 설정하는 대신 이것을하는 것은 효과가 있지만, 나는 이것이 React에서 매우 찌푸린 것으로 가정합니다.

const audio = document.querySelector('audio')
audio.srcObject = stream

  • 답변 # 1

    스트림에 상태를 저장하지 않아도되는 경우 srcObject 를 업데이트 할 수 있습니다   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 />
        )
    }
    
    

    상태에서 스트림에 액세스해야하는 경우 시도해보십시오

    <audio ref={audio => { audio.srcObject = this.state.stream }} />
    
    
    src={this.state.stream} 이유   src 때문에 작동하지 않습니다   this.state.stream 동안 오디오 리소스의 URL을 나타내는 문자열이 필요합니다.   MediaStream 입니다  개체.

    audio.src  그리고 audio.srcObject  다른 값 유형을 요구하는 다른 속성입니다.

  • 답변 # 2

    소품을 사용하고 각 렌더에서 함수를 만들고 싶지 않은 사람들 :

    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
      }
    }
    
    

  • 이전 (자바 스크립트 및 HTML) 한 목록에서 다른 목록으로 항목 이동
  • 다음 javascript - json 파일에서 객체 URI (JSON FILE)를 읽는 방법