[text] VideoVisualise.js

Viewer

copydownloadembedprintName: VideoVisualise.js
  1. import React, { Component } from 'react'
  2. import captureVideoFrame from "capture-video-frame";
  3. import './Style.css'
  4. import SplitPane from 'react-split-pane'
  5. import ReactPlayer from 'react-player';
  6. const {REACT_APP_FLASK_HOST} = process.env;
  7. const FLASK_PORT = REACT_APP_FLASK_HOST
  8. const FLASK_GET_VIDEO = FLASK_PORT + "get_video?name="
  9. const FLASK_GET_JSON = FLASK_PORT + "/get_video_json?name="
  10.  
  11.  
  12. const arrTags=[
  13.     {
  14.         L1_Tag:"1stwala",
  15.         t_start:0.3,
  16.         t_end:5
  17.     },
  18.     {
  19.         L1_Tag:"2ndwala",
  20.         t_start:2,
  21.         t_end:6
  22.     },
  23.     {
  24.         L1_Tag:"3rdwala",
  25.         t_start:4,
  26.         t_end:7
  27.     },
  28.     {
  29.         L1_Tag:"4thwala",
  30.         t_start:2.3,
  31.         t_end:2.9
  32.     }
  33.  
  34. ];
  35.  
  36. export default class VideoVisualise extends Component{
  37.     constructor(props){
  38.         super(props)
  39.         this.state = {
  40.             canvasref : React.createRef(),
  41.             videourl : "",
  42.             currentVideoName : "",
  43.             playing: true,
  44.             image: null,
  45.             imgpath : "",
  46.             groundTruth : {},
  47.             prediction : {},
  48.             playbackRate: 1,
  49.             startTime: 0,
  50.             endTime: 0,
  51.             duration : 0,
  52.             annotating: false,
  53.             timestamp: 0,
  54.         }
  55.         this.getVideo = this.getVideo.bind(this)
  56.         this.setVideo = this.setVideo.bind(this)
  57.     }
  58.    
  59.     handleClick = event=> {
  60.         const frame = captureVideoFrame("my-video-id", "png");
  61.         const img = document.getElementById("my-screenshot");
  62.         img.setAttribute("src", frame.dataUri);
  63.     };
  64.     async getVideo(videoName){
  65.         const response = await fetch(FLASK_GET_VIDEO + `${videoName}`)
  66.         this.setVideo(response.url)
  67.     }
  68.  
  69.     componentDidUpdate(oldProps){
  70.         if(oldProps.currentVideoName !== this.props.currentVideoName){
  71.             if(this.props.currentVideoName !== undefined){
  72.                 this.getVideo(this.props.currentVideoName)
  73.                 this.getJson();
  74.             }
  75.             
  76.         }
  77.     }
  78.  
  79.     setVideo(src){
  80.         this.setState({
  81.             videourl : src,
  82.             currentVideoName : this.props.currentVideoName
  83.         })
  84.         
  85.     }
  86.  
  87.     async getJson(){
  88.         var URL = FLASK_GET_JSON + `${this.props.currentVideoName}`;
  89.         const videoJson = await fetch(URL)
  90.         var data = await videoJson.json()
  91.         console.log(data)
  92.         this.setState({
  93.             groundTruth : JSON.parse(data.groundTruth),
  94.             prediction : JSON.parse(data.prediction)
  95.         }, this.visualise)
  96.     }
  97.  
  98.     
  99.     visualise(){            
  100.         let duration=parseFloat(this.state.groundTruth.meta.Duration);
  101.         let ratio=320/duration;
  102.         let canvas=this.state.canvasref.current;
  103.         let ctx= canvas.getContext("2d");
  104.         ctx.lineWidth=3;
  105.  
  106.         ctx.strokeStyle="green";
  107.         let array=this.state.groundTruth.data.ROI_annotations;
  108.         
  109.  
  110.         array.forEach(tag => {
  111.             let l=tag.interval.tstart;
  112.             let r=tag.interval.tend;
  113.             l*=ratio;
  114.             r*=ratio;
  115.             let cury=5;
  116.             while(true)
  117.             {
  118.                 
  119.                 let iscolor=0;
  120.                 for(let i=l;i<=r;i++)
  121.                 {
  122.                     
  123.                     let curdata=ctx.getImageData(i,cury,1,1).data;
  124.                     if(curdata[0]!=0 || curdata[1]!=0 || curdata[2]!=0 )
  125.                     {
  126.                         iscolor=1;
  127.                         break;
  128.                     }
  129.                 }
  130.                 if(iscolor==0)
  131.                 {
  132.                     ctx.beginPath();
  133.                     ctx.moveTo(l,cury);
  134.                     ctx.lineTo(r,cury);
  135.                     ctx.closePath();
  136.                     ctx.stroke();
  137.                     break;
  138.                 }
  139.                 else
  140.                 {
  141.                     cury+=10;
  142.                 }
  143.             }
  144.  
  145.         });
  146.  
  147.         // ctx.fillRect(0,0,50,50);
  148.         
  149.  
  150.         //the visualisation part goes here
  151.         //this.state.groundTruth and this.state.prediction need 
  152.         //to be used
  153.     }
  154.  
  155.     moveLine() {
  156.         if(this.state.groundTruth.meta ==undefined)
  157.         {
  158.             return;
  159.  
  160.         }
  161.         let duration=parseFloat(this.state.groundTruth.meta.Duration);
  162.         let ratio=320/duration;
  163.         let now= this.player!=null?this.player.getCurrentTime():this.state.timestamp;
  164.         now*=ratio;
  165.     
  166.         let canvas=this.state.canvasref.current;
  167.         let ctx= canvas.getContext("2d");
  168.         ctx.clearRect(0,0,320,20);
  169.         this.visualise();
  170.         ctx.strokeStyle="black";
  171.         ctx.lineWidth=1;
  172.         ctx.beginPath();
  173.         ctx.moveTo(now,0);
  174.         ctx.lineTo(now,20);
  175.         ctx.closePath();
  176.         ctx.stroke();
  177.         
  178.     
  179.     }
  180.     render() {
  181.         return (
  182.             <div className="App">
  183.                 <div style={{float : 'left'}}>
  184.                 {this.state.annotating?<canvas id="video" width="220px" height="220px"></canvas>:<div></div>}
  185.  
  186.                 <ReactPlayer
  187.                     onProgress = {()=>this.moveLine()}
  188.                     progressInterval={100}
  189.                     // controls = {true}
  190.                     ref={player => { this.player = player }}
  191.                     url={this.state.videourl} 
  192.                     playing={this.state.playing}
  193.                     playbackRate={this.state.playbackRate}
  194.                     width= {this.state.annotating?'0px':'220px'}
  195.                     height={this.state.annotating?'0px':'220px'}
  196.                     config={{ file: { attributes: {
  197.                         crossOrigin: 'anonymous'
  198.                 }}}}/>
  199.                 <div style={{float : 'right'}}>
  200.                  <ReactPlayer
  201.                     onProgress = {()=>this.moveLine()}
  202.                     progressInterval={100}
  203.                     // controls = {true}
  204.                     ref={player => { this.player2 = player }}
  205.                     url={this.state.videourl} 
  206.                     playing={this.state.playing}
  207.                     playbackRate={this.state.playbackRate}
  208.                     width='220px'
  209.                     height='220px'
  210.                     config={{ file: { attributes: {
  211.                         crossOrigin: 'anonymous'
  212.                 }}}}/>
  213.                </div>
  214.                </div>
  215.                 
  216.                 
  217.                 { this.state.playing? <button onClick={() => this.setState({playing: false})}>Pause</button> : <button onClick={() => this.setState({ playing: true })}>Play</button>}
  218.                 
  219.                 <button onClick={() => this.setState({ playbackRate: (this.state.playbackRate <15)? this.state.playbackRate + 0.5 : this.state.playbackRate })}>+ 0.5</button>
  220.                 <span> {this.state.playbackRate}</span>
  221.                 <button onClick={() => this.setState({ playbackRate: (this.state.playbackRate > 0.5)? this.state.playbackRate - 0.5 : 0.5 })}>- 0.5</button>
  222.                 <button onClick={() => this.setState({ startTime : this.player.getCurrentTime()})}>Set_Start_time :{this.state.startTime}</button>
  223.                 <button onClick={() => this.setState({endTime : this.player.getCurrentTime()})}>Set_End_time :{this.state.endTime}</button>
  224.                 <button onClick={() => {this.setState({ playing: false })
  225.  
  226.                 const frame = captureVideoFrame(this.player.getInternalPlayer())
  227.                 console.log('captured frame', frame)
  228.                 this.setState({ image: frame.dataUri })
  229.                 }}>Capture Frame</button>
  230.                 <br />
  231.  
  232.                 <button onClick={() => {this.setState({duration : this.player.getDuration() });
  233.                                         this.visualise()}}>SET DURATION</button>
  234.                 
  235.                 {this.state.duration}
  236.  
  237.                 <button onClick={() => {
  238.                     if(this.state.annotating){
  239.                         this.setState({annotating : !this.state.annotating, })
  240.  
  241.                         this.player.seekTo(this.state.timestamp, "seconds")
  242.                         console.log(this.state.timestamp)
  243.                         
  244.  
  245.                     }
  246.                     else{
  247.                         this.setState({annotating : !this.state.annotating, playing: false, timestamp: this.player.getCurrentTime() })
  248.                     }
  249.                     }}>Toggle mode</button>
  250.  
  251.                 {this.state.image &&
  252.                     <img src={this.state.image} width='320px' />
  253.                 }
  254.             
  255.                 <br></br>
  256.                 <br></br>
  257.  
  258.                 <canvas 
  259.                     ref={this.state.canvasref}
  260.                     width='320px'
  261.                     height='20px'
  262.                 >
  263.                 </canvas>
  264.                 <br/> 
  265.  
  266.                     {this.state.groundTruth.data!=null?this.state.groundTruth.data.ROI_annotations.map((annotation,index) => (
  267.                         <div margin ="0 auto" key={index} style={{objectFit: 'cover'}}>
  268.                         <div width={Math.round(Number(annotation.interval.tstart)/Number(this.state.groundTruth.meta.Duration)*320)+"px"} style={{background: "#DDDDFF", float: "left", objectFit: 'cover'}} > afasd</div>
  269.                         <div width={Math.round((Number(annotation.interval.tend)-Number(annotation.interval.tstart))/Number(this.state.groundTruth.meta.Duration)*320)+"px"} style={{background: "yellow", float: "left", objectFit: 'cover'}}> a</div>
  270.                         <div width={Math.round(320 - Number(annotation.interval.tend)/Number(this.state.groundTruth.meta.Duration)*320)+"px"} style={{background: "#DDDDFF", float: "left", objectFit: 'cover'}}>a</div>
  271.                         </div>
  272.                     ))
  273.                     :<div></div>}
  274.  
  275.  
  276.             </div>
  277.         )
  278.     }
  279. }
  280.  

Editor

You can edit this paste and save as new:


File Description
  • VideoVisualise.js
  • Paste Code
  • 24 Jun-2021
  • 9.81 Kb
You can Share it: