【その２】ZOOM, Teamsなどのためのサブタイトル（字幕）表示ツール【受信・表示プログラム】

8566 ワード
C++ openFrameworks Teams zoom C++ テキストリンク

【その２】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でも設定できる。