长久以来,我一直希望能够直接从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);
})();
本文来源于自互联网,不代表n5网立场,侵删。发布者:虚拟资源中心,转载请注明出处:https://www.n5w.com/28460.html