>  > 『リーフ』 純正 AZE0 電動格納式ネオンコントロール フルオートタイプ+昇降スイッチ パーツ 日産純正部品 コーナーポール フェンダーランプ フェンダーライト leaf オプション アクセサリー 用品
技術は私たちの力。技術は私たちの楽しみ。 Creative Developer BLOG 技術部ブログ
Technology is our strength. Technology is what we enjoy.

『リーフ』 純正 AZE0 電動格納式ネオンコントロール フルオートタイプ+昇降スイッチ パーツ 日産純正部品 コーナーポール フェンダーランプ フェンダーライト leaf オプション アクセサリー 用品

当社は、東京と札幌に事務所があるため、拠点間の打ち合わせにテレビ会議を行うことがよくあります。
普段はSkypeを利用しているのですが、たまに接続が不安定になり思うように会議が進められないことがあり、なんとかしなければいけないというのが、直近での課題としてありました。

そこで、隔週で各自持ち回りでやっている技術部勉強会のネタとして カワサキ純正 メーター スピード & LCD 28011-0553 JP店、前から気になっていたTwilioのプログラマブルVideoを使って、お手製のテレビ会議システムを作ってしまおう!ということでやってみました。

『リーフ』 デタッチャブルキャリア 純正 AZE0 電動格納式ネオンコントロール フルオートタイプ+昇降スイッチ パーツ 日産純正部品 コーナーポール フェンダーランプ フェンダーライト 2012/03~ leaf オプション アクセサリー 用品

ブラウザまたは 【送料無料】 195/65R15 15インチ BIGWAY ビッグウエイ TRG SS10 6J 6.00-15 DUNLOP ダンロップ EC202L サマータイヤ ホイール4本セット フジコーポレーション、iOS、Andoroidのアプリを通してテレビ会議を構築できるサービスで、Twilioが提供してくれる機能は主に以下の機能を提供してくれます。

フルオートタイプ+昇降スイッチ フェンダーランプ 『リーフ』 オプション フェンダーライト パーツ 電動格納式ネオンコントロール AZE0 アクセサリー 純正 日産純正部品 『リーフ』 コーナーポール leaf 用品 フェンダーライト

テレビ会議を開始したい各クライアント端末をセキュアでスピーディーに認証してくれて、いつでもテレビ会議を開始できる状態してくれます。

2.通話の開始

会議を開始したい人がRoomと呼ばれる会議室のようなものを用意して参加者を募ることができます。

3.受信と通話の受け入れ

Roomに入ってきた人同士をピアツーピアで接続し、映像+音声または、音声のみで接続をし、会議を始められます。マルチパーティーに対応しており複数人での同時利用に対応しています。


要するに、例えばAさんとBさんがテレビ会議を始めたいとき、まずAさんが会議室「秘密の会議」を作ります。
Aさんは、Bさんに「秘密の会議」室を用意したことをメールや口頭で伝えます。
Bさんは、会議室名に「秘密の会議」と入力してその会議室に入室します。
すでにAさんは会議室で待機しているので、Bさんが入室したタイミングで、AさんとBさんがお互いの映像と音声が表示され、会議を始められるというしくみです。

Javascriptベースでの開発に用いられる基礎技術

一見シンプルな仕組みですが、その裏では最新のテクノロジーがふんだんに用いられ、数年前に同じことをしようとすると、ものすごい労力と技術力を結集させないと実現できない SYGNHOUSE サインハウス B+COM MUSIC レシーバー RD 73364、高度な技術が詰め込まれています。
こんな素晴らしい仕組みをほんの数行のコードと僅かなコストで実装できるようにしてくれたTwilio社に感謝!

1.WebSocket

会議の開始や入室・退室のアクションをキャッチするためのしくみとして、WebSocket経由で Twilio に接続します。中間サーバーは不要で、通信はクラウドからエンドポイントへ直接処理されます。

2.イベント駆動型

会議室の中で起きる「〇〇さんが入室した」とか「退室した」という情報を「イベント」と言うかたちでTwilio SDKがJavaScriptで通知を出してくれるため、単純なコードで関数をより効果的に連鎖させることができます。

3.WebRTC 基盤への接続

WebRTCとは、プラグイン無しでウェブブラウザやアプリ間のボイスチャット、ビデオチャット等を実現可能にする、リアルタイムコミュニケーション用のAPIの定義です。
Twilioでは、このWebRTC基盤へ透過的に接続でき、低遅延で高品質なテレビ会議システムを構築することができるのです。

では早速作ってみよう!

まずは、Node.js環境でサンプルプログラムが動くか検証します。

Node.jsを3000番ポートで起動

ひとまず動きました。

ただ、一つ問題が発生。Chromeの場合、HTTPS環境じゃないとカメラやマイクへのアクセスを許可してくれなくて使えない!
FireFoxはひとまずOKだったので、動く環境は確認できましたが、FireFoxでしか使えないのはいまいち 、、、
そこでNode.jsをSSL化しようと試行錯誤

Node.jsをHTTPSサーバに変更

Node.js番ソースコードを以下のようにHTTPSサーバ仕様に修正

require('dotenv').load();
var https = require('https');
var fs = require('fs');
var ssl_server_key = '/certs/key';
var ssl_server_crt = '/certs/certificate';
var ssl_server_ca = '/certs/ca-certs';

var path = require('path');
var AccessToken = require('twilio').AccessToken;
var VideoGrant = AccessToken.VideoGrant;
var express = require('express');
var randomUsername = require('./randos');

/* Create Express webapp*/
var app = express();
app.use(express.static(path.join(__dirname, 'public')));

var options = {
key: fs.readFileSync(ssl_server_key),
cert: fs.readFileSync(ssl_server_crt),
ca: fs.readFileSync(ssl_server_ca),
token:'/token'
};
app.get(options, function(request, response) {
var identity = randomUsername();

/* Create an access token which we will sign and return to the client,
containing the grant we just created*/
var token = new AccessToken(
process.env.TWILIO_ACCOUNT_SID,
process.env.TWILIO_API_KEY,
process.env.TWILIO_API_SECRET
);

/* Assign the generated identity to the token*/
token.identity = identity;

/*grant the access token Twilio Video capabilities*/
var grant = new VideoGrant();
grant.configurationProfileSid = process.env.TWILIO_CONFIGURATION_SID;
token.addGrant(grant);

/* Serialize the token to a JWT string and include it in a JSON response*/
response.send({
identity: identity,
token: token.toJwt()
});
});

/* Create http server and run it*/
var server = https.createServer(app);
var port = process.env.PORT || 3000;
server.listen(port, function() {
console.log('Express ssl server running on *:' + port);
});

Node.js自体はSSLで立ち上がるようになりましたが、トークンの生成がうまく行かず、ちょっとハマりそうだったので [225/60R17.5 116/114L] GOODYEAR / UG FLEXSTEEL2 [タイヤのみ1本][2/-]、深追いせず一旦ここまで

使いやすいように改造しよう♪

Node.js環境で、カメラのプレビュー表示、Roomの作成、テレビ会議の開始、Roomからの離脱等一通りの動きは把握できたので、ここから少し改造。

【改造1】Node.jsで取得していたトークンをjQueryのajax通信で取得する

アクセス・トークンを生成するPHPを個別に用意

PHP、Node.js、Pyson等様々な言語用にサンプルプログラムを用意されているのですが、わかりやすいところでPHPを使います。

https://github.com/TwilioDevEd/video-quickstart-php
設定ファイルを編集
$ cp config.example.php config.php

設定ファイルの中身
<>
$TWILIO_ACCOUNT_SID = 'アカウントSIDを入力';
$TWILIO_API_KEY = 'API keyを入力';
$TWILIO_API_SECRET = 'APIシークレットキーを入力';



Twilio HelperライブラリをComposer経由でインストールする
$ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
$ php -r "if (hash_file('SHA384', 'composer-setup.php') === '669656bab3166a7aff8a7506b8cb2d1c292f042046c5a994c43155c0be6190fa0355160742ab2e1c88d40d5be660b410') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
$ php composer-setup.php
$ php -r "unlink('composer-setup.php');"

$ php composer.phar install
説明ではphpのビルトインサーバを立ち上げて実行すると書いてますが、わざわざそんなことシなくてもApacheで十分なのでトークン作成の準備はここまででOK

jQueryのajax処理でトークンを受け取る

Node.jsでは、立ち上げ時にトークを生成するようになっていましたが、Room作成のタイミングのonClickイベントで生成するようにしました。
$.ajax({
type: "GET",
url: '../php/token.php',
data : 'identity=' + identity + '&room=' + roomName,
success: function(ret){
var getToken = ret.replace(/\r?\n/g,"");

log("Joining room '" + roomName + "'...");
var connectOptions = { name: roomName, logLevel: 'debug' };
if (previewTracks) {
connectOptions.tracks = previewTracks;
}

Twilio.Video.connect(getToken, connectOptions).then(roomJoined, function(error) {
log('Could not connect to Twilio: ' + error.message);
});
},
error : function(ret){
log('Token作成エラー');
}
});
うまくいきましたね。
これでNode.js環境は特に不要になりました。

【改造2】参加者の名前をランダムで作成していたので、自分で名前を入力できるようにする

ここは特に難しいことはなく、名前を入力する項目を作って、jQueryで受け取るだけ

【改造3】カメラ画像を全画面表示できるようにする

実際のテレビ会議になると、相手のカメラ画像を全画面表示するのが一般的なスタイルだと思うので、サンプルになかった全画面表示ボタンを作りました。

全画面表示の実装

HTML側のボタン
<div rel="remote-media">全画面</div>

jQueryのclickイベントでキャッチ
$(document).on('click', ".full-screen", function() {
var id = $(this).attr('rel');
var target = "#" + id + " video";
var video_id = id + '_video';
$(target).attr('id',video_id);
var elem = document.getElementById(video_id);
ElementRequestFullscreen(elem);
});

/* エレメントをフルスクリーン表示する関数*/
function ElementRequestFullscreen(element){
var list = [
"requestFullscreen",
"webkitRequestFullScreen",
"mozRequestFullScreen",
"msRequestFullscreen"
];
var i;
var num = list.length;
for(i=0;i <>
if(element[list[i]]){
element[list[i]]();
return true;
}
}
return false;
}
うまくいきました。
元の画面に戻るときは「ESC」ボタンで

改造後

サスケに乗せてみる

社内の打ち合わせで、サスケに集合!ができると便利かなと思い、サスケ内に移植しました。

サスケにテレビ会議機能を実装!

はい LIMITED-CHITOSE ランドクルーザー LC200 アイライン Ver 1 塗装済み、うまくいきましたね。

まだまだやりたいことはたくさんありますが、

『リーフ』 純正 AZE0 電動格納式ネオンコントロール フルオートタイプ+昇降スイッチ パーツ 日産純正部品 コーナーポール フェンダーランプ フェンダーライト leaf オプション アクセサリー 用品

メール便可 HONDA ホンダ 純正 FREED フリード ステアリングホイールカバー 2017.12~仕様変更 08U98-TDK-010, YSS ワイエスエス リアサスペンション SPORTS LINE リアツインショック 【Zシリーズ】 Z366 スプリングカラー:レッド (シングルレート・25N/mm) ボディカラー:ブラック W650, エスペリア スーパーダウンサス リア左右セット デリカD:5 CV2W ESB-4841R ESPELIR Super DOWNSUS ダウンスプリング バネ ローダウン コイルスプリング【店頭受取対応商品】, 15インチ サマータイヤ セット【適応車種:インプレッサ(GH系 ハッチバック 15インチ装着車)】HOT STUFF エクシーダー E03 ダークシルバー 6.0Jx15Bluearth RV-02 195/65R15, トーヨータイヤ TOYOTIRES ウィンター トランパス TX winter TRANPATH TX 165/55R15 スタッドレスタイヤ タイヤ タイヤホイールセット 15インチ シュナイダー SCHNEIDER SQ27 15×5.5J +43 +50 4/100 冬用 新品 カードでポイント最大34倍 3/21(木)20:00~3/26(火)1:59迄 YOKOHAMA ヨコハマ アドバン ネオバ AD08R NEOVA サマータイヤ 215/45R18 BLEST Eurosport Type815 ホイールセット 4本 18インチ 18 X 7 +48 5穴 114.3, 【送料無料】 165/55R14 14インチ BRANDLE ブランドル M68B 4.5J 4.50-14 MICHELIN ミシュラン エナジー セイバー サマータイヤ ホイール4本セット, 【送料無料】 195/65R15 15インチ BRANDLE ブランドル E05 5.5J 5.50-15 MICHELIN ミシュラン プライマシー3(限定) サマータイヤ ホイール4本セット, 【メーカー在庫あり】 ギルズツーリング GILLES TOOLING バックステップキット FACTOR-X 6ポジション調整 14年-17年 MT-07 黒/赤 FXR-Y03-BR JP店, KAAZ LSD ニッサン シルビア PS13 Q's 91.01-93.10 リヤ用 BASICタイプ 2WAY DAN2010 14インチ サマータイヤ セット【適応車種:フィット アリア(GD系)】A-TECH シュナイダー スタッグ メタリックグレー 5.5Jx14Bluearth AE01F 175/65R14

『リーフ』 純正 AZE0 電動格納式ネオンコントロール フルオートタイプ+昇降スイッチ パーツ 日産純正部品 コーナーポール フェンダーランプ フェンダーライト leaf オプション アクセサリー 用品:BRIDGESTONE ブリヂストン ブリザック VRX スタッドレスタイヤ 175/60R14 79Q 4本セット システムキャリア アタッチメント SS0 スキー スノボ 斜積み エアトレック / CU2W CU4W / 年式H13.06-H17.10 タフレック TUFREQ ミツビシ 三菱 MITSUBISHI 精興工業

『リーフ』 純正 AZE0 電動格納式ネオンコントロール フルオートタイプ+昇降スイッチ パーツ 日産純正部品 コーナーポール フェンダーランプ フェンダーライト leaf オプション アクセサリー 用品.NSスタイル アイライン 左右セットセレナ・セレナハイブリッド(後期) C26系 H25.12~ LED・ハロゲン共通純正カラー塗装済み BLITZ ブリッツ DAMPER ZZ-R フルタップ車高調キット トヨタ ヴェルファイア AGH35W 15/01-18/01

カードでポイント最大34倍 3/21(木)20:00~3/26(火)1:59迄 YOKOHAMA ヨコハマ エコス ECOS ES31 サマータイヤ 215/45R17 WEDS ウェッズ ヴェルヴァ KEVIN(ケビン) ホイールセット 4本 17インチ 17 X 7.5 +45 5穴 100 【メーカー在庫あり】 三菱日立ツール(株) 日立ツール メガフィード ボールE EMBPE3100-100-09-ATH EMBPE3100-100-09-ATH HD

、「ブラウザベースのテレビ会議システムを作る」という目的は達成できたので、

『リーフ』 純正 AZE0 電動格納式ネオンコントロール フルオートタイプ+昇降スイッチ パーツ 日産純正部品 コーナーポール フェンダーランプ フェンダーライト leaf オプション アクセサリー 用品

、本日はここまで

ご清聴ありがとうございました。
記事一覧へ

New!

Category

Member

システム部
{yahoojp}jpprem01-zenjp40-wl-zd-73694