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);

})();