取出js或是json檔案中的內容

在解析網頁的時候常常要到其js或是json中去取得資料，像是下面這兩個例子：

因此我寫了一個處理的function，可以輕鬆地拿到想要的資料：

步驟

1. 將空白刪除。

2. 將跳脫字元處理好。

3. 取出再"="跟"；"之間的字串。

參考

http://stackoverflow.com/a/5963202/3493127

在Chrome extensions中使用gif.js

最近看開chrome extension時遇到了gif.js使用上的問題，原因是在gif.js裡會使用到web worker，可是在chrome extension 中會出現SecurityError，搜尋google在stackoverflow中的一篇問答找到了原因，原來是因為chrome自身的bug所以讓extension無法讀取web worker。

步驟

1. 在chrome extension中加入patch-worker.js。
2. 將gif.js檔案中的['gif.worker.js']取代成[chrome.runtime.getURL('path/gif.worker.js')]。
(註：path為你放gif.js的路徑)

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 : 關閉連線

WebRTC首部曲-getUserMedia

之前已經看過了WebRTC的一些背景知識，現在就來看看要如何實作吧，首先我們要介紹的是getUserMedia，這個API是為了要讓broswer可以取得攝影機及麥克風的訊息，以前我們要使用攝影機通常都還是要安裝一些應用程式才能抓到攝影機及麥克風，可是getUserMedia不須安裝任何插件，哈哈，是不是很方便阿。

我們先來看一下getUserMedia這位主角的基本資料 :

Syntax

Parameter

• constraints : 設定media type
• successCallback : 當成功取得media stream所做的function
• errorCallback : 當發生錯誤時做此function

來看一下這個getUserMedia，它本身有三個parameters : 

constraints是對這個media type所做的設定，像是要取得影像還是聲音等等...。

successCallback是成功取得media stream之後要做的function，像是我們可能會想要把影像放到<video>裡顯示在網頁上。

而最後一個就是我們最不想看到的errorCallback了，如果錯誤發生(QQ)就會執行這個，這裡面可以擺一些補救措施，例如視訊發生錯無時會撥放別的影片，也可以用log紀錄錯誤訊息。

Demo

這個demo所要做的就是要單純的把攝影機及麥克風所取得的資訊顯示在網頁上。

Step1

首先我們要先讓media stream在網頁上有一個<video>(舞台)，這樣它才能大顯身手 :
注意 : 一定要把autoplay設好，要不然影像會被定格喔。

Step2

再來就是這次的重點了，我們要設定好3個parameters，才能使getUserMedia乖乖運轉不出錯 : 

這裡我們將constraints中的audio和video的屬性值都設為true，表示我們要取得audio和video，success中我們要將傳回來的stream放到<video>中，在這裡因為這個stream是一個Blob object，所以我們要將這個object轉成src可以吃的URL，這樣我們的<video>才不會拉肚子，最後我們在error中輸出log。

注意 : 有些人會懶得設定errorCallBack，但是我建議養成好習慣至少印出log，這樣在debug的時候會輕鬆很多唷(我自己就是血淋淋的例子@@)。

做到這裡先來讓它跑一下吧，應該會出現以下的錯誤 :

會發生這個錯誤是因為跨遊覽器的問題，getUserMedia在不同的browser中有不同的名字，像在chrome叫做webkitGetUserMedia，在FireFox中叫做mozGetUserMedia，這種情形其實並不少見，因此就產生了modernizr這個方便的小工具，它可以處理網頁跨平台所產生的問題，這邊我們先不使用modernizr，我們使用下列判斷來處理這個問題 :

Step3

在browser上執行，你應該會看到下面的提醒 :

按下允許之後就會出現你帥氣(漂亮)的臉了。

結論

這次的demo讓我們學習到了要如何藉由browser去存取webcam及mic，而getUserMedia它傳回的是一個stream，所以你當然可以對它做一些處理(像是淡化、銳化、長寬等等)，但是這個主題的重點沒有放在那裏，所以我就先不說了，今天就先到這裡，再見嘍。

參考資料

Capturing Audio and Video in HTML5