带Electron + React的视频流：非常奇怪的显示

Question

我正在使用Electron和React来显示流视频。在执行此操作时，我的行为很怪异，因为文本噪音较大且阴影较暗。使用简单的React应用程序，一切正常。你有什么线索吗？

这是我的代码：

export default class VideoView extends React.Component {
    // MARK: React.Component
    componentDidMount(){
      if(this.video_ != null){
       this.video_.srcObject = this.props.stream;
       this.video_.video.onloadedmetadata = (e) => video.play();
      }
    }
    componentDidUpdate(){
      if(this.video_ != null && (this.video_.srcObject == null || this.props.stream == null || this.props.stream.id != this.video_.srcObject.id ) ){
         this.video_.srcObject = this.props.stream;
         this.video_.onloadedmetadata = (e) => this.video_.play();
      }
    }
    render(){
      console.log("render");
      return (
        <div className="videoView">
          {this.props.loading
            ? <Spinner className='pt-small'/>
            : <div className="videoViewContent">
              { this.props.stream
                ? <div className="videoViewVideo"><video ref={ el => this.video_ = el}  /></div>
                : <div className="videoViewContentNoSignal"> No Signal </div>
              }
              </div>
           }
        </div>);
    }
}

Answer 1

我通过使用画布读取视频找到了工作环境。

这是示例代码：

class VideoView extends React.Component {
constructor(props){
  super(props);
  this.state = {testTop:0,testLeft:0};
  this.startVideo = this.startVideo.bind(this);
}
// MARK: React.Component
componentDidMount(){
  if(this.video_ != null){
    this.startVideo();
    this.startCanvasVideo();
  }
  if(this.canvas != null){
    this.startGetCanvasData();
  }
}
startGetCanvasData() {
  let canvasContext = this.canvas.getContext('2d');
  setInterval(() => {
    let data = canvasContext.getImageData(0, 0, 10, 10).data;
    console.log("Data");
    console.log(data);
  }
  ,1000/60);
}
startCanvasVideo() {
  this.video_.addEventListener('play', () => {
      this.drawCanvasVideoFrame();
    }, false);
}
drawCanvasVideoFrame() {
    if (this.video_.paused || this.video_.ended) {
      return;
    }
    this.canvas.getContext('2d', {alpha: false}).drawImage(this.video_, 0, 0 );
    requestAnimationFrame(() => {this.drawCanvasVideoFrame()});
}
startVideo(){
  let frameRate = 60;
  this.video_.srcObject = this.props.stream;
}
componentDidUpdate(){
  if(this.video_ != null && (this.video_.srcObject == null || this.props.stream == null || this.props.stream.id != this.video_.srcObject.id ) ){
    this.startVideo();
  }
}
render(){
  return (
    <div className="videoView">
          <canvas ref={ el => this.canvas = el } />
          <VideoOverlayBox squareData={this.props.squareData}/>
          <video  ref={ el => { this.video_ = el; this.props.videoRef(el);}}  autoPlay/>
    </div>);
}