Android 錄制屏幕的實現方法
長久以來，我一直希望能夠直接從Android屏幕上進行錄制并將其編碼為多種格式，以便將錄制內容嵌入在任意位置，而不需要安裝任何軟件。
如今，我們已經接近這個目標。Chrome團隊正在添加一種功能，可以通過getUserMedia從Android設備上共享屏幕。我創建了一個原型來錄制屏幕并將錄制內容流式傳輸到其他設備，以便將其錄制到文件并為其添加設備幀。
雖然WebRTC有很多復雜的細節，但總體而言，該基礎架構并沒有那么復雜。
錄制過程分為兩個階段：
1.在本地捕獲（并可選擇在本地錄制）；
2.傳輸到遠程桌面。
捕獲屏幕
getUserMedia是一個十分有用的API。通過它可直接在網頁中以內聯方式實時訪問任何攝像頭或麥克風。getUserMediaAPI可用于請求僅連接到某些類型的設備。例如，通過設置參數{audio:true}，可請求僅連接至支持音頻的設備，而通過設置{video:{'mandatory': {width:1920,height:1080}}}，可指示僅連接至高清攝像頭。
Chrome即將推出一個新的參數{'chromeMediaSource':'screen'}，該參數制定Chrome應使用屏幕作為流媒體源。
它當前位于標記之后，完全是實驗性質。在Android上，需要開啟chrome://flags#enable-usermedia-screen-capturing來啟用它。您也可以跟蹤Chrome錯誤487935的實現情況。
const constraints = {
audio: false, // mandatory.
video: {'mandatory': {'chromeMediaSource':'screen'}}
};
const successCallback = (stream) => {
// Do something with the stream.
//Attach to WebRTC connections
//Record via MediaRecorder
};
consterrorCallback = () => {
//We don't have access to the API
};
navigator.getUserMedia(constraints,successCallback, errorCallback);
這就是全部代碼。
當然，這是從技術上而言。在實際中，您不會直接獲得訪問權限。用戶需要向getUserMedia的媒體流授予訪問權限（與往常一樣），由于此API的這項功能十分強大，用戶必須明確選擇使用它才能共享自己的屏幕。一旦用戶明確選擇使用此功能，系統就會明確指示他們在共享屏幕。
現在，您已經有了可存儲在本地的屏幕流，您也可以通過WebRTC將它傳輸到外部位置。
通過MediaRecorder可在本地錄制屏幕，正如我在WebGL錄制代碼段中所做的那樣。我還創建了一個簡單的演示，可對屏幕錄制10秒，再將錄制的內容下載到您的設備上。
(function(){
//Download locally
functiondownload(blob) {
varurl = window.URL.createObjectURL(blob);
vara = document.createElement('a');
a.style.display= 'none';
a.href= url;
a.download= 'test.webm';
document.body.appendChild(a);
a.click();
setTimeout(function(){
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
},100);
}
constsuccessCallback = (stream) => {
//Set up the recorder
letblobs = [];
letrecorder = new MediaRecorder(stream, {mimeType: 'video/webm; codecs=vp9'});
recorder.ondataavailable= e => { if (e.data && e.data.size > 0) blobs.push(e.data)};
recorder.onstop= (e) => download(new Blob(blobs, {type: 'video/webm'}));
//Record for 10 seconds.
setTimeout(()=>recorder.stop(), 10000);
//Start recording.
recorder.start(10);// collect 10ms chunks of data
};
consterrorCallback = (err) => {
//We don't have access to the API
console.log(err)
};
navigator.getUserMedia({
audio:false,
video:{'mandatory': {'chromeMediaSource':'screen'}}
},successCallback, errorCallback);
})();
來自：http://www.jianshu.com/p/5055c29173df