<p>长久以来，我一直希望能够直接从Android屏幕上进行录制并将其编码为多种格式，以便将录制内容嵌入在任意位置，而不需要安装任何软件。</p>    <p>如今，我们已经接近这个目标。Chrome团队正在添加一种功能，可以通过getUserMedia从Android设备上共享屏幕。我创建了一个原型来录制屏幕并将录制内容流式传输到其他设备，以便将其录制到文件并为其添加设备帧。</p>    <p>虽然WebRTC有很多复杂的细节，但总体而言，该基础架构并没有那么复杂。</p>    <p>录制过程分为两个阶段：</p>    <p>1.在本地捕获（并可选择在本地录制）；</p>    <p>2.传输到远程桌面。</p>    <p><strong>捕获屏幕</strong></p>    <p>getUserMedia是一个十分有用的API。通过它可直接在网页中以内联方式实时访问任何摄像头或麦克风。getUserMediaAPI可用于请求仅连接到某些类型的设备。例如，通过设置参数{audio:true}，可请求仅连接至支持音频的设备，而通过设置{video:{'mandatory': {width:1920,height:1080}}}，可指示仅连接至高清摄像头。</p>    <p>Chrome即将推出一个新的参数{'chromeMediaSource':'screen'}，该参数制定Chrome应使用屏幕作为流媒体源。</p>    <p>它当前位于标记之后，完全是实验性质。在Android上，需要开启chrome://flags#enable-usermedia-screen-capturing来启用它。您也可以跟踪Chrome错误487935的实现情况。</p>    <p>const constraints = {</p>    <p>audio: false, // mandatory.</p>    <p>video: {'mandatory': {'chromeMediaSource':'screen'}}</p>    <p>};</p>    <p>const successCallback = (stream) => {</p>    <p>// Do something with the stream.</p>    <p>//Attach to WebRTC connections</p>    <p>//Record via MediaRecorder</p>    <p>};</p>    <p>consterrorCallback = () => {</p>    <p>//We don't have access to the API</p>    <p>};</p>    <p>navigator.getUserMedia(constraints,successCallback, errorCallback);</p>    <p>这就是全部代码。</p>    <p>当然，这是从技术上而言。在实际中，您不会直接获得访问权限。用户需要向getUserMedia的媒体流授予访问权限（与往常一样），由于此API的这项功能十分强大，用户必须明确选择使用它才能共享自己的屏幕。一旦用户明确选择使用此功能，系统就会明确指示他们在共享屏幕。</p>    <p>现在，您已经有了可存储在本地的屏幕流，您也可以通过WebRTC将它传输到外部位置。</p>    <p>通过MediaRecorder可在本地录制屏幕，正如我在WebGL录制代码段中所做的那样。我还创建了一个简单的演示，可对屏幕录制10秒，再将录制的内容下载到您的设备上。</p>    <p>(function(){</p>    <p>//Download locally</p>    <p>functiondownload(blob) {</p>    <p>varurl = window.URL.createObjectURL(blob);</p>    <p>vara = document.createElement('a');</p>    <p>a.style.display= 'none';</p>    <p>a.href= url;</p>    <p>a.download= 'test.webm';</p>    <p>document.body.appendChild(a);</p>    <p>a.click();</p>    <p>setTimeout(function(){</p>    <p>document.body.removeChild(a);</p>    <p>window.URL.revokeObjectURL(url);</p>    <p>},100);</p>    <p>}</p>    <p>constsuccessCallback = (stream) => {</p>    <p>//Set up the recorder</p>    <p>letblobs = [];</p>    <p>letrecorder = new MediaRecorder(stream, {mimeType: 'video/webm; codecs=vp9'});</p>    <p>recorder.ondataavailable= e => { if (e.data && e.data.size > 0) blobs.push(e.data)};</p>    <p>recorder.onstop= (e) => download(new Blob(blobs, {type: 'video/webm'}));</p>    <p>//Record for 10 seconds.</p>    <p>setTimeout(()=>recorder.stop(), 10000);</p>    <p>//Start recording.</p>    <p>recorder.start(10);// collect 10ms chunks of data</p>    <p>};</p>    <p>consterrorCallback = (err) => {</p>    <p>//We don't have access to the API</p>    <p>console.log(err)</p>    <p>};</p>    <p>navigator.getUserMedia({</p>    <p>audio:false,</p>    <p>video:{'mandatory': {'chromeMediaSource':'screen'}}</p>    <p>},successCallback, errorCallback);</p>    <p>})();</p>    <p> </p>    <p>来自：http://www.jianshu.com/p/5055c29173df</p>    <p> </p>