【その２】ZOOM, Teamsなどのためのサブタイトル（字幕）表示ツール【受信・表示部】
受信・表示プログラム
前回 https://qiita.com/quittardis/items/317df7b23a64e82bf6a2
の続きです。
前回の送信プログラムでudp経由で送られてきた全角漢字をカメラ画像にスーパー
インポーズして字幕として表示します。さらにこの画像をSpoutで仮想カメラ化して
ZOOMやTeamsで使えるようにします。
ソースコードのbugfix版はhttps://github.com/ultrahamlet/SjFX のsrcフォルダに置きました。
（buildが苦手という方は、このhttps://github.com/ultrahamlet/SjFX
gitにあるbinaryファイルで実験できる。
SjFX.exeが受信・表示プログラム。WindowsProject.exeが文字送信プログラム。
実験時にWebCamの接続とSpoutCamのインストールも忘れずに）
先ず、SpoutSDK https://spout.zeal.co/
をopenframeworksのプロジェクトフォルダと同じ階層に置きます。
openframeworksのアドオンは、
ofxNetworks
ofxXmlSettings
を追加します。
ofApp.hでinlcludeに以下の四行を追加します。
#include "ofxXmlSettings.h"
#include "..\..\SpoutSDK\SpoutSender.h"
#include <Windows.h>
#include "ofxNetwork.h"
ofApp.h
ofApp.hでinlcludeに以下のように変数を追加します。
ofVideoGrabber grabber;
//
char sendername[256]; // Sender name
SpoutSender sender; // Spout sender object
unsigned int senderwidth; // Dimensions of the sender can be independent
unsigned int senderheight; // of the application window if using an fbo
ofFbo oFbo;
ofFbo spFbo; // For texture send example
// udp FONT
ofxUDPManager udpConnectionRx;
ofxUDPManager udpConnectionTx;
string rxMessage;
string txMessage;
string recvStr;
string ostr;
BOOL received;
ofTrueTypeFont font;
ofApp.cppの#include "ofApp.h"以下の行を追加します。
主に漢字コードを変換する関数です。
#include <codecvt>
//--------------------------------------------------------------
std::wstring multi_to_wide_capi(std::string const& src)
{
std::size_t converted{};
std::vector<wchar_t> dest(src.size(), L'\0');
if (::_mbstowcs_s_l(&converted, dest.data(), dest.size(), src.data(), _TRUNCATE, ::_create_locale(LC_ALL, "jpn")) != 0) {
throw std::system_error{ errno, std::system_category() };
}
dest.resize(std::char_traits<wchar_t>::length(dest.data()));
dest.shrink_to_fit();
return std::wstring(dest.begin(), dest.end());
}
std::string wide_to_utf8_cppapi(std::wstring const& src)
{
std::wstring_convert<std::codecvt_utf8_utf16<wchar_t>> converter;
return converter.to_bytes(src);
}
std::string multi_to_utf8_cppapi(std::string const& src)
{
auto const wide = multi_to_wide_capi(src);
return wide_to_utf8_cppapi(wide);
}
std::string toUtf8(const std::wstring &str)
{
std::string ret;
int len = WideCharToMultiByte(CP_UTF8, 0, str.c_str(), str.length(), NULL, 0, NULL, NULL);
if (len > 0)
{
ret.resize(len);
WideCharToMultiByte(CP_UTF8, 0, str.c_str(), str.length(), &ret[0], len, NULL, NULL);
}
return ret;
}
ofApp::setup()
void ofApp::setup()に以下の行を追加します。
フォントの読み込みと、
udpの接続の設定です。
フォントはdataフォルダの下のFotnsにWindows/Fontsからコピーしておきます。
grabber.setup(ofGetWidth(), ofGetHeight());
senderwidth = ofGetWidth();
senderheight = ofGetHeight();
// Create an RGBA fbo for texture transfers
spFbo.allocate(senderwidth, senderheight, GL_RGBA);
oFbo.allocate(ofGetWidth(), ofGetHeight(), GL_RGBA);
//oFbo.getTextureReference().getTextureData().bFlipTexture = true;
// If no name is specified, the executable name is used.
sender.SetSenderName(sendername);
// Update caption in case of multiples of the same sender
ofSetWindowTitle(sender.GetName());
//
// Font setting
ofTrueTypeFontSettings fsettings("Fonts/meiryo.ttc", 24);
fsettings.addRanges(ofAlphabet::Emoji);//絵文字
fsettings.addRanges(ofAlphabet::Japanese);//日本語
fsettings.addRange(ofUnicode::Space);//スペース
fsettings.addRange(ofUnicode::IdeographicSpace);//全角スペース
fsettings.addRange(ofUnicode::Latin);//アルファベット等
fsettings.addRange(ofUnicode::Latin1Supplement);//記号、アクサン付き文字など
fsettings.addRange(ofUnicode::NumberForms);//数字？
fsettings.addRange(ofUnicode::Arrows);//矢印
fsettings.addRange(ofUnicode::MathOperators);//数式記号
fsettings.addRange(ofUnicode::Hiragana);//ひらがな
fsettings.addRange(ofUnicode::Katakana);//カタカナ
fsettings.addRange(ofUnicode::MiscSymbolsAndPictographs);//絵文字など
fsettings.addRange(ofUnicode::Emoticons);//エモーティコン
//settings.addRange(ofUnicode::KatakanaHalfAndFullwidthForms);//エモーティコン
//
if (!font.load(fsettings))
cout << "couldn't load font" << endl;
//
// udp connect
udpConnectionRx.Create();
udpConnectionRx.Bind(12345); //incomming data on my port # ...
udpConnectionRx.SetNonBlocking(true);
received = false;
ofApp::update()
void ofApp::update()を以下のリストを追加します。
udpデータを待ち受け受信します。
受信したデータは、recvStrにストアします。
grabber.update();
// UDP 受信
char data[512];
//unsigned short int *val;
udpConnectionRx.Receive(data, 512);
//std::cout << str << "-" << std::endl;
uint16_t *val = (uint16_t*)data;
//std::cout << val[0] << std::endl;
BOOL strOK = true;
for (int i = 0; i < sizeof(val); i++) {
if (val[i] < 256) { strOK = false; break; }
}
if (strOK) {
recvStr = data;
received = true;
std::cout << recvStr << std::endl;
// shift-jis -> utf8
ostr = multi_to_utf8_cppapi(recvStr);
std::cout << "Received" << std::endl;
}
ofApp::draw()
void ofApp::draw()に以下のリストを追加します。
受信したデータを表示し、Spoutで仮想カメラに送信します。
ソースコードのbugfix版はhttps://github.com/ultrahamlet/SjFX のsrcフォルダに置きました。以下のコードは、2月16日以降修正しています。それ以前のコードでは、SpoutCamに文字が出力されません。
oFbo.begin();
ofSetColor(255, 255, 255);
grabber.draw(0, 0);
// font.drawString(u8"漢字テスト", 0, 200);
if (received) font.drawString(ostr, 200, ofGetHeight()-30);
oFbo.end();
spFbo.begin();
//grabber.draw(0, 0);
if (flipY) {
ofScale(-1, 1);
ofTranslate(-ofGetWidth(), 0);
}
oFbo.draw(0, 0);
sender.SendFbo(oFbo.getId(), senderwidth, senderheight, false);
spFbo.end();
oFbo.draw(0, 0);
SpoutCamのインストール
最後にSpoutCam-2.023をインストールします。
SpoutCam-2.023\release\x64下の
_register_run_as_admin.bat
（zoom用に32bit版もインストールする。）
を、管理者として実行します。
これで、ZOOM、TeamsなどからカメラとしてSpoutを選択します。
あっ忘れてました。
dataフォルダ化に以下の内容のsttings.htmlを置いてください。
ここにはカメラに最適の縦横の値を書いておきます。
<settings>
<app>
<width>960</width>
<height>544</height>
</app>
</settings>
gitのbinの中のMySetting.exeでも設定できる。