Initial version

fraigo · fraigo · commit f37d36be94d4 · 2018-12-13T13:25:32.000-08:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+__pycache__
+.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+    "python.pythonPath": "/usr/local/bin/python3",
+    "python.linting.pylintEnabled": false,
+    "python.linting.pep8Enabled": true,
+    "python.linting.enabled": true
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,51 @@
+# Python Video to HTML Canvas Demo
+
+This script can create a Javascript object with video information from a video file.
+
+The javascript object can be played in **HTML Canvas** as a sequence of frames with pixel data.
+
+
+## Python packages
+
+* `opencv-python`: OpenCV, Open Source Computer Vision Library. BSD license and hence it’s free for both academic and commercial use.
+
+## Usage
+
+### Python code example
+
+```python
+import sys
+from video_convert import video_to_js
+
+filein = "example/multi.mov"
+fileout = "html/video.js"
+video_to_js(filein, 200, 200, 1, 15, fileout)
+```
+
+### Video example (included)
+
+This example will generate the file `html/video.js`:
+
+`python example.py example/multi.mov`
+
+
+
+### Javascript Video usage
+
+
+Use this code snippet to embed your video in Canvas
+
+```html
+<canvas id=canvas></canvas>    
+<script src="video.js" ></script>
+<script src="player.js" ></script>
+<script >
+document.body.onload=function(){ 
+    var player = new VideoPlayer("canvas", video)
+    player.startVideo()
+}
+</script>
+```
+
+Where `video.js` is the video file generated by the script, and `player.js` is the Video player component to play the video vile format.
+
diff --git a/example.py b/example.py
@@ -0,0 +1,9 @@
+import sys
+from video_convert import video_to_js
+
+try:
+    filein = sys.argv[1]
+    fileout = "html/video.js"
+    video_to_js(filein, 120, 150, 1, 15, fileout)
+except:
+    print("Usage: %s video_file" % sys.argv[0])
diff --git a/example/multi.mov b/example/multi.mov
diff --git a/html/index.html b/html/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Python Video to HTML Canvas Demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        button{
+            border-radius:7px;
+            border: 1px solid #eee;
+            padding:4px;
+            margin: 3px;
+        }
+    </style>
+</head>
+<body>
+    <h2>Python Video to Javascript Demo</h2>
+    <button onclick="player.startVideo()">Play</button>
+    <button onclick="player.stopVideo()">Stop</button>
+    <br>
+    <canvas id=canvas></canvas>
+    <br>
+    <button onclick="video.freq=base_freq*4">Slower</button>
+    <button onclick="video.freq=base_freq*2">Slow</button>
+    <button onclick="video.freq=base_freq">Nomal</button>
+    <button onclick="video.freq=base_freq/2">Fast</button>
+    
+<script src="video.js" ></script>
+<script src="player.js" ></script>
+<script >
+document.body.onload=function(){ 
+    base_freq = video.freq
+    player = new VideoPlayer("canvas", video)
+    player.startVideo()
+}
+</script>
+<br><small id="info"></small>
diff --git a/html/player.js b/html/player.js
@@ -0,0 +1,71 @@
+
+function VideoPlayer(canvasId, video){
+
+    var canvas = document.getElementById(canvasId);
+    var ctx = canvas.getContext('2d');
+    var lastFrame = []
+    var lastVideo = 0
+
+    canvas.setAttribute("width",video.width)
+    canvas.setAttribute("height",video.height)
+
+
+    this.playVideo=function(video,freq){
+        fps=freq
+        if (!fps){
+            fps=video.freq
+        }
+        console.log("Playing at "+fps+"fps")
+        for(var i=0; i<video.data.length-1; i++){
+            lastFrame[i]=setTimeout(this.playFrame.bind(this),fps*i,i,video.data[i],video)
+        }
+        lastVideo=setTimeout(this.playVideo.bind(this),fps*video.data.length-2,video,freq)
+    }
+
+    this.writeText=function(ctx,text, px){
+        ctx.font = '10px Arial';
+        ctx.fillStyle='white';
+        ctx.fillText(text, px+5, 10);
+        ctx.fillText(text, px+7, 12);
+        ctx.fillStyle='black';
+        ctx.fillText(text, px+6, 11);
+    }
+
+    this.playFrame=function(i,frame,video){
+        ctx.fillRect(0,0,video.width,video.height)
+        var d = ctx.createImageData(video.frame_width, video.frame_height);
+        var f=0; 
+        for(var px=0;px<frame.length; px++){
+            var value=parseInt(frame[px],10)
+            d.data[f]=value*26; f++;
+            if((px+1)%3==0){ 
+                d.data[f]=255; 
+                f++; 
+            } 
+        }
+        var padx=(video.width-video.frame_width)/2
+        ctx.putImageData(d, padx, 0);
+        this.writeText(ctx,"Frame "+i,padx)
+    }
+
+    this.stopVideo=function(){ 
+        this.pauseVideo();
+        window.clearTimeout(lastVideo) 
+        lastVideo=0
+    }
+
+    this.pauseVideo=function(){ 
+        for(var f=0; f<lastFrame.length; f++){
+            window.clearTimeout(lastFrame[f]) 
+        }
+        lastFrame=[]
+    }
+
+    this.startVideo=function(){
+        if (lastFrame.length){
+            return
+        }
+        this.playVideo(video) 
+    }
+
+}
diff --git a/html/video.js b/html/video.js
diff --git a/requirements.txt b/requirements.txt
@@ -0,0 +1 @@
+opencv-python
diff --git a/video_convert.py b/video_convert.py
@@ -0,0 +1,50 @@
+import sys
+from video_utils import get_video, get_video_props, get_frame, pixel_to_rgb
+
+
+def video_to_js(infile, cwidth, cheight, frame_start, frame_end, outfile=None):
+    opacity = 255
+    comp = 26
+    cap = get_video(infile)
+    if outfile is None:
+        writer = sys.stdout
+    else:
+        writer = open(outfile, "w")
+        print("Writing to %s ..." % outfile)
+    width, height, length, real_fps = get_video_props(cap)
+    real_freq = int(1000/real_fps)
+
+    writer.write("video ={\n")
+    writer.write('"width":%s,\n' % cwidth)
+    writer.write('"height":%s,\n' % cheight)
+    writer.write('"fps":%s,\n' % real_fps)
+    writer.write('"freq":%s,\n' % real_freq)
+    writer.write('"data":[\n')
+    fn = 0
+    i = 0
+    fwidth = 0
+    fheight = 0
+    for rframe in get_frame(cap, cwidth, cheight):
+        fn += 1
+        if fn < frame_start:
+            continue
+        if fn > frame_end:
+            break
+        fheight, fwidth, _ = rframe.shape
+        pad = max(int(cwidth) - fwidth, 0)
+        writer.write('"')
+        for j in range(fheight-1):
+            for i in range(fwidth):
+                pixel = rframe[j][i]
+                r, g, b = pixel_to_rgb(pixel)
+                writer.write("%s" % int(r/comp))
+                writer.write("%s" % int(g/comp))
+                writer.write("%s" % int(b/comp))
+        writer.write('",\n')
+        writer.flush()
+    writer.write('""\n')
+    writer.write(" ],\n")
+    writer.write('"frame_width":%s,\n' % fwidth)
+    writer.write('"frame_height":%s\n' % fheight)
+    writer.write("}\n")
+    writer.flush()
diff --git a/video_utils.py b/video_utils.py
@@ -0,0 +1,40 @@
+import cv2
+
+
+def resize_frame(frame, view_width, view_height):
+        height, width, _ = frame.shape
+        reduction_factor = (float(view_height)) / height * 100
+        reduced_width = int(width * reduction_factor / 100)
+        reduced_height = int(height * reduction_factor / 100)
+        dim = (reduced_width, reduced_height)
+        resized_frame = cv2.resize(frame, dim, interpolation=cv2.INTER_LINEAR)
+        return resized_frame
+
+
+def pixel_to_rgb(pixel):
+    bgr = tuple(float(x) for x in pixel[:3])
+    return tuple(reversed(bgr))
+
+
+def get_video(filename):
+    return cv2.VideoCapture(filename)
+
+
+def get_video_props(cap):
+    width = cap.get(cv2.CAP_PROP_FRAME_WIDTH)
+    height = cap.get(cv2.CAP_PROP_FRAME_HEIGHT)
+    length = cap.get(cv2.CAP_PROP_FRAME_COUNT)
+    fps = cap.get(cv2.CAP_PROP_FPS)
+    return width, height, length, fps
+
+
+def get_frame(cap, view_width=None, view_height=None):
+    while cap.isOpened():
+        _ret, frame = cap.read()
+        if frame is None:
+            break
+        else:
+            if view_height is None or view_width is None:
+                yield frame
+            else:
+                yield resize_frame(frame, view_width, view_height)
