摘要：主要部分如下瀏覽器調(diào)用攝像頭拍照瀏覽器調(diào)用攝像頭需要全新的對象，，通過此接口，可以調(diào)用攝像頭和麥克風(fēng)，調(diào)用時需要用戶授權(quán)方可開啟。該方法參數(shù)為，返回值為一個標準對象。

標題為最近遇到的一個實際要求，題目很簡單，做起來挺費心費力。因為兼容性及潛在問題，目前單純做到desktop chrome only。參考資料多見于 http://www.html5rocks.com/zh/tutorials/，可自行搜索相關(guān)內(nèi)容。

若排版亂掉，查閱https://www.zybuluo.com/bornkiller/note/7064即可。

    

        

            
            Snap Photo
            Upload Photo                
        
        

                                
        
    
              

瀏覽器調(diào)用攝像頭需要全新的BOM對象，navigat.webkitGetUserMedia，通過此接口，可以調(diào)用攝像頭和麥克風(fēng)，調(diào)用時需要用戶授權(quán)方可開啟。

攝像頭畫面實時顯示

var video = document.querySelector("#source");
var sourceConfig = { "video" : true };
if(navigator.webkitGetUserMedia) { 
    navigator.webkitGetUserMedia(sourceConfig, function(stream) {
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
    }, defaultErrHandle);
}

調(diào)用很簡單，將攝像頭捕獲的二進制流轉(zhuǎn)換為DomString，再用video節(jié)點引用即可，具體接口可自行查詢。

截圖

var canvas = document.querySelector("#snapshot");
var context = canvas.getContext("2d");
var snapTrigger = document.querySelector("#snapTrigger");
snapTrigger.addEventListener("click",function(e){
    context.drawImage(video, 0, 0 ,600,480);
})

用canvas畫布繪制當前幀的像素信息。

前兩步順分順水，到這一步的時候出現(xiàn)第一次近乎絕望的心情，當JAVASCRIPT一腳踩入二進制的世界，F(xiàn)E的世界觀被震撼到。

Canvas ----> Blob
Canvas有一個保存當前畫布的方法
canvas.toDataURL("image/jpeg")，返回值是一個data-url shema，通用格式為data:mimeType,base64,encodeString，但實際需要的是二進制對象，所以需要轉(zhuǎn)換，從data-url到blob對象，我最終也沒有搞明白Base64 及相關(guān)的編碼/解碼問題，只是得到了轉(zhuǎn)換的函數(shù)。函數(shù)內(nèi)部涉及到兩個很少用到的對象和一個全局方法，uInt8Array，Blob和window.atob()方法，有興趣的自行g(shù)oogle。。

function canvasToBlob(dataURL){
    var BASE64_MARKER = ";base64,";
    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(":")[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;
    var uInt8Array = new Uint8Array(rawLength);
    for (var i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
     }
     return new Blob([uInt8Array], {type: "imgag/jpeg"});                   
}

該方法參數(shù)為data-url shema，返回值為一個標準 blob 對象。
方法參考了Github.com上封裝html5 Filesystem接口開源項目，地址：https://github.com/ebidel/filer.js。

拍照獲取二進制對象之后，就需要上傳到dropbox，感覺上并不難，dropbox支持HTTP調(diào)用，但自己嘗試以失敗告終，只能通過官方推薦SDK來實現(xiàn)，該SDK功能很強大，但我用到的功能有限。
dropbox.js 地址：https://github.com/dropbox/dropbox-js。

獲取授權(quán)。

 var client = new Dropbox.Client({ key: "2oj96m9cxc6psdf" });
 client.authenticate(function(error, client) {
      if (error) {
          defaultErrHandle(error);
      }
});

上傳圖片

function uploadFile(){
    var tmp = canvasToBlob(canvas.toDataURL("image/jpeg"));
    if(client.isAuthenticated()){
      client.writeFile("profile.jpg", tmp , function(error, stat) {
          if (error) {
             defaultErrHandle(error);  // Something went wrong.
          }
      });                       
     }
}   

通過SDK，可以很便捷的上傳任何內(nèi)容，client.writeFile()方法支持string,File,Blob,ArrayBuffer.

個人原生代碼嘗試
dropbox的授權(quán)有implict grant方式，所以一個重定向基本上就可以拿到access_token，談?wù)勎募蟼鞑糠?，代碼如下：

function uploadFile(){
    var tmp = canvasToBlob(canvas.toDataURL("image/jpeg"));
    var xhr = new XMLHttpRequest();
    var data = new FormData();
    data.append("profile",tmp,"profile");
    xhr.open("POST",
        "https://api-content.dropbox.com/1/files/dropbox/",
         true);
    xhr.setRequestHeader("Authorization","Bearer " + window.localStorage.getItem("access_token")); 
    xhr.send(data);
}

理論上沒有問題，但實際上一直在給我返回400 Bad request，多方查閱無法解決，遂只能放棄。

最后編碼以失敗告終，心情比較沉悶，努力有時候并不能得到回報。

全新的HTML5跟現(xiàn)代瀏覽器的支持，已經(jīng)能做到幾年前FE根本不敢想象的事情，FileSystem,FileReader,Websocket,Worker,UserMedia,localstorage,Canvas,WebGL,XHR Level2，但是這么多特性實際應(yīng)用的并不是很多，應(yīng)用場景確實是個產(chǎn)品經(jīng)理角度出發(fā)的考量，瀏覽器標準支持的滯后性也需要付出更多的學(xué)習(xí)成本和部署成本。

前端框架層出不窮，正在使用的 Angularjs 個人給32個贊，歷久彌堅的backbone 用戶基數(shù)不小，新晉的Ember.js等一眾正在吸引眾人目光。我只用過Angularjs，個人感覺這是個快速崛起的框架，難度是我唯一想吐槽的點，編碼習(xí)慣的轉(zhuǎn)換速度決定了學(xué)習(xí)使用這個框架的難度，越早放棄直接操作DOM的編碼方式，越快能接受這個框架。如果用了Angularjs，意味著后臺是個純粹的Restful API，在已經(jīng)選用了這套框架之后，我是堅決反對再引入后臺模板引擎，比如說Jade。

后端Nodejs強勢回歸，前后端語言統(tǒng)一意味著前端工程師需要承擔(dān)更多的開發(fā)職責(zé)。前端工程師可能做做頁面，處理交互，后臺工程師用模板引擎規(guī)則重寫，然后服務(wù)器端渲染輸出最終頁。而現(xiàn)在的職責(zé)可能需要劃到數(shù)據(jù)庫查詢這一層。

對前端工程師來說，最壞的時代，也是最好的時代。