一直以来,我一直希望可以直接在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);
})();
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。