Interprefy iframeウィジェットの埋め込みに関する技術ガイド

Interprefyは、あらゆるプラットフォームで開催されるイベントの言語の壁を取り除きます。私たちは80以上のウェブ会議、ミーティング、イベントプラットフォームと統合し、以下を提供します：

同時通訳
AI 音声翻訳
手話通訳
自動ライブ字幕
機械翻訳されたライブキャプション／字幕

Interprefy'のレスポンシブ言語セレクタウィジェットは、これらのサービスへの視聴者のアクセスを3つの異なる方法で提供します：

postMessage付きiframeウィジェット
言語セレクターポップアップ
新しいブラウザウィンドウ

主要用語

Interprefy iframe ウィジェット
イベントページに埋め込むことができるレスポンシブな言語セレクターおよびプレーヤーです。参加者はこれを使用して、希望する通訳言語、字幕言語、または利用可能なアクセシビリティオプションを選択します。

イベントトークン
Interprefy が提供する、イベント用のユニークなエントリーコードです。以下の例にあるデモトークンを、イベント用に提供されたトークンに置き換えてください。

postMessage API
埋め込み Interprefy ウィジェットが、参加者が言語を変更したときやフロア音声をミュートすべきときなど、ホストページへイベントを送信できるブラウザ API です。

開始する前に

以下が揃っていることを確認してください：

Interprefy のイベントトークン
イベントページの HTML または JavaScript を編集する権限
イベントで有効になっているサービス（通訳音声、AI音声翻訳、手話通訳、ライブ字幕など）の確認
事前に選択された音声または字幕言語に必要な3文字の言語コード

オプション1：postMessage付きiframeウィジェット

Interprefy の言語セレクターを、既存のウェブページに直接統合するには、ウィジェットとして iframe に配置するだけで、2つの簡単な手順で行えます: :

iframe タグを使用して Interprefy のログインリンクを開きます。以下の形式です: https://interpret.world/integrationlink?token=thisisyourtoken
“thisisyourtoken” をInterprefyが提供する実際のイベントトークンに置き換えてください。.

ウィジェットを構成するための追加クエリパラメータが利用可能です：

video=“true / false”
このパラメータは手話に使用され、デフォルト設定は false です。
captions=“true / false”
true に設定された場合、このパラメータは Interprefy ウィジェットが利用可能な場合に字幕を表示することを意味します。イベントに字幕が含まれていない場合、true に設定しても、目のアイコンを表示する以外の効果はありません。
lang=“ENG / 3文字の国コード”
このパラメータは、統合者がプログラムで言語を変更できるように、言語を事前に選択するために使用されます。デフォルト設定はなしです。
audio-“真 / 偽”
このパラメータが false に設定された場合、イベントはキャプションのみのイベントになります。つまり、音声による解釈がなく、表示されたキャプションだけが提供されるイベントです。また、ヘッドフォンのアイコンも削除されます。なお、デフォルトの動作は true であるため、このパラメータを true に設定することは通常行われません。
cc=”ENG / 3文字の国コード”
ウィジェットを開いたときに字幕言語を設定された言語に設定します。ウィジェットが開かれた後でも、ユーザーが変更できます。

Interprefyウィジェットとのやり取りは、以下のpostMessage APIを使用して行います

window.addEventListener("message", (event) => {…})

1. 言語変更イベント

ユーザーがウィジェット内のコントロールを使用して言語を選択または再選択すると、言語変更イベントがトリガーされます。例えば、ウィジェットで英語を選択した場合、以下のイベントが発行されます：

{
event:”language-changed”,
language:”ENG”
}

2. フロアミュートイベント

通訳者が翻訳を開始したときにフロアミュートイベントがトリガーされます。これにより、ホストプラットフォームはソースオーディオをミュートして応答できます。例えば、ユーザーがフランス語チャンネルを購読しており、フランス語の通訳者がそのチャンネルで話し始めると、以下のイベントが発行されます：

{
event:”floor-mute”,
floorMute:”true”,
issuerLang:”FRA”
}

以下は iframe コードの例です:

<!DOCTYPE html>

<html>

<head>

<title>Interprefy iFrame 統合サンプルページ</title>

</head>

<body style="margin:0;">

<iframe id="interprefyiFrame"

src="https://interpret.world/integrationlink?token=livedemo&captions=true"

style="position: relative; width:300px;height:100vh"

scrolling="no"> </iframe>

</body>

</html>

最小幅が300px、最小高さが100vhです。プラットフォームはユーザーインターフェースのデザインに合わせて、より大きなiframeサイズを使用できます。Interprefyはビデオウィンドウの横側に配置することを推奨しています。.

参加者はウェブキャストと同じページ上に言語セレクターが表示されるのを確認できます。デモコードは従来の通訳音声と Interprefy AI 音声翻訳の両方がループで実行されています。ユーザーは好みの言語を選択して音声を聞くことができます（キャプションの選択は表示されますが、デモ状態ではキャプションは実行されていませんので、キャプションのテストを希望する場合はチームにご連絡ください）。言語が選択されたら、ウェブキャストの元の音声をミュートしてください。. 

推奨事項:

ウィジェットは、ユーザーログインで保護されたページにのみ配置し、過剰なトラフィックを防止してください。.
インタプリティングが必要なユーザーのみがウィジェットを起動できるように、ボタン（例: "interpreting"）を追加します。.

例：ON24イベントプラットフォームに埋め込まれたInterprefy iframeウィジェット

オプション 2: 言語セレクタポップアップ

ウェブサイトに小さなボタンまたはリンクを追加し、2つの簡単な手順で言語選択ポップアップを開くことができます：

以下の短いHTMLスニペットをウェブキャストページに追加してください：

window.open('https://interpret.world/ integrationlink?token=thisisyourtoken', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar= no,scrollbars=no,resizable=no,width=400,height=300');

“thisisyourtoken” をInterprefyが提供する実際のイベントトークンに置き換えてください。.

参加者が追加されたボタン/リンクをクリックし、言語を選択すると、リアルタイム通訳をすぐに聞くことができます。二つの音声ストリームを聞かないようにするためには、元の会議音声をミュートする必要があります。.

例：イベントプラットフォーム Zuddl の言語選択ポップアップ

オプション3: 新しいブラウザウィンドウ

第3のオプションは、リンクまたはボタンを追加して、セレクタを新しいインターネットブラウザウィンドウで開くことです。.

参加者に以下のリンクを送信し、新しいブラウザウィンドウに貼り付けるよう依頼してください：

https://interpret.world/integrationlink?token=livedemo (where livedemo is replaced with the token for your event)

2. 参加者は Interprefy が提供するイベントトークンを入力します。.

参加者がクリックして言語を選択すると、リアルタイム通訳をすぐに聞くことができ、ライブキャプションにアクセスできるようになります。音声通訳の場合、二重の音声が聞こえないように元のウェブキャスト音声をミュートする必要があります。.

Interprefy iframeウィジェットの埋め込みに関する技術ガイド

Interprefy’のソリューションをブラウザベースの会議プラットフォームに統合し、Interprefy iframeウィジェットを埋め込むガイド。.