カテゴリー: 未分類

WebRTCで動画配信に携わっているとブラウザでもZoomのようにバーチャル背景できないか。という要望がでてきたので、検索したところ、「JavaScriptでバーチャル背景」というそのものを公開してくださってるありがたいサイトがあったので、参考にして動くものをこのサイトに配置した。カクカクするものの、多くないステップ数で人を判断してくり抜いてくれる素晴らしいものでした。これを今後応用・適用して、このサイトの当初からのゴールの「Web会議システム」を作ってこうと思う。

メニュー＞分室＞WebRTC バーチャル背景
に動くものがあります。「Try」ボタンを押すと画面下にバーチャル背景の動画が表示されます。

先週末は、セレクトボックス風のli+aタグでプルダウンを作成したのと、CSS3で拡大縮小ボタンを作成していました。どちらも、業務利用可能なレベルまで作り込んでおいたので、もしよければお使いください。HTMLソースを開いてコピペすれば動きます。

当サイトの「分室」はそのテーマに沿ってシンプルなHTMLにしているので、余分なコードがなく、分かりやすいのがよいのですが、ふと「味気ないな。」と思ってしまいました。
なので、デザインを良くするライブラリについて考えてみた。

前々から気になってた「Bootstrap」ありきですけど、私が求める要件は５つありました。

A．ガリガリコーディングしなくても数行で良さげなデザインにしたい。
B．スマホなら自動的に縦長レイアウトになってほしい。
C．後付で簡単にデザイン変更できるのがよい。
D．Web会議のUI制作でも使えるのがよい。（元々、Bootstrapだった）
E．よく使われているものがよい。（GitHubのCSSFrameworkで一番人気）

改めて「Bootstrap」を調べてみたらこれら満たしていたので、今後は、これで制作してこうと思います。

OSやブラウザの判定をしようと、久々にUserAgentを調べていたら、GoogleがUserAgentを凍結するという記事を見つけました。数ヶ月前から発表されてたようですが、Chrome85あたりから本格導入を計画しているそうです。
UserAgentが複雑になりすぎていることや、フィンガープリントに利用されるということから凍結するということらしいです。
一方、これまでこのUserAgentでブラウザのバグを回避してきたのも事実。ブラウザバグは今後もゼロになることはないので、UserAgentに変わるなにかで判定できるようにしてほしいところですね。

調べたらChromeとEdgeは「User Agent Client Hints」というのである程度判定できるようになるらしいですが、OSのバージョンやモバイルかどうかとかも判定できるようになるのか？まだわかりません。Firefoxは独自仕様の予定、Safariは今後検討と、ブラウザ間でバラバラのようです。（あら、またブラウザごとに違うのね。。だったら、UserAgentを整備し直すでよくないだろうか？）

JavaScriptで「OS、ブラウザ判定」する方法を下記へまとめておきました。

メニュー＞分室：OS、ブラウザ判定

ネットにあるAR.jsとA-Frameを使ったデモを試して、マーカーベースのデモを１つ作りました。公式サイトや試したデモの掲載元や、マーカーメイカーのリンクを集めて、AR.jsのページを作成しておきました。　当ホームページのメニュー＞分室：AR.jsとA-Frame(VR)からいけます。
興味あればご覧ください。

Zoomなど共有した画面にお絵描きできるのですが、動画にはお絵描きする機能が見つからないので、前の投稿で話した手書きのホワイトボードに対してリモートでお絵描きできません。
そこで、動画にお絵描きできるツールをWeb会議に組み合わせたら使えるのではと考えました。

当サイトのWeb会議はWebRTCでブラウザで使えるものですから、JavaScriptで動画にお絵描きできるものがよさそうと探したところ「WebAR」というのがヒットしました。

当サイトのWeb会議のユースケースは他でまだない↓これとしてみたいと考えました。

“WebRTC（画面共有＋動画）＋手書きホワイトボードの動画配信＋WebARで動画へお絵描き”

＜方式案＞
ポイントは参加者がWebARで書いたお絵描きを手書きホワイトボードの動画に乗せてみんなで同じ絵を見せるというところですが、思いついたのは下記２案です。

A）WebSocketで新たなセッション貼ってお絵かき情報をそれに乗せて全員へ配信してWebARで各参加者の動画に描写。

B）それとも手書きホワイトボードを写しているスマホに情報送信して、そこでWebARを動かして動画加工して、それをTV会議で配信。

後者のほうがシンプルかな。

＜WebARのライブラリ＞
WebARにはマーカーレスでできるものと、被写体にマーカーを要するものの２系統あるらしいのですが、今回は、手書きのホワイトボードという平面写すのでどちらでもよいのかな？
（平面と考えたらもっとシンプルなマーカーでもよいのかもと思ったが、実験兼ねて今回はARとしておこう。）

WebAR
└マーカーを利用するもの(詳しくはこちら(外部))
　└A-FrameとAR.js(公式サイトはこちら(外部)）
追記：AR.js Ver3でイメージトラッキングとロケーションベースもできる。
└マーカーレスのもの(詳しくはこちら(外部))
　├AR Quick Lookというブラウザ機能(iOS12以降)
　└model-viewer(ARCore対応デバイス)
　　

私はゼロから創造するのに手書きのホワイトボードを使います。テレワークになってZoomなどについている電子ホワイトボードを試してみたのですが、操作の煩わしさに注意が削がれてイマイチでした。そこで、１００円均一で買った手元のホワイトボードを使って、Web会議で会話できたらより良くなるのではと考えました。

必要なもの
＜最低限＞
　・ホワイトボード（１００円）
　・アーム式スマホスタンド（２００〜１０００円）
　・スマホ（音声と、動画はホワイトボード撮影用）
＜あったら良いもの＞
　・ノートパソコン
　　→動画配信されたホワイトボードをPrintScreenで保存加工
　　→デスクトップレコーダを使ってTV会議を録画。
　　→他の資料の参照や資料作成

あと、Web会議は当サイトので十分いけます。
よかったらお使いください。

テレワークしていて２画面で作業したいシーンがたまにあり、サブディスプレイが欲しくなりました。自室のテレビへHDMIで接続することも考えたのですが、テレビを移動したりが大変なので、今回は、スマホをサブディスプレイにしてみます。
さっそく、スマホスタンドを調べてみたところ、
↓ダイソーのアーム型スマホスタンドが安く、高さ角度も自由自在で、最もよさそうです。
https://dannyoh.info/?p=15904
ネットで売ってないかな？

”数式で”に新たなコンテンツを追加しました。簡単な的あてゲームです。
　メニュー＞いろいろ＞「数式で動く的をつかまえて」
から遊べます。左ペインの再生ボタン（▶）２つをクリックすると的が動きだします。赤い的の中心をマウス（スマホなら指）で、クリックした状態ではじき出す。赤い的を枠外にはじき出せたらクリアです。

貼り付けていたPaypayの２次元バーコードの読み取りがうまくできなかったようなので、貼り付け直しました。