需求：
最近有個移動端開發(fā)需求，用戶打開相機(jī)點擊拍照按鈕，就會拍一張照片（照片不進(jìn)手機(jī)系統(tǒng)相冊），顯示在頁面下部小視窗。（界面大概如下）
就需求本身而言，若是交給Native同事去開發(fā)，就是一個自定義相機(jī)的功能?？赡芤丛趺醋柚瓜到y(tǒng)拍攝照片后不進(jìn)手機(jī)系統(tǒng)相冊。
對于此需求若是前端來實現(xiàn)的話，也可以實現(xiàn)。大概就是調(diào)起攝像頭后，獲取當(dāng)前畫面，然后截取當(dāng)前幀的畫面，轉(zhuǎn)換成圖片保存?；静襟E如下：
【思路問題不大，但是實際這樣開發(fā)時，還會有以下幾個問題：】
1. 交互體驗不好
window.navigator.mediaDevices.getUserMedia瀏覽器BOM api時，需要用戶手動點擊確認(rèn)，允許打開攝像頭。交互體驗不太好。
2. 畫面畫質(zhì)問題
前端實現(xiàn)本質(zhì)上和截圖差不多，畫面質(zhì)量沒有原生拍照效果好。
3. 瀏覽器API mediaDevices為undefined問題
window.navigator.mediaDevices在非以下三種情況下時，會為undefined，所以當(dāng)為非https的域或者非本地localhost域，則都無法使用。
a. localhost 域
b. 開啟了 HTTPS 的域
c. 使用 file:/// 協(xié)議打開的本地文件
【若想在http下也可使用，怎么辦？？？】
通過設(shè)置chrome瀏覽器，開啟相應(yīng)flag可以實現(xiàn)。
a.. chrome瀏覽器輸入chrome://flags/#unsafely-treat-insecure-origin-as-secure
b. 將該 flag 切換成 enable 狀態(tài)
c. 輸入框中填寫需要開啟的域名，譬如example.com，多個以逗號分隔
