HTML5のキャンバスに区別してCからアクセスする方法について

HTML5で動画を再生してデータをOpenCVで加工することを考えています。
そこでまずHTML5の動画をjavascriptでCOPYしようと考えました。
それはあっさり出来て

lang
1document.addEventListener('DOMContentLoaded', function(){
2        var video = document.getElementById('v');
3        var canvas = document.getElementById('c');
4        var context = canvas.getContext('2d');
5        var back = document.createElement('canvas')
6        var backcontext = back.getContext('2d');
7
8        var cw,ch;
9
10        video.addEventListener('play', function(){
11                cw = video.clientWidth;
12                ch = video.clientHeight;
13                canvas.width = cw;
14                canvas.height = ch;
15                back.width = cw;
16                back.height = ch;
17                draw(video,context,backcontext,cw,ch);
18        },false);
19
20},false);
21function draw(v,c,bc,cw,ch) {
22        if(v.paused || v.ended) return false;
23        // 
24        bc.drawImage(v,0,0,cw,ch);
25        //
26        //ちょっと加工してみるテスト
27        var idata = bc.getImageData(0,0,cw,ch);
28        var data = idata.data;
29        var w = idata.width;
30        var limit = data.length
31        // 
32        for(var i = 0; i < limit; i++) {
33                if( i%4 == 3 ) continue;
34                data[i] = 127 + 2*data[i] - data[i + 4] - data[i + w*4];
35        }
36        // 
37        c.putImageData(idata,0,0);
38        // 
39        setTimeout(draw,0,v,c,bc,cw,ch);
40}
41

lang
1<!DOCTYPE html>
2<title>Video/Canvas Demo 4</title>
3<script type="text/javascript" src="core.js"></script>
4
5
6
7<video id=v controls loop width=300>
8        <source src=sample.mp4 type=video/mp4>
9</video>
10<canvas id=c></canvas>
11
12<style>
13#c {
14        position: absolute;
15        top: 50%;
16        left: 50%;
17        margin: -180px 0 0 20px;
18}
19
20#v {
21        position: absolute;
22        top: 50%;
23        left: 50%;
24        margin: -180px 0 0 -500px;
25}
26</style>
27

こんな感じですが
この変換処理をOpenCVに変えたいので、EmscriptenのC言語コードにこのJSを変えたいのです。
そこでまずCANVAS　C,VにC言語から区別してアクセスする方法が分かりません。
あるいは
var idata = bc.getImageData(0,0,cw,ch);
の戻り値だけでもC言語におくれればと考えております。
どうにかなりませんか？

行動規範の内容に同意します

回答2件

自己解決

OpenFrameWorksを使うと2、3行であっさり動画が再生され音もでました。フレームも取り出せてOpenCVできたのでおすすめです。（すみません広告ではないです。）

投稿2018/09/05 05:13

編集2018/09/05 05:15

kokawa2003

総合スコア217

こんにちは、
OpenCVの処理をどうしてもCで書きたいという事でなければ、

OpenCV.js(https://docs.opencv.org/3.4.3/d4/da1/tutorial_js_setup.html)を使えばOpenCVの処理をjavaScriptで
記述できます。

こんな感じでOpenCVをjsで使えます。
(動画処理ではないですが、jsでOpenCVのAPIが利用できる雰囲気はつかめるかと)

https://kjunichi.github.io/opencvjs/test.html

投稿2018/08/30 01:56

kjunichi

総合スコア39

kokawa2003

2018/08/30 05:16

いやそれは知っていたのですが結論からいうとコーデイングを見せたくないんですよね。でCにこだわっているという話なのです。

kokawa2003

2018/08/30 05:20

そこにお客サンの特許技術が絡んでいるので怒られそうです。特許があるなら公開してもいいだろとも言えるけど日本的な解決で行きたいです。????

kokawa2003

2018/08/30 05:38

それともうひとつは負荷的な話です。顔検出したり、アニメ調に編集したりしますが、それをPCAPPで動作させてみたとき、”かなり”CPUを使ってた。GPUを足せばいのは知っているがWEBでやるときそれは期待できない。JSで同期して動作するとは私には信じられない。（FPSを下げるとか対策はあるかもだけど、客の動画をいじれないだろう）

kjunichi

2018/08/30 06:46

最終的にはブラウザ上で動かしたがソースはJSの可読性の高い記述としては置きたくないと言う事ですかね。大昔に、Cの関数をJSから呼び出す処理をEmscriptenを使って書いたことがあります。 - https://abrakatabura.hatenablog.com/entry/2015/04/18/115323 ちょっと分かりずらい記事かも知れませんが、画像を格納するバッファを Module._malloc で確保すれば、 C側でこれを参照できるようです。ご紹介した記事では領域を確保しただけで、C側にこの領域の編集を任せて、JSで受け取って読みだすだけになっていますが、確保した領域にJS側で画像データを書き込めば、C側に渡せるかと思います。

kokawa2003

2018/08/30 18:09

今確認しました。openframeworksで挑戦します。

行動規範の内容に同意します

あなたの回答