WebRTC-控制傳輸內容

在視訊電話時，我們有時會不想要讓對方聽到聲音或是看到影像，WebRTC中也有這種功能，以下是一個簡單的例子(使用WebRTC二部曲-RTCPeerConnection-下部(實作)的例子過修改)。

原理

我們在上次的範例中直接將自己的資料流(localStream)傳給遠端，但因為local端和remote端都是同一個資料流，所以在改變資料流的內容的時候會連自己的都被改掉(你不想讓對方看到你的視訊影像，卻連自己都看不到自己的影像了)，所以我們就要先新增一個新的MediaStream專門給remote端使用，這樣我們就可以對這個remote端的資料流做處理也不會影響到local端的資料流了。

實作

Step 1

在上次的例子中新增兩個check boxs :

Step 2

新增onclick事件
這裡我們利用getAudio(Video)Tracks()[0]來取得資料流的資訊，然後將enabled屬性做調整就可以達到控制的目的

Step 3

將localStream複製成remoteStream丟給remote peer

WebRTC二部曲-RTCPeerConnection-下部(實作)

平台

• Visual studio 2012
• adapter.js(WebRTC跨平台的shim)

目的

這次實作我們要在同一個視窗中開啟兩個視訊畫面，當我們按下Start鍵時我們可以在第一個畫面(Caller)將webcam抓到的畫面顯示，而當我們按下Call鍵時會利用RTCPeerConnection連線取得Stream顯示在第二個畫面(Callee)，而HangUp鍵就是關閉連線，雖然這樣做實際性不高，但這樣的Demo可以很清楚地了解RTCPeerConnection的運作原理。

實作

Step 0 : adapter.js

在開始之前，我們要先解決一個擾人的問題-跨平台，就想我們在Demo getUserMedia的時候因為不同的Browser有不同的函式名稱，導致我們要去做一些處理才能確保他能在各個平台上運作，為了省去這樣的麻煩我們將使用adapter.js來cover這些問題。

Step 1 : html

我們一開始先設置需要的js及tag

Step2 : RTCPeerConnectionDemo.js

添加onclick事件給每個Button

Start : 利用webcam取得畫面(聲音)

Call : 設置RTCPeerConnection

1.設置Local跟Remote的Connection的handler

•  onicecandidate : 還記得上次的圖中的送信人(candidate)嗎?onicecandidate就是在將找到的送信人給記起來

• onaddstream(我們的demo中local peer並不需要接收stream所以local peer沒有此handler) : 當接收到stream時所要做的動作，在這裡我們將stream放到id為videoRemote的<video>中

2.將要傳送的stream放入connection中
3.建立offer及answer

• local Peer建立offer
• 將自己(local)的地址(local description)記下來
• 當對方(remote)收到地址(remote description)時記下來
• 對方(remote)也會把自己的地址(local description)記下來
• 對方(remote)發送answer給自己(local)
• 自己(local)會把對方的地址(remote description)記下來

HangUp : 關閉連線

Visual Studio 中斷點(break point) 介紹

這次要介紹的是在Visual Studio中的中斷點使用方式，我們在debugger的時候最簡單的方式就是將參數output到console上，可是這樣做很費時又很麻煩，且每次在做完debug之後往往又要把這些output刪除，學會中斷點出現之後，debug就會輕鬆很多了。

平台

• Visual Studio 2012

設置

在要中斷的行前面點【滑鼠左鍵】

設置完之後可以按【開始】讓我們來看看中斷點的作用 : 

中斷的情形

由上圖我們可以看到兩點 : 

1. 在中斷點的地方會有一個黃色箭頭還會反白字串，以方便程式設計師看到中斷的行位置
2. 程式的執行只會到中斷行的前一行而已(console沒有output代表Console.WriteLine沒執行)

控制

在中斷的情況下我們會看到控制項中有幾個按鈕，在這裡我只介紹【逐步執行】，按下【逐步執行】(或按F11)後會看到下面的畫面 : 

黃色箭頭下移一行，Console出現output

【逐步執行】就是一步步往下執行的意思，這個功能在Debug的時候非常好用。

監看式

在中斷的情況下對變數按【右鍵】>【加入監看式】就可以將變數家道【監看式視窗】中 :

紅色框【加入監看式】，黃色框【監看式】，綠色框【平行監看式】

在【監看式】中，我們可以將變數的【值】做改變，這樣我們就可以測試在不同的情況下程式的反應是不是如預期，而【平行監看式】就可以以執行緒做區分，在多工的程式中Debug更加一目了然。

功能

在【中斷點】上按【滑鼠右鍵】可以看到有一些功能可以調整 : 

功能

• 條件(因【叫用次數時】的功能可以被【條件取代】，所以就不多加描述了)

可以設定要中斷的條件，ex: num > 1000，下面可以選擇是要true的時候中斷還是要再狀態變更(true>false、false>true)的時候中斷

• 篩選

篩選主要適用於【多工】，它可以讓使用者決定要使用【中斷點】的執行緒或是機器

• 叫用時

可於每次【中斷】列印信息之後【繼續執行】，這個功能可以方便的觀察出變數的變化，也不用再將訊息output到console了

結論

在學校中通常都只講求理論，對於實作技巧的教學好像的沒那麼多了(像我就是一直到大四去實習才來學到這些Debug的技巧，真的浪費了我好多的時間QQ)，可是這些技巧又是寫程式的重要技巧，所以就在此講解，希望有幫到大家^^

利用指令碼匯出(匯入)資料庫

在SQL server中雖然有匯入匯出精靈，但她真的是不太好用，所以我這次要提供一個不同的匯出方式，也就是利用產生指令碼來匯出資料庫，可以讓大家多一種選擇

平台

• Microsoft SQL server 2012

步驟

Step 1

在要匯出的資料庫上按【右鍵】>【工作】>【產生指令碼】

Step 2

【下一步】

Step 3

這裡可以選擇要整個資料庫還是特定的物件，這個教學是要把整個資料庫給匯出所以選【編寫整個資料庫和所有資料物件的指令碼】>【下一步】

Step 4

先決定【檔案名稱】(也就是路徑)>【進階】>【要編寫指令碼的資料類型】選項改成【結構描述和資料】>【確定】>【下一步】

Step 5

【下一步】

Step 6

【完成】

Step 7 

之後去你儲存的路徑會看到一個.sql檔，將它點開，把裡面所有的內容複製。

Step 8

按下【新增查詢】>把剛剛複製的貼上>【執行】

結論

如果上列的步驟都有完成的話就可以看到一個你剛剛的資料庫了，完成，收工。

我個人是覺得這樣的方式比較快速，也不用東調西調的，希望有幫到大家^^

WebRTC二部曲-RTCPeerConnection-上部(架構介紹)

RTCPeerConnection讓我們可以簡單的實現網頁上的p2p傳送機制，在接下來的文章中要帶大家來了解這個陌生的朋友

架構圖

先看架構圖，待會看步驟會比較清楚

步驟

在開始實作之前，我先來解釋RTCPeerConnection的運作步驟，我以擬人化的方式講解，應該比較可以理解 :

1. 有一天Peter(Caller)想要寫信(stream)給Sunny(Callee)
2. Peter(Caller)先將信封袋(RTCPeerConnection)給準備好，然後拿到自己家的資料(CreateOffer)並記下自己的地址(SDP)
3. 但是Peter(Caller)並不知道Sunny(Callee)在哪裡，於是Peter(Caller)將自己的地址(SDP)送到一個收發站(server side)去等待Sunny(Callee)的到來
4. Sunny(Callee)她也想要跟Peter(Caller)寫信(stream)了，Sunny(Callee)到了收發站(server side)發現已經有Peter(Caller)的地址(SDP)了，於是Sunny(Callee)把Peter(Caller)的地址(SDP)記起來然後把自己的地址(SDP)寫在信封袋(RTCPeerConnection)上回傳給Peter(Caller)，這樣一來雙方都有對方和自己的地址(SDP)了
5. 同時，由於Peter(Caller)及Sunny(Callee)他們都被困在城牆(NAT or Fire Wall)內，所以就必須要把信交給人力資源銀行(ICE server)，他們會找到可以送信的人(candidate)
6. 於是Peter(Caller)和Sunny(Callee)終於可以藉由RTCPeerConnection傳信了，YA!!

我覺得RTCPeerConnection最難的就在於要理解他的運行，只要了解了，我們實作起來就會輕鬆許多，所以這次就到這裡，先把這寫消化，我們下次再來講實作的部分。

Hello SignalR

這次要介紹的是ASP.NET SignalR library，它可以讓我們很簡單的寫出Real-time的網頁程式，原本要使用web socket在那寫的老半天，又要考慮到跨平台所帶來的影響，而使用了SignalR就不需要再考慮這些了，因為它都可以幫你處理，詳細的原理可以參考【SignalR 再次超越你對 Web 的想像 - 建立即時互動的 Web】這篇，在這篇裡我會demo一個簡單的即時通訊網頁。

平台

• .NET Framework 4.5
• C#
• SignalR 2.0
• Visual Studio 2012
• Windows 8

實作(借用Tutorial: Getting Started with SignalR 2.0的例子)

Step 1

開啟WebSocket通訊協定

控制台>程式集>程式和功能>開啟或關閉Windows功能>Internet Information Service>World Wide Web功能>應用程式開發功能>勾選【WebSocket通訊協定】

Step 2

新增ASP.NET空白Web應用程式

選取【.NET Framework 4.5】>選取【ASP.Net空白Web應用程式】>按下【確定】

Step 3

安裝SignelR

開啟【套件管理器主控台】>鍵入【install-package Microsoft.AspNet.SignalR】>按【Enter】

Step 4

建立SignalR Hub 類別

方案總管中在方案上按【滑鼠右鍵】>【加入】>【新增項目】>【SignalR Hub 類別】>【新增】

在這個類別中我們可以撰寫signalR要做的函式，先把下面的code覆蓋初始的code : 

這裡不是很懂吧，沒關係，之後的說明會詳細解說。

Step 5

建立OWIN Startup類別

建立一個類別，將下列程式碼貼上 : 

OWIN為Open Web Interface for .NET的簡稱，簡單的來說就是可以把原本預設的server做變更，像是.NET通常都是使用IIS，使用了OWIN我們就可以任意的決定我們的server side要給誰處理，在SignalR中我們就要把後端交給SignalR Hub運作。

Step 6

建立.html及.js

Chat.html :
main.js :

注意 : Chat.html中script的載入順序一定要先jQuery再SignalR再<script src="signalr/hubs"></script>，signalr/hubs這個資料夾只有再run time的時候才會動態產生，它是SignalR用在jQuery及server端溝通上的管理。

Step 7

將Chat.html設為起始頁

Chat.html按【右鍵】>【設定為起始頁】

Demo

輸入名字

開啟多個Chat.html

開始聊天嘍

程式運作說明

利用chat.server.send(name, message);去叫ChatHub中的send method，然後ChatHub會用Clients.All.broadcastMessage(name, message);去叫用client中的broadcastMessage將資訊傳給client

參考資料

SignalR 再次超越你對 Web 的想像 - 建立即時互動的 Web

Tutorial: Getting Started with SignalR 2.0