Clever Geek Handbook

Microsoft EdgeのORTCの概要

1年が経過した10月、 Microsoft EdgeでORTCをサポートする意向を発表しました。特に音声/ビデオ通信に重点を置いています 。 それ以来、私たちはこれに一生懸命取り組んできました。本日、実装のプレビューバージョンがWindows Insiderプログラムの一部として最新のEdgeビルドで利用可能になったことをお知らせいたします。







Microsoft Edge ORTCサポートは、オペレーティングシステム（OSG）チームとSkypeのコラボレーションの結果です。 Webプラットフォームを構築した20年の経験と、一般およびビジネスユーザー向けの最大のリアルタイムコミュニケーションサービスの1つを作成した12年の経験を組み合わせることにより、Skypeユーザーだけでなく、およびWebRTCと互換性のあるその他の通信サービス。



将来に目を向けると、ORTCの使用により可能になる多くのコミュニティソリューションを期待しています。 次に、ORTCの予備的な実装に含まれるものをより詳細に説明し、1対1のシナリオでオーディオとビデオの通信を構築する方法を簡単な例で示します。



私たちが提供するもの



次の図は、 ORTC API仕様の概要セクションの一部です。 これは、さまざまなORTCオブジェクト間の相互関係のトップレベルの説明を提供し、コードの個々のセクションの相互作用を説明するのに役立ちます：メディアストリーム（トラック）のキャプチャからRtpSenderオブジェクト、そしてビデオ/オーディオタグに送信できるRtpReceiverオブジェクトへのパス。 ORTC APIの学習を開始するときは、このチャートを参照として使用することをお勧めします。







ORTCの初期実装には、次のコンポーネントが含まれます。







暫定的な実装にはまだバグが含まれている可能性がありますが、典型的なシナリオで既に使用できると考えており、実際に実装を試みる開発者からのフィードバックを歓迎します。



WebRTC 1.0の実装に精通しており、WebRTC 1.0およびORTCでのオブジェクトサポートの進化について詳しく知りたい場合は、IIT RTC 2014カンファレンスのGoogle、Microsoft、およびHookflashからの次のプレゼンテーションに精通することをお勧めします。



1対1の対話用のアプリケーションを作成する方法



次に、ORTCの概要図から、コード内の単純な1：1オーディオ/ビデオ通信コードの実装に移行する方法について説明します。 この特定のシナリオでは、2つの対話クライアント（ポイント）として機能する2台のWindows 10マシンと、これらのポイント間の接続を確立できるようにこれらのポイント間で情報を交換するためのシグナリングチャネルとして機能するWebサーバーが必要です。



以下の手順は、クライアントのいずれかによって実行される操作に関連しています。 1対1の相互作用を確立するには、両方のポイントで同様の手順を実行する必要があります。 以下のコード例をよりよく理解するために、 Microsoft Edge Test Driveの例をサンプル実装として使用することをお勧めします。



ステップ1 。 1つのオーディオトラックと1つのビデオトラックを使用して、MediaStreamオブジェクトを作成します（Media Capture APIなどを使用）。 



navigator.MediaDevices.getUserMedia ({ "audio": true, "video": { width: 640, height: 360, facingMode: "user" } }).then( gotStream ).catch( gotMediaError ); function gotStream(stream) { var mediaStreamLocal = stream; … }


Microsoft Edgeでのメディアキャプチャのサポートの発表とともに、記事のMedia Capture APIの操作の詳細をお読みください。



ステップ＃2。 ICEコレクターを作成し、ローカル候補者がICEプロトコルを介して相互作用を確立して、リモートポイントに自分自身について通知できるようにします。 



 var iceOptions = new RTCIceGatherOptions; iceOptions.gatherPolicy = "all"; iceOptions.iceservers = ... ; var iceGathr = new RTCIceGatherer(iceOptions); iceGathr.onlocalcandidate = function(evt) { mySignaller.signalMessage({ "candidate": evt.candidate }); };


ユーザーのプライバシーを保護するために、ローカルホストのIPアドレスをIceGathererオブジェクトに渡すことができるかどうかをユーザーが制御できるオプションを追加しました。 対応する設定インターフェイスは、Microsoft Edgeブラウザーの設定にあります。



この例のテストドライブでは、TURNサーバーを展開しました。 帯域幅が制限されているため、デモページのみに制限しました。



ステップ＃3。 オーディオとビデオ用のICEトランスポートを作成し、ICEトランスポートでリモートICE候補を処理する準備をします 



 var iceTr = new RTCIceTransport(); mySignaller.onRemoteCandidate = function(remote) { iceTr.addRemoteCandidate(remote.candidate); }




別のオプションは、すべてのリモートICE候補をremoteCandidates配列に収集し、iceTr.setRemoteCandidates（remoteCandidates）関数を呼び出して、すべてのリモート候補をすぐに追加することです。



ステップ＃4。 DTLSトランスポートを作成する 



 var dtlsTr = new RTCDtlsTransport(iceTr);




ステップ＃5。 送信者オブジェクトと受信者オブジェクトを作成する 



 var audioTrack = mediaStreamLocal.getAudioTracks()[0]; var videoTrack = mediaStreamLocal.getVideoTracks()[0]; var audioSender = new RtpSender(audioTrack, dtlsTr); var videoSender = new RtpSender(videoTrack, dtlsTr); var audioReceiver = new RtpReceiver(dtlsTr, "audio"); var videoReceiver = new RtpReceiver(dtlsTr, "video");




ステップ＃6。 送信者と受信者の機能をリクエストする 



 var recvAudioCaps = RTCRtpReceiver.getCapabilities("audio"); var recvVideoCaps = RTCRtpReceiver.getCapabilities("video"); var sendAudioCaps = RTCRtpSender.getCapabilities("audio"); var sendVideoCaps = RTCRtpSender.getCapabilities("video");




ステップ＃7 ICE / DTLSパラメーターを交換し、受信/送信機能。 



 mySignaller.signalMessage({ "ice": iceGathr.getLocalParameters(), "dtls": dtlsTr.getLocalParameters(), "recvAudioCaps": recvAudioCaps, "recvVideoCaps": recvVideoCaps, "sendAudioCaps": sendAudioCaps, "sendVideoCaps": sendVideoCaps };


ステップ＃8 リモートポイントのパラメーターを取得し、ICEおよびDTLSトランスポートの作業を開始し、オーディオ/ビデオを送受信するためのパラメーターを設定します。 



 mySignaller.onRemoteParams = function(params) { // The responder answers with its preferences, parameters and capabilities // Derive the send and receive parameters. var audioSendParams = myCapsToSendParams(sendAudioCaps, params.recvAudioCaps); var videoSendParams = myCapsToSendParams(sendVideoCaps, params.recvVideoCaps); var audioRecvParams = myCapsToRecvParams(recvAudioCaps, params.sendAudioCaps); var videoRecvParams = myCapsToRecvParams(recvVideoCaps, params.sendVideoCaps); iceTr.start(iceGathr, params.ice, RTCIceRole.controlling); dtlsTr.start(params.dtls); audioSender.send(audioSendParams); videoSender.send(videoSendParams); audioReceiver.receive(audioRecvParams); videoReceiver.receive(videoRecvParams); };


ヘルパー関数のスケッチは次のとおりです。 



 RTCRtpParameters function myCapsToSendParams (RTCRtpCapabilities sendCaps, RTCRtpCapabilities remoteRecvCaps) { // Function returning the sender RTCRtpParameters, based on intersection of the local sender and remote receiver capabilities. // Steps to be followed: // 1. Determine the RTP features that the receiver and sender have in common. // 2. Determine the codecs that the sender and receiver have in common. // 3. Within each common codec, determine the common formats and rtcpFeedback mechanisms. // 4. Determine the payloadType to be used, based on the receiver preferredPayloadType. // 5. Set RTCRtcpParameters such as mux to their default values. } RTCRtpParameters function myCapsToRecvParams(RTCRtpCapabilities recvCaps, RTCRtpCapabilities remoteSendCaps) { return myCapsToSendParams(remoteSendCaps, recvCaps); }


ステップ＃9。 ビデオタグを介したリモートメディアストリームの表示と再生の開始 



 var videoRenderer = document.getElementById("myRtcVideoTag"); var mediaStreamRemote = new MediaStream(); mediaStreamRemote.addTrack(audioReceiver.track); mediaStreamRemote.addTrack(videoReceiver.track); videoRenderer.srcObject = mediaStreamRemote; videoRenderer.play();


一般に、これらは1年を書くための主要なステップです。 前述したように、 ORTCでの作業の例には 、ビデオプレビューの表示、エラーメッセージの処理などが含まれます。



1対1のコールを設定する方法を理解すると、各ポイントが他のグループと1対1で接続するグリッドトポロジを使用してグループセッションを作成する方法が明らかになります。 実装では並列複製が機能しないため、1：1の信号を使用する必要があります。そのため、接続ごとに独立したIceGathererおよびDtlsTransportオブジェクトが使用されます。



Microsoft EdgeでのORTC実装の追加詳細



ORCT仕様の最新の更新に合わせて実装を更新しています。 一般に、ORTC CGによる「実装の呼び出し」のリリース以降、仕様は非常に安定しているため、JavaScript APIレベルでの大幅な変更は想定されていません。 この点で、私たちの実装は、プロトコルレベルでブラウザ間の互換性のテストを開始する準備ができているようです。



実装のいくつかの制限を示す必要があります。





次は何ですか



実装は暫定的なものですが、フィードバックをお待ちしております。 これらは、今後数か月でMicrosoft EdgeでORTCを完全にサポートするのに役立ちます。 私たちの目標は、標準の実装を、将来のリアルタイム通信業界の最新のWebおよびその他のソリューションと互換性のあるものにすることです。



この目標に向けて、近い将来、SkypeチームはMicrosoft EdgeのORTC APIを使用して、SkypeおよびSkype for Business Webクライアントでの音声/ビデオ通信および対話の本格的なエクスペリエンスを作成し始めます。 チームはまた、標準のWebRTCプロトコルとの互換性に投資して、Skypeが主要なデスクトップ、モバイル、およびブラウザープラットフォームで動作するようにします。 SkypeおよびSkype for Businessをアプリケーションに統合する開発者向けに、 Skype Web SDKも更新され、ORTCおよびWebRTC APIを使用できるようになります。 このトピックに関する追加情報は、Skype、Skype for Business、およびMicrosoft Edgeを使用したWebのシームレスなコミュニケーションエクスペリエンスの有効化で利用できます。



さらに、 ORTC CGの数名のメンバーは、テクノロジーの早期適応について緊密に協力しました。 「 WebRTC Next Version（NV） 」に向けたWebRTCテクノロジーの進化に引き続き協力していく予定です。ORTCとの共同作業の先駆者たちが、すぐに経験を積むことを期待しています。



その他の例： ORTCと WebRTCのリンク 、ORTCとTwilio間の呼び出し 。



-マイクロソフトエッジ、プリンシパルプログラムマネージャー、Shijun Sun

-SkypeプリンシパルプログラムマネージャーHao Yan

-Bernard Aboba、Skypeアーキテクト、Skype


More articles:


All Articles