[TOC] 參考：[https://www.jianshu.com/p/17bdf7af4f89](https://www.jianshu.com/p/17bdf7af4f89) ## basic example的client 訪問https://ip:3004請求的文件是`extras/basic_example/public/index.html` 引入了兩個js腳本 ``` <script type="text/javascript" src="erizo.js"></script> <script type="text/javascript" src="script.js"></script> ``` ## 初始化流-讀取配置文件 scripts中設置了`window.onload()`的回調，所以加載的時候就直接運行了如下回調 ``` window.onload = () => { fillInConfigFlagsFromParameters(configFlags); window.configFlags = configFlags; const shouldSkipButton = !configFlags.forceStart && (!configFlags.onlySubscribe || configFlags.noStart); if (shouldSkipButton) { startBasicExample(); // 啟動 } else { document.getElementById('startButton').disabled = false; } }; ``` startBasicExample();的作用是獲取本地流和讀取配置文件 ``` localStream = Erizo.Stream(config); //創建本地流 window.localStream = localStream; // 把本地流賦值到window.localStream供全局使用 ``` ## Erizo對象 **Erizo**是erizo.js定義導出的全局對象, Stream是其函數對象，函數定義Stream.js中, 其提供了一些操作流的接口，包括播放，控制等等，并且還創建了事件分發器，用來處理publisher或者room的事件 ``` require('expose-loader?adapter!../lib/adapter.js'); const Erizo = { Room: Room.bind(null, undefined, undefined, undefined), LicodeEvent, RoomEvent, StreamEvent, ConnectionEvent, //Stream 使用Stream.bind創建返回一個函數對象賦值 //創建的時候該對象函數中的this指針置NULL， 調用時第一個參數默認為undefined Stream: Stream.bind(null, undefined), Logger, }; export default Erizo; ``` ## 創建token流程 ### 客戶端發起請求 客戶端完成本地媒體的初始化之后，將生成的**Roomdata**當作參數發送**createtoken**請求給服務端, 響應后調用callback進行回調 ``` //licode\extras\basic_example\public\script.js const createToken = (roomData, callback) => { const req = new XMLHttpRequest(); const url = `${serverUrl}createToken/`; req.onreadystatechange = () => { //設置響應回調 if (req.readyState === 4) { callback(req.responseText); } }; req.open('POST', url, true); req.setRequestHeader('Content-Type', 'application/json'); req.send(JSON.stringify(roomData)); }; createToken(roomData, (response) => {.....}); ``` ### 服務器接受請求并返回token和roomid數據 創建token請求會被發送到服務器，服務器的**express http框架**會進行處理，將請求通過匹配到對應函數，對請求進行處理，此處為創建完**token**并同時創建**room**，將**token**和**roomid**返回發送回去 ``` //licode\extras\basic_example\basicServer.js basicServer.js app.post('/createToken/', (req, res) => { console.log('Creating token. Request body: ', req.body); const username = req.body.username; const role = req.body.role; let room = defaultRoomName; let type; let roomId; let mediaConfiguration; if (req.body.room) room = req.body.room; if (req.body.type) type = req.body.type; if (req.body.roomId) roomId = req.body.roomId; if (req.body.mediaConfiguration) mediaConfiguration = req.body.mediaConfiguration; const createToken = (tokenRoomId) => { N.API.createToken(tokenRoomId, username, role, (token) => { console.log('Token created', token); res.send(token);//將token發送回去 }, (error) => { console.log('Error creating token', error); res.status(401).send('No Erizo Controller found'); }); }; if (roomId) { createToken(roomId); } else { getOrCreateRoom(room, type, mediaConfiguration, createToken); } }); ``` ## 初始化本地媒體 ### 收到token初始化Room對象，綁定事件回調 發送了**createroken**請求，客戶端收到**token**之后，根據返回的token(其中包含了服務端創建的room的一些信息)去初始化Room對象，并為一些事件綁定回調，比如房間連接成功了，流訂閱等等, 然后調用**localStream.init()** 初始化本地媒體 ``` //licode\extras\basic_example\public\script.js createToken(roomData, (response) => { const token = response; console.log(token); //創建房間 room = Erizo.Room({ token }); //創建訂閱流接口 const subscribeToStreams = (streams) => {...... }; //添加一些事件處理回調, room.addEventListener('room-connected', (roomEvent) => {......}); room.addEventListener('stream-subscribed', (streamEvent) => {......}); room.addEventListener('stream-added', (streamEvent) => {......}); room.addEventListener('stream-removed', (streamEvent) => {......}); room.addEventListener('stream-failed', () => {......}); if (configFlags.onlySubscribe) { room.connect({ singlePC: configFlags.singlePC }); } else { const div = document.createElement('div'); div.setAttribute('style', 'width: 320px; height: 240px; float:left'); div.setAttribute('id', 'myVideo'); document.getElementById('videoContainer').appendChild(div); localStream.addEventListener('access-accepted', () => { room.connect({ singlePC: configFlags.singlePC }); localStream.show('myVideo'); }); localStream.init(); } }); ``` 在**room.connect()**時候，會對得到的**token**進行解析獲得**erizocontroller**，也就是licode的媒體服務器入口的ip和port，建立ws連接，建立完成后，通過事件管理器（**EventDispatcher**）向上層拋出**room-connected**事件， **room-connected**事件的處理回調中，調用了**room.publish**和**room.autoSubscribe**進行推拉流 ## 事件處理 無論是Erizo.Room還是Erizo.Stream，都可以分別在Room.js和Stream.js中找到其對應的對象生成方式，在生成對象的過程中都可以看到是先從生成一個**EventDispatcher**，然后在其上面作派生的 ``` //licode/erizo_controller/erizoClient/src/Erizo.js //licode/erizo_controller/erizoClient/src/Room.js const that = EventDispatcher(spec); ``` **EventDispatcher**是一個事件處理器，在**Event.js**中可以找到，其維護了一個對象數組**eventListeners**，將事件和回調做了key-value的綁定，當事件發生的時候，外部調用dispatchEvent 遍歷搜索，執行其回調. ``` const EventDispatcher = () => { const that = {}; // Private vars const dispatcher = { eventListeners: {}, }; // Public functions // It adds an event listener attached to an event type. that.addEventListener = (eventType, listener) => { if (dispatcher.eventListeners[eventType] === undefined) { dispatcher.eventListeners[eventType] = []; } dispatcher.eventListeners[eventType].push(listener); }; // It removes an available event listener. that.removeEventListener = (eventType, listener) => { if (!dispatcher.eventListeners[eventType]) { return; } const index = dispatcher.eventListeners[eventType].indexOf(listener); if (index !== -1) { dispatcher.eventListeners[eventType].splice(index, 1); } }; // It removes all listeners that.removeAllListeners = () => { dispatcher.eventListeners = {}; }; // It dispatch a new event to the event listeners, based on the type // of event. All events are intended to be LicodeEvents. that.dispatchEvent = (event) => { if (!event || !event.type) { throw new Error('Undefined event'); } let listeners = dispatcher.eventListeners[event.type] || []; listeners = listeners.slice(0); for (let i = 0; i < listeners.length; i += 1) { try { listeners[i](event); } catch (e) { log.info(`Error triggering event: ${event.type}, error: ${e}`); } } }; that.on = that.addEventListener; that.off = that.removeEventListener; that.emit = that.dispatchEvent; return that; }; ``` 在使用**Erizo.Room({ token });**創建**Room**對象的過程中，可以看到其是先生成一個**EventDispatcher**對象然后在其上面進行擴展。 ``` room = Erizo.Room({ token }); window.room = room; ``` ## 推拉流 **publish**在**room-connected**之后發生 ``` //licode\extras\basic_example\public\script.js if (!onlySubscribe) { room.publish(localStream, options);//將本地媒體publish } ``` 該函數實際如下，根據**config**對流進行一些設置之后開始推流 ``` //licode\erizo_controller\erizoClient\src\Room.js that.publish = (streamInput, optionsInput = {}, callback = () => {}) => { const stream = streamInput; const options = optionsInput; //設置流的一些屬性以及會調 省略...... if (stream && stream.local && !stream.failed && !localStreams.has(stream.getID())) { if (stream.hasMedia()) { if (stream.isExternal()) { publishExternal(stream, options, callback); } else if (that.p2p) { publishP2P(stream, options, callback); } else { publishErizo(stream, options, callback);//推流 } } else if (stream.hasData()) { publishData(stream, options, callback); } } else { Logger.error('Trying to publish invalid stream, stream:', stream); callback(undefined, 'Invalid Stream'); } }; ``` 在**publishErizo中**發送了**SDP**，將流填充到本地數組進行管理， 創建流連接 ``` //licode\erizo_controller\erizoClient\src\Room.js const publishErizo = (streamInput, options, callback = () => {}) => { const stream = streamInput; Logger.info('Publishing to Erizo Normally, is createOffer', options.createOffer); const constraints = createSdpConstraints('erizo', stream, options); constraints.minVideoBW = options.minVideoBW; constraints.maxVideoBW = options.maxVideoBW; constraints.scheme = options.scheme; //發送publish信令到媒體服務器和SDP socket.sendSDP('publish', constraints, undefined, (id, erizoId, connectionId, error) => { if (id === null) { Logger.error('Error publishing stream', error); callback(undefined, error); return; } //填充流 populateStreamFunctions(id, stream, error, undefined); //創建流連接 createLocalStreamErizoConnection(stream, connectionId, erizoId, options); callback(id); }); }; ``` 創建流連接中添加了**icestatechanged**的失敗回調，以及調用了pc連接中的**addstream**接口 ``` //licode\erizo_controller\erizoClient\src\Room.js const createLocalStreamErizoConnection = (streamInput, connectionId, erizoId, options) => { const stream = streamInput; const connectionOpts = getErizoConnectionOptions(stream, connectionId, erizoId, options); stream.addPC( that.erizoConnectionManager .getOrBuildErizoConnection(connectionOpts, erizoId, spec.singlePC)); //綁定icestatechanged到failed的回調 stream.on('icestatechanged', (evt) => { Logger.info(`${stream.getID()} - iceConnectionState: ${evt.msg.state}`); if (evt.msg.state === 'failed') { const message = 'ICE Connection Failed'; onStreamFailed(stream, message, 'ice-client'); if (spec.singlePC) { connectionOpts.callback({ type: 'failed' }); } } }); //調用pcconnect連接中的添加流 stream.pc.addStream(stream); }; ``` 其中pc連接是定義**licode\\erizo\_controller\\erizoClient\\src\\ErizoConnectionManager.js**中的**class ErizoConnection**，其對瀏覽器原生的webrtc的js接口包了一層，并繼承了事件發生器，將有關連接以及媒體的事件拋到上層的事件處理器中進行處理, 此處調用了原生的接口**addStream**之后，通過后續的發送offer協商完成之后就會自動開始推流。