屏幕录制和摄像头录制差不多，只是把API从getUserMedia换成getUserMedia。但是由于这个功能目前是谷歌一个实验性的功能，需要进行一些设置。首先打开Chrome浏览器，在地址栏输入chrome://flags/按回车，再在搜索框中输入web-platform，将Experimental Web Platform features设置为Enabled后点击右下角的RELAUNCH NOW按钮重启浏览器。
浏览器设置
通过nodejs搭建web服务器，搭建好后将服务启动。然后在public目录下新建一个recordScreen目录，在recordScreen目录下创建一个index.html文件，代码内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webrtc录制屏幕</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<video autoplay playsinline id="player"></video>
<video playsinline id="recordPlayer"></video>
<!-- 在开始录制之前播放和下载按钮时禁用的 -->
<button id="recordBtn">开始录制</button>
<button id="playBtn" disabled="">播放</button>
<button id="downloadBtn" disabled="">下载</button>
<script type="text/javascript" src="js/client.js"></script>
</body>
</html>
再在recordScreen目录下新建一个js目录，在js目录下创建一个client.js文件，代码内容如下：
'use strict'
var player = $("#player")[0];
var recordPlayer = $("#recordPlayer")[0];
var recordBtn = $("#recordBtn");
var playBtn = $("#playBtn");
var downloadBtn = $("#downloadBtn");
var buffer; // 用于存储录制数据（数组）
var mediaStream;
var mediaRecoder;
start();
// 录制按钮点击事件
recordBtn.click(function(){
// console.log(recordBtn.text());
if (recordBtn.text()==='开始录制') {
startRecord();
recordBtn.text('停止录制');
playBtn.attr('disabled',false);
downloadBtn.attr('disabled',false);
}else if (recordBtn.text()==='停止录制') {
stopRecord();
recordBtn.text('开始录制');
// playBtn.attr('disabled',true);
// downloadBtn.attr('disabled',true);
}
});
// 播放按钮点击事件
playBtn.click(function(){
var blob = new Blob(buffer,{type:'video/webm'});
// 根据缓存数据生成url给recordPlayer进行播放
recordPlayer.src = window.URL.createObjectURL(blob);
recordPlayer.srcObject = null;
recordPlayer.controls = true; // 显示播放控件
});
// 下载按钮点击事件
downloadBtn.click(function(){
var blob = new Blob(buffer,{type:'video/webm'});
// 根据缓存数据生成url
var url = window.URL.createObjectURL(blob);
// 创建一个a标签，通过a标签指向url来下载
var a = document.createElement('a');
a.href = url;
a.style.display = 'none'; // 不显示a标签
a.download = 'test.webm'; // 下载的文件名
a.click(); // 调用a标签的点击事件进行下载
});
// 开始录制
function startRecord(){
var options = {mimeType:'video/webm;codecs=vp8'};
if(!MediaRecorder.isTypeSupported(options.mimeType)){
console.log('不支持'+options.mimeType);
return;
}
try{
buffer = [];
mediaRecoder = new MediaRecorder(mediaStream,options);
}catch(e){
console.log('创建MediaRecorder失败!');
return;
}
mediaRecoder.ondataavailable = handleDataAvailable;
// 开始录制，设置录制时间片为10ms(每10s触发一次ondataavilable事件)
mediaRecoder.start(1000);
}
// 停止录制
function stopRecord (){
mediaRecoder.stop();
}
// 触发ondataavilable事件的回调函数
function handleDataAvailable(e){
if (e && e.data && e.data.size>0) {
buffer.push(e.data);
}
}
function start(){
if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
console.log('不支采集音视频数据！');
}else{
// 采集音频数据
var constrants = {
video:true,
audio:true
};
navigator.mediaDevices.getDisplayMedia(constrants).then(gotMediaStream).catch(handleError);
}
}
// 采集音频数据成功时调用的方法
function gotMediaStream(stream){
mediaStream = stream;
player.srcObject = stream;
}
// 采集音频数据失败时调用的方法
function handleError(err){
console.log(err.name+':'+err.message);
}
然后打开浏览器在地址栏输入https://192.168.20.242:8081/recordScreen/index.html，此时会弹出下图所示的选择屏幕共享内容，可以选择共享整个屏幕或者共享某个应用窗口或者共享Chrome浏览器的某个页面(测试时不建议选择共享整个屏幕，因为共享显示的视频区会形成类似循环嵌套的效果，会导致电脑变得非常卡)。共享屏幕时同样可以进行录制、播放和下载。
选择屏幕共享类型
网友评论