- import React, { Component } from 'react'
- import captureVideoFrame from "capture-video-frame";
- import './Style.css'
- import SplitPane from 'react-split-pane'
- import ReactPlayer from 'react-player';
- const {REACT_APP_FLASK_HOST} = process.env;
- const FLASK_PORT = REACT_APP_FLASK_HOST
- const FLASK_GET_VIDEO = FLASK_PORT + "get_video?name="
- const FLASK_GET_JSON = FLASK_PORT + "/get_video_json?name="
- const arrTags=[
- {
- L1_Tag:"1stwala",
- t_start:0.3,
- t_end:5
- },
- {
- L1_Tag:"2ndwala",
- t_start:2,
- t_end:6
- },
- {
- L1_Tag:"3rdwala",
- t_start:4,
- t_end:7
- },
- {
- L1_Tag:"4thwala",
- t_start:2.3,
- t_end:2.9
- }
- ];
- export default class VideoVisualise extends Component{
- constructor(props){
- super(props)
- this.state = {
- canvasref : React.createRef(),
- videourl : "",
- currentVideoName : "",
- playing: true,
- image: null,
- imgpath : "",
- groundTruth : {},
- prediction : {},
- playbackRate: 1,
- startTime: 0,
- endTime: 0,
- duration : 0,
- annotating: false,
- timestamp: 0,
- }
- this.getVideo = this.getVideo.bind(this)
- this.setVideo = this.setVideo.bind(this)
- }
- handleClick = event=> {
- const frame = captureVideoFrame("my-video-id", "png");
- const img = document.getElementById("my-screenshot");
- img.setAttribute("src", frame.dataUri);
- };
- async getVideo(videoName){
- const response = await fetch(FLASK_GET_VIDEO + `${videoName}`)
- this.setVideo(response.url)
- }
- componentDidUpdate(oldProps){
- if(oldProps.currentVideoName !== this.props.currentVideoName){
- if(this.props.currentVideoName !== undefined){
- this.getVideo(this.props.currentVideoName)
- this.getJson();
- }
- }
- }
- setVideo(src){
- this.setState({
- videourl : src,
- currentVideoName : this.props.currentVideoName
- })
- }
- async getJson(){
- var URL = FLASK_GET_JSON + `${this.props.currentVideoName}`;
- const videoJson = await fetch(URL)
- var data = await videoJson.json()
- console.log(data)
- this.setState({
- groundTruth : JSON.parse(data.groundTruth),
- prediction : JSON.parse(data.prediction)
- }, this.visualise)
- }
- visualise(){
- let duration=parseFloat(this.state.groundTruth.meta.Duration);
- let ratio=320/duration;
- let canvas=this.state.canvasref.current;
- let ctx= canvas.getContext("2d");
- ctx.lineWidth=3;
- ctx.strokeStyle="green";
- let array=this.state.groundTruth.data.ROI_annotations;
- array.forEach(tag => {
- let l=tag.interval.tstart;
- let r=tag.interval.tend;
- l*=ratio;
- r*=ratio;
- let cury=5;
- while(true)
- {
- let iscolor=0;
- for(let i=l;i<=r;i++)
- {
- let curdata=ctx.getImageData(i,cury,1,1).data;
- if(curdata[0]!=0 || curdata[1]!=0 || curdata[2]!=0 )
- {
- iscolor=1;
- break;
- }
- }
- if(iscolor==0)
- {
- ctx.beginPath();
- ctx.moveTo(l,cury);
- ctx.lineTo(r,cury);
- ctx.closePath();
- ctx.stroke();
- break;
- }
- else
- {
- cury+=10;
- }
- }
- });
- // ctx.fillRect(0,0,50,50);
- //the visualisation part goes here
- //this.state.groundTruth and this.state.prediction need
- //to be used
- }
- moveLine() {
- if(this.state.groundTruth.meta ==undefined)
- {
- return;
- }
- let duration=parseFloat(this.state.groundTruth.meta.Duration);
- let ratio=320/duration;
- let now= this.player!=null?this.player.getCurrentTime():this.state.timestamp;
- now*=ratio;
- let canvas=this.state.canvasref.current;
- let ctx= canvas.getContext("2d");
- ctx.clearRect(0,0,320,20);
- this.visualise();
- ctx.strokeStyle="black";
- ctx.lineWidth=1;
- ctx.beginPath();
- ctx.moveTo(now,0);
- ctx.lineTo(now,20);
- ctx.closePath();
- ctx.stroke();
- }
- render() {
- return (
- <div className="App">
- <div style={{float : 'left'}}>
- {this.state.annotating?<canvas id="video" width="220px" height="220px"></canvas>:<div></div>}
- <ReactPlayer
- onProgress = {()=>this.moveLine()}
- progressInterval={100}
- // controls = {true}
- ref={player => { this.player = player }}
- url={this.state.videourl}
- playing={this.state.playing}
- playbackRate={this.state.playbackRate}
- width= {this.state.annotating?'0px':'220px'}
- height={this.state.annotating?'0px':'220px'}
- config={{ file: { attributes: {
- crossOrigin: 'anonymous'
- }}}}/>
- <div style={{float : 'right'}}>
- <ReactPlayer
- onProgress = {()=>this.moveLine()}
- progressInterval={100}
- // controls = {true}
- ref={player => { this.player2 = player }}
- url={this.state.videourl}
- playing={this.state.playing}
- playbackRate={this.state.playbackRate}
- width='220px'
- height='220px'
- config={{ file: { attributes: {
- crossOrigin: 'anonymous'
- }}}}/>
- </div>
- </div>
- { this.state.playing? <button onClick={() => this.setState({playing: false})}>Pause</button> : <button onClick={() => this.setState({ playing: true })}>Play</button>}
- <button onClick={() => this.setState({ playbackRate: (this.state.playbackRate <15)? this.state.playbackRate + 0.5 : this.state.playbackRate })}>+ 0.5</button>
- <span> {this.state.playbackRate}</span>
- <button onClick={() => this.setState({ playbackRate: (this.state.playbackRate > 0.5)? this.state.playbackRate - 0.5 : 0.5 })}>- 0.5</button>
- <button onClick={() => this.setState({ startTime : this.player.getCurrentTime()})}>Set_Start_time :{this.state.startTime}</button>
- <button onClick={() => this.setState({endTime : this.player.getCurrentTime()})}>Set_End_time :{this.state.endTime}</button>
- <button onClick={() => {this.setState({ playing: false })
- const frame = captureVideoFrame(this.player.getInternalPlayer())
- console.log('captured frame', frame)
- this.setState({ image: frame.dataUri })
- }}>Capture Frame</button>
- <br />
- <button onClick={() => {this.setState({duration : this.player.getDuration() });
- this.visualise()}}>SET DURATION</button>
- {this.state.duration}
- <button onClick={() => {
- if(this.state.annotating){
- this.setState({annotating : !this.state.annotating, })
- this.player.seekTo(this.state.timestamp, "seconds")
- console.log(this.state.timestamp)
- }
- else{
- this.setState({annotating : !this.state.annotating, playing: false, timestamp: this.player.getCurrentTime() })
- }
- }}>Toggle mode</button>
- {this.state.image &&
- <img src={this.state.image} width='320px' />
- }
- <br></br>
- <br></br>
- <canvas
- ref={this.state.canvasref}
- width='320px'
- height='20px'
- >
- </canvas>
- <br/>
- {this.state.groundTruth.data!=null?this.state.groundTruth.data.ROI_annotations.map((annotation,index) => (
- <div margin ="0 auto" key={index} style={{objectFit: 'cover'}}>
- <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>
- <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>
- <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>
- </div>
- ))
- :<div></div>}
- </div>
- )
- }
- }
[text] VideoVisualise.js
Viewer
*** This page was generated with the meta tag "noindex, nofollow". This happened because you selected this option before saving or the system detected it as spam. This means that this page will never get into the search engines and the search bot will not crawl it. There is nothing to worry about, you can still share it with anyone.
Editor
You can edit this paste and save as new: