Eri*_*rik 8 reactjs web-audio-api
我一直在尝试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 />
)
}
Run Code Online (Sandbox Code Playgroud)
当我检查chrome调试器时,它显示音频标签已[MediaStream]
设置为其源,但没有播放,所有控件都保持灰色.
这样做而不是设置状态有效,但我认为这在React中非常不受欢迎.
const audio = document.querySelector('audio')
audio.srcObject = stream
Run Code Online (Sandbox Code Playgroud)
Fuz*_*ree 15
如果不需要在状态中存储流,则可以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 />
)
}
Run Code Online (Sandbox Code Playgroud)
如果您确实需要从该州访问流,您可以尝试这样做
<audio ref={audio => { audio.srcObject = this.state.stream }} />
Run Code Online (Sandbox Code Playgroud)
原因src={this.state.stream}
不起作用是因为src
期望一个字符串表示音频资源的url同时this.state.stream
是一个MediaStream
对象.
audio.src
并且audio.srcObject
是期望不同值类型的不同属性.
对于那些使用 props 并且不喜欢在每个渲染上创建函数的人:
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
}
}
Run Code Online (Sandbox Code Playgroud)