Android錄製屏幕的實現方法

*原文：Paul Kinlan
翻譯：Agora.io*

長久以來，我一直但願可以直接從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 APIconsole.log(err)};navigator.getUserMedia({audio:false,video:{'mandatory': {'chromeMediaSource':'screen'}}},successCallback, errorCallback);})();