月: 2019年7月

Visual Studio Code + Python + opencv の環境メモ

OpenCV-Python を Windows でインストールする方法

前提として、次の場所にインストールしている。

  • D:\Program Files\Python37
  • D:\opencv
  • D:\ProgramData\Anaconda3

  1. Pythonをダウンロードして、インストールする
  2. Numpy を pip install numpyでインストール
  3. Matplotlib をpip install matplotlib でインストール。Matplotlib はオプショナルだが、チュートリアルでしばしば使われているため。
  4. import numpy を実行して、正常に動作することを確認
  5. OpenCV をインストール
  6. D:\opencv\build\python\cv2\python-2.7にある cv2.pyd をD:\Program Files\Python37\Lib\site-packages にコピーする
  7. Visual Studio CodeのPython terminalから、次のコマンドを実行し、確認
    >>> import cv2 as cv
    >>> print( cv.__version__ )

環境変数

  • D:\Program Files\Python37
  • D:\opencv\build\x64\vc15\bin
  • D:\ProgramData\Anaconda3\condabin
  • D:\ProgramData\Anaconda3\Library\bin

Visual Studio 2019 C++でOpenCV

How to build applications with OpenCV inside the “Microsoft Visual Studio” より

追加のインクルードディレクトリ　C:\opencv\build\include
追加のライブラリディレクトリ　C:\opencv\build\x64\vc15\lib

追加の依存ファイル 　opencv_world410d.lib

このままだと、エラー LNK1112 モジュールのコンピューターの種類 ‘x64’ は対象コンピューターの種類 ‘x86’ と競合しています。となるので、次のように対象コンピュータをx64に設定する。

対象コンピューターを x64へ

opencv Video Tutorial

Getting Started with Videos より

実行結果

opencv のインストール

C:\opencv にインストール

pip install opencv-python でopencv をインストール。
pip install opencv-contrib-python で、opencvをインストール
f2py のPATHを追加してとメッセージが出ているが、FORTRANは使用しないので、無視。

pipの新しいバージョンがあるということで、python -m pip insatall -upgrade でアップグレードする。


WIndows Storeからインストールしたからか、 しかし、アクセス権がなくエラーとなる。
–user オプションを指定して、インストール実行。

Python のインストール

Microsoft Store からインストール

PATHの中に、次のファイルがインストールされており、PATHの設定は不要。
2019/7/17時点で、バージョンは 3.7.4 で、python.org の最新版と同じ。

test1.ps を作成すると、拡張機能 Pythonが推奨ということで、Pythonをインストール
実行結果。

Video 動き検出

<!DOCTYPE html>
<html lang=”en”>

<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<link rel=”stylesheet” href=”main.css” type=”text/css”>
</head>

<body>
<script language=”javascript”>

function stopVideo() {
console.log(“stopVideo()”)
document.getElementById(‘video’).pause();
}
function resumeVideo() {
console.log(“resumeVideo()”)
document.getElementById(‘video’).play();
}
function startVideo() {
var video = document.getElementById(‘video’);

navigator.mediaDevices.getUserMedia({ audio: true, video: { facingMode: “user” } })
.then(stream => video.srcObject = stream)
.catch(err => console.log(err.name + “: ” + err.message));
}
function diffVideo() {
var video = document.getElementById(“video”);
var prevImage = new Image;

setInterval(function () {
var canvas1 = document.getElementById(“canvas1”);
var ctx1 = canvas1.getContext(“2d”);

var canvas2 = document.getElementById(“canvas2”);
var ctx2 = canvas2.getContext(“2d”);

var canvasDiff = document.getElementById(“canvasDiff”);
var ctxDiff = canvasDiff.getContext(“2d”);

var img1 = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);　// 1をimg1へ
ctx2.putImageData(img1, 0, 0); // 1をcanvas2へ
ctx1.drawImage(video, 0, 0, canvas1.width, canvas1.height); // video を1へ
img1 = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);　// 1をimg1へ
var img2 = ctx2.getImageData(0, 0, canvas2.width, canvas2.height);　// 2をimg2へ

var dst = ctxDiff.createImageData(canvasDiff.width, canvasDiff.height);

for (var i = 0; i < img1.data.length; i = i + 4) {
var f1 = ~~((img1.data[i] + img1.data[i + 1] + img1.data[i + 2]) / 3);
var f2 = ~~((img2.data[i] + img2.data[i + 1] + img2.data[i + 2]) / 3);
var d = Math.abs(f2 – f1) > 40 ? 255 : 0;
dst.data[i] = dst.data[i + 1] = dst.data[i + 2] = d;
dst.data[i + 3] = img1.data[i + 3];
}

ctxDiff.putImageData(dst, 0, 0);
}, 1000 / 30);
}
</script>

<h1 id=”msg”>Camera 動き検出</h1>

<div>
<video id=”video” autoplay></video>
</div>
<div>
<button onClick=”startVideo()”>Start Video</button>
</div>
<div>
<button onClick=”diffVideo()”>Diff Video</button>
</div>

<div>
<canvas id=”canvas1″></canvas>
</div>

<div>
<canvas id=”canvas2″></canvas>
</div>

<div>
<canvas id=”canvasDiff”></canvas>
</div>
</body>

</html>

Video データ処理

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<body>
<script language=”javascript”>

function changeColor(newColor) {
var elem = document.getElementById(‘h1’);
elem.style.color = newColor;
}
function drawVideo(){
var video = document.getElementById(“v”);
var canvas = document.getElementById(“c”);
canvas.getContext(“2d”).drawImage(video, 0, 0, 480, 270);

}
function drawVideoBW(){
var video = document.getElementById(“v”);

setInterval(function(){
var canvas = document.getElementById(“c”);
var ctx = canvas.getContext(“2d”);
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

var src = ctx.getImageData(0, 0, canvas.width, canvas.height);
var dst = ctx.createImageData(canvas.width, canvas.height);

for (var i = 0; i < src.data.length; i=i+4) {
var y = ~~((src.data[i] + src.data[i + 1] + src.data[i + 2])/3);
src.data[i] = src.data[i+1] = src.data[i+2] = y;
src.data[i+3] = src.data[i+3];
}

ctx.putImageData(src, 0, 0);
}, 1000/30);
}
</script>

<h1 id=”h1″>Video 白黒化</h1>
<button onclick=”changeColor(‘blue’);”>blue</button>

<div>
<video id=v preload=’none’ onclick=’this.play();’ controls>
<source src=’test2.mp4′>
</video>
</div>
<div>
<button onClick=”drawVideo()”>Draw Color</button>
</div>
<div>
<button onClick=”drawVideoBW()”>Draw BW</button>
</div>
<div>
<canvas id=”c” width=”320″ height=”180″></canvas>
</div>
</body>
</html>