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>

Windows 10 でバックアップでエラー

Windows 10 のバックアップでエラーが出ているのに気が付きました。

コントロール パネル→システムとセキュリティ→ファイル履歴→詳細設定
→ファイル履歴イベントログを開いて最新のイベントまたはエラーを表示


ここで、次のエラーが出ています。

構成 C:\Users\xxx\AppData\Local\Microsoft\Windows\FileHistory\Configuration\Config でユーザー ライブラリの変更のスキャンと変更されたファイルのバックアップを実行できません

コントロール パネル→システムとセキュリティ→ファイル履歴→除外するフォルダーで、お気に入り C:\Users\xxx を除外することにより、エラーが解消しました。

コントロールパネル→システムとセキュリティ→ファイル履歴 で、ファイルが最後にコピーされたのは・・・に日時が正しく記録されていればOKです。

ファイルをバックアップから戻すには、コントロール パネル→システムとセキュリティ→ファイル履歴→個人用ファイルの復元 から


または、Explorer から、復元したフォルダーを右クリック→以前のバージョンの復元 から


wordpress.com から引っ越し

uchukamen.wordpress.com から、Willnet のuchukamen.com/wordpress へ引っ越しましたが、コンテンツの引っ越しで試行錯誤したので、そのメモです。

最初に、All-in-One WP Migrationプラグインを使用してみましたが、エラーになってうまくいきませんでした。次に、Duplicator プラグインも試してみましたが、エラーになってうまくいきませんでした。試行錯誤した結果、
最終的に DeMomentSomTres Export でうまくいきました。
uchukamen.wordpress.com の内容をエクスポートするには、標準メニュの設定→コンテンツをエクスポートと、メディアライブラリのエクスポートを使用しました。

エクスポートしたデータの取り込みは、DeMomentSomTres Export を使用しました。 DeMomentSomTres Export をインストールした状態で、ツール→WordPress のインポートにより、メディアへのリンクの修正も自動的に行ってくれました。

この接続ではプライバシーが保護されません

証明書を誤って設定した場合のGoogle Chrome のエラーメッセージ

aaaaa.com では、悪意のあるユーザーによって、パスワード、メッセージ、クレジット カードなどの情報が盗まれる可能性があります。 詳細 NET::ERR_CERT_COMMON_NAME_INVALID 一部のシステム情報とページのコンテンツを Google に送信して、セーフ ブラウジングの改善にご協力ください。プライバシー ポリシーセキュリティで保護されたページに戻る詳細情報を表示しない

このサーバーが aaaaa.com であることを確認できませんでした。このサーバーのセキュリティ証明書は bbbbb.com から発行されています。原因としては、不適切な設定や、悪意のあるユーザーによる接続妨害が考えられます。

aaaa.com にアクセスする(安全ではありません)

リモートパーティがトランスポートストリームを終了したため、認証に失敗しました。

表題のエラーが発生。

‘/’ アプリケーションでサーバー エラーが発生しました。

説明: 現在の Web 要求を実行中に、ハンドルされていない例外が発生しました。エラーに関する詳細および例外の発生場所については、スタック トレースを参照してください。 

例外の詳細: System.IO.IOException: リモート パーティがトランスポート ストリームを終了したため、認証に失敗しました

スタック トレース:

[IOException: リモート パーティがトランスポート ストリームを終了したため、認証に失敗しました。] System.Net.Security.SslState.StartReadFrame(Byte[] buffer, Int32 readBytes, AsyncProtocolRequest asyncRequest) +6803088 System.Net.Security.SslState.StartReceiveBlob(Byte[] buffer, AsyncProtocolRequest asyncRequest) +132 System.Net.Security.SslState.CheckCompletionBeforeNextReceive(ProtocolToken message, AsyncProtocolRequest asyncRequest) +281 System.Net.Security.SslState.StartSendBlob(Byte[] incoming, Int32 count, AsyncProtocolRequest asyncRequest) +49 System.Net.Security.SslState.ForceAuthentication(Boolean receiveFirst, Byte[] buffer, AsyncProtocolRequest asyncRequest) +162 System.Net.Security.SslState.ProcessAuthentication(LazyAsyncResult lazyResult) +542 System.Net.TlsStream.CallProcessAuthentication(Object state) +42 System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx) +228 System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx) +21 System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state) +64 System.Net.TlsStream.ProcessAuthentication(LazyAsyncResult result) +795 System.Net.TlsStream.Write(Byte[] buffer, Int32 offset, Int32 size) +52 System.Net.PooledStream.Write(Byte[] buffer, Int32 offset, Int32 size) +21 System.Net.ConnectStream.WriteHeaders(Boolean async) +388

[WebException: 接続が切断されました: 送信時に、予期しないエラーが発生しました。。] System.Net.HttpWebRequest.GetResponse() +1399 System.Xml.XmlDownloadManager.GetNonFileStream(Uri uri, ICredentials credentials, IWebProxy proxy, RequestCachePolicy cachePolicy) +83 System.Xml.XmlDownloadManager.GetStream(Uri uri, ICredentials credentials, IWebProxy proxy, RequestCachePolicy cachePolicy) +99 System.Xml.XmlUrlResolver.GetEntity(Uri absoluteUri, String role, Type ofObjectToReturn) +69 System.Xml.XmlTextReaderImpl.FinishInitUriString() +76 System.Xml.XmlTextReaderImpl..ctor(String uriStr, XmlReaderSettings settings, XmlParserContext context, XmlResolver uriResolver) +186 System.Xml.XmlReaderSettings.CreateReader(String inputUri, XmlParserContext inputContext) +66 System.Xml.XmlReader.Create(String inputUri, XmlReaderSettings settings, XmlParserContext inputContext) +45 System.Xml.Linq.XDocument.Load(String uri, LoadOptions options) +45 h

原因は、XDocument.Load で読み込んでいたrssのサービスが終了していたため。

宇宙仮面のSSL対応

放置状態が続いていたuchukamen.comですが、再開するにあたって、まずSSL対応にしましたが、いろいろと大変だったので、そのメモです。

これまで、uchukamen.com は Willnet のWASP-10というプランでホスティングしていました。WASP-10はSSL未対応のプランです。2015年ごろはSSL未対応でもあまり問題はなかったのですが、最近はブラウザが 安全ではないと表示するようになり、SSL未対応だと危ないサイトのように表示されてしまい、いまいちです。

デスマっている間に、世の中はいろいろ進歩していて、Willnet のレンタルサーバープランWASP3プランでは、Let’s Encryptにより無料でSSL対応ができるようになっていました。 そこで、Willnet のWASP-10プランから、Willnet でWASP3を申し込みました。このさい、WASP-10から、WASP3のプランを変更した場合、サイトを移行する必要があります。具体的には、WASP-1oのコンテンツをWASP3へ移行する必要があります。このとき、IPアドレスも変更になります。具体的には、IP aaa.bbb.ccc.xxx というIPアドレスから、aaa.bbb.ccc.yyy へ変更になります。

以下は、その後の手順です。

  1. WillnetのWASP3を申し込む。
  2. Plesk で顧客(uchukamen)を登録する
  3. ドメイン(uchukamen.com)を追加する
  4. ftpユーザーを追加する。このとき、パーミッションがデフォルトで読み・書きともにオフとなっているので、可とする必要があります。
  5. DNSを新しいIPに変更する
  6. uchukamen.com のコンテンツを 新しいサイトに発行する
  7. ドメイン→ホスティング設定で、SSL/TLSサポートをチェック、SEOに対するHTTPからHTTPSへの購入的301リダイレクトをチェック
  8. ドメイン→Let’s Encrypt でメールアドレスを設定、現在の証明書で新しい証明書(w25-2018*)を選択し、インストールする。