Giter Club home page Giter Club logo

vivict's Introduction

VIVICT - Vivict Video Comparison Tool

An easy to use in-browser tool for subjective comparison of the visual quality of different encodings of the same video source.

Getting started

Go to https://vivictorg.github.io/vivict/. By default, it will open a HLS test stream from Sintel video in different bitrates.

Usage

The screen is split into two parts, with the left and right part displaying the left and right video source. The split position will follow the mouse, so moving the mouse to the left will show more of the right source and vice versa.

Selecting sources

On the top left and right are the source selectors, allowing you to select sources for the left and right video respectively. You can either input a URL or open a local file. If the source is a HLS-playlist, you can also select which video stream you want to view.

URL parameters

If you want to programmatically change the sources or the playback position, you can use the following URL parameters:

  • leftVideoUrl – sets the left video source
  • rightVideoUrl – sets the right video source
  • leftVideoVariant – sets the left video HLS variant
  • rightVideoVariant – sets the right video HLS variant
  • position – sets the start position in seconds
  • hideHelp – if 1, hides the automatic help menu
  • hideSourceSelector – if 1, hides the source selection menu

To use the parameters, you have to URL-encode the source URL. For example, to load the videos http://example.com/test1.mp4 and http://example.com/test2.mp4, open the following URL:

http://localhost:3000/?leftVideoUrl=http%3A%2F%2Fexample.com%2Ftest1.mp4&rightVideoUrl=http%3A%2F%2Fexample.com%2Ftest2.mp4

Shortcuts for video control

l Play video
k Pause video
space Play/Pause video
, Step forward 1 frame
, Step backward 1 frame
/ or - Step forward 1 second
m Step backward 1 second

Shortcuts for view control

f Toggle full screen
t Toggle split position follows mouse
] View only left video
[ View only right video
< Decrease timeshift between videos
> Increase timeshift between videos
u Zoom in
i Zoom out
up Pan up
down Pan down
right Pan right
left Pan left
0 Reset pan and zoom to default
s Toggle visibility of split border
esc Toggle help window

If you think the shortcuts could be better, feel free to suggest a setup!

Supported codecs and container formats

Depends on the browser. mp4 and h264 should generally work. h265 should work in safari. AV1 works in firefox.

HLS is supported through hls.js

MPEG-DASH is supported through dash.js

Supported browsers

Vivict has been tested in Chrome. Firefox should also.

Running locally

Vivict can be run locally by checking out the source code and running

    npm install
    npm start

Note: you might also need to install a few peer dependencies.

There is also a C++-based version of offline use available here: https://github.com/vivictorg/vivictpp

Getting involved

Feel free to issue pull requests or file issues. For more details, see CONTRIBUTING

License

Copyright 2019 Sveriges Television AB.

Vivict is released under the MIT License.

Primary Maintainer

Gustav Grusell https://github.com/grusell/

vivict's People

Contributors

grusell avatar janderssonse avatar jonaswijk avatar slhck avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vivict's Issues

Typo in README.md (startPosition)

README.md:- startPosition – sets the start position in seconds

src/components/VideoViewer/index.js:const startPosition = Number(urlParams.get('position')) || 0;

Option to specify input file upon launch?

Awesome tool, thanks for sharing this!

Do you think it would be possible to add an option to launch the program with two files supplied by command-line argument or – even better – URL?

For example, launching:

http://localhost:3000/?video1=https%3A%2F%2Fexample.com%2Fvideo1.hls&video2=https%3A%2F%2Fexample.com%2Fvideo2.hls

Feature: Drag and drop

I'd absolutely love to just drag 'n drop the two assets into the browser. Would be super convenient for me.

I don't have the time to contribute this feature right now, but I've done DND a few times. I'd probably lift this implementation.

Thanks for vivict! It's been hugely valuable for me.

Is it still in active development?

This is a great project. It has tons of useful features and it seems to have been thought out carefully. No other implementation of this type I have seen even comes close to this level of functionality.

I realize the online use must have been the main goal you had in mind with this app but I think it could serve at least some offline use cases. I'd like to use this locally to compare videos transcoded in different qualities but I'm a bit intimidated by the process. Do you intend to add more friendly install options, like appimage or deb? Also, are there any plans for an alternative file load workflow for local use? The current one is nicely optimized for online use cases.

Thank you for developing this project!

Mp4box declaration in Mp4info.js needs to be changed

Hi,
comparison of two mp4 files is throwing an exception - problem is the old declaration in the
/src/util/Mp4Info.js line 46:
const mp4boxfile = new MP4Box.MP4Box();

It needs to be changed to:
const mp4boxfile = new MP4Box.createFile();

Regards

Viewing of remote mp4 fails

In some (all?) cases using a remote mp4 as source fails. This seems to be cause when fetching the mp4 file to read metadata fails due to CORS related reasons.

Readme: Details on how to view a video on local system

If there are videos on my system at /home/user/videos/, I would need to know how to play them using Vivict. The current instructions in the readme do mention how to play videos on localhost, but require more details to mention how to take videos from the filesystem by specifying a folder path.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.