WebRTC本地分享屏幕,录制屏幕
WebRTC有分享屏幕的功能。使用的是getDisplayMedia方法。用户同意分享屏幕后,可以拿到视频流。
再结合MediaRecorder和Blob,把视频流数据存下来,就能得到录制屏幕的视频。
html#
照例先来摆放一些元素在界面上
WebRTC捕捉屏幕示例 getDisplayMedia
<video id="gum-local" autoplay playsinline muted></video>
<button id="startBtn" disabled>开始预览</button>
<button id="recordBtn" disabled>开始录制</button>
<button id="downloadBtn" disabled>下载</button><div id="msg"></div>
因为我的网速不是很好,把adapter文件下载到本地来用了。
如果要使用官方的适配器adapter,按下边的地址来引入
video 用来预览视频。开始分享视频后,把视频流交给它
放置一些按钮,处理交互
div#msg 用来显示信息
控制#
在main.js文件里写上我们的控制逻辑
先把获取元素
‘use strict’;
const startBtn = document.getElementById(‘startBtn’);
const recordBtn = document.getElementById(‘recordBtn’);
const downloadBtn = document.getElementById(‘downloadBtn’);
const video = document.querySelector(‘video’); // 预览用的
let mediaRecorder;
let isRecording = false;
let recordedBlobs = []; // 暂存视频数据的地方
启动屏幕分享#
主要利用getDisplayMedia方法。我们这里只使用视频video: true
startBtn.addEventListener(‘click’, () => {
navigator.mediaDevices.getDisplayMedia({video: true})
.then(gotDisplayStream, onErr);
});
// 拿到屏幕数据流
function gotDisplayStream(stream) {
startBtn.disabled = true;
video.srcObject = stream; // 显示出来
window.stream = stream; // 缓存一下
stream.getVideoTracks()[0].addEventListener(‘ended’, () => {
showMsg(‘用户停止了分享屏幕’);
startBtn.disabled = false;
recordBtn.disabled = true;
});
recordBtn.disabled = false;
}
function onErr(error) {
showMsg(getDisplayMedia on err: ${error.name}
, error);
}
function showMsg(msg, error) {
const msgEle = document.querySelector(’#msg’);
msgEle.innerHTML += <p>${msg}</p>
;
if (typeof error !== ‘undefined’) {
console.error(error);
}
}
拿到视频流后,交给video显示。
给视频流添加事件监听器,如果停止了分享,我们能获得事件。
在这一步,把其它ui元素注释掉,已经可以测试分享屏幕的效果了。
Chrome和edge会询问用户是否分享屏幕,并让用户选择要分享的界面。mac会需要用户修改隐私设定。
同意后,就能看到分享屏幕的效果了。
???+ note “移动端”
在手机chrome上无法分享
录屏#
上一步我们拿到了视频流。可以仿照之前的方法把视频流数据存下来。
先来找到浏览器支持的视频格式。为了简化操作,后面我们只选用第一种支持的格式。
// 找到支持的格式
function getSupportedMimeTypes() {
const possibleTypes = [
‘video/webm;codecs=vp9,opus’,
‘video/webm;codecs=vp8,opus’,
‘video/webm;codecs=h264,opus’,
‘video/mp4;codecs=h264,aac’,
];
return possibleTypes.filter(mimeType => {
return MediaRecorder.isTypeSupported(mimeType);
});
}
开始录制#
把视频流数据推进recordedBlobs。
当然这里只是试用,实际上这么多数据存在内存里不妥。
function startRecording() {
recordedBlobs = [];
const mimeType = getSupportedMimeTypes()[0];
const options = { mimeType };
try {
mediaRecorder = new MediaRecorder(window.stream, options);
} catch (e) {
showMsg(创建MediaRecorder出错: ${JSON.stringify(e)}
);
return;
}
recordBtn.textContent = ‘停止录制’;
isRecording = true;
downloadBtn.disabled = true;
mediaRecorder.onstop = (event) => {
showMsg('录制停止了: ’ + event);
};
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();
showMsg('录制开始 mediaRecorder: ’ + mediaRecorder);
}
function handleDataAvailable(event) {
console.log(‘handleDataAvailable’, event);
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
}
停止录制#
mediaRecorder.stop()
function stopRecord() {
isRecording = false;
mediaRecorder.stop();
downloadBtn.disabled = false;
recordBtn.textContent = “开始录制”;
}
下载#
把recordedBlobs里的数据打包好下载下来
downloadBtn.addEventListener(‘click’, () => {
const blob = new Blob(recordedBlobs, { type: ‘video/webm’ });
const url = window.URL.createObjectURL(blob);
const a = document.createElement(‘a’);
a.style.display = ‘none’;
a.href = url;
a.download = ‘录屏_’ + new Date().getTime() + ‘.webm’;
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 100);
});
小结#
我们使用了WebRTC的getDisplayMedia方法分享屏幕。并结合之前了解的下载视频方法,实现了简易的录屏下载效果。
{% include ‘webrtc-web-menu.md’ %}
亚马逊测评 www.yisuping.cn
WebRTC本地分享屏幕,录制屏幕相关推荐
- 新版qq新增的功能(屏幕录制 屏幕翻译 屏幕文字识别 屏幕截图)
后来发现qq更新后很多功能都有,例如屏幕录制 屏幕翻译 屏幕文字识别 屏幕截图,这样子仅仅一个qq就可以起到多个软件的作用,我也是无意间发现的,此处给大家分享一下,嘻嘻 qq快捷键总结:(敲黑板) c ...
- 电脑怎么录制屏幕?分享电脑录制屏幕的3个方法
电脑怎么录制屏幕?平时我们在使用手机和电脑的时候,或多或少都有录制屏幕的需求,比如录制自己在游戏里的高难度操作.录制某些软件使用技巧等等.其实对于手机的录屏功能,想必大部分人都是知道的,这里就不做过多 ...
- 计算机快捷键屏幕录制,屏幕录制软件哪个好用?设置电脑录屏快捷键
屏幕录制软件哪个好用?设置电脑录屏快捷键 2020年05月19日 14:40作者:黄页编辑:黄页 分享 屏幕录制软件哪个好用?不管是在生活还是在工作中,电脑录屏的需求都是有的.那在线录制电脑视频的好用 ...
- Vue中如何进行屏幕录制与直播推流
Vue中如何进行屏幕录制与直播推流 屏幕录制和直播推流是现代Web应用中常用的功能,例如在线教育.视频会议和游戏直播等.Vue作为一种流行的JavaScript框架,提供了一些工具和库,可以方便地实现 ...
- 如何在 Mac 上录制屏幕
参考:https://support.apple.com/zh-cn/HT208721 发现Mac自带的屏幕录制功能非常好用. 使用"截屏"工具栏 要查看"截屏" ...
- WebRTC(三)用屏幕分享录制一段视频
前一章节了解了屏幕分享的API,感觉跟我们常用的"屏幕共享"好像. 那么可不可以用此进行一个屏幕录制呢? "纸上得来终觉浅,觉知此事要躬行."看着挺简单的一个东 ...
- Berrycast – 屏幕录制分享工具[Windows/macOS]
简介: Berrycast 是一款非常易用的屏幕录制分享工具,只需要录屏.上传.分享即可.支持麦克风.摄像头.区域/全屏. 录屏一直是教别人用电脑的终极大招(远程控制除外),但分享起来并不是很方便,比 ...
- 分享5:我常用的一款动画屏幕录制软件
LICEcap : 是一款简洁易用的动画屏幕录制软件 下载: 适用于Windows: https://www.cockos.com/licecap/licecap128-install.exe 适用于 ...
- 屏幕录制软件推荐,分享这3款,简单好用
网络上充斥着许多各种各样的屏幕录制软件,许多有选择困难的朋友可能会充满怀疑:哪个电脑屏幕录制软件很容易使用?屏幕录制软件推荐哪个比较好?别担心,今天,小编分享这这3个简单好用的屏幕录制软件,一起来看 ...
最新文章
- 一分钟就可以轻松将文字转换成语音,简单方法讲解
- Oozie使用java启动外部包
- Git篇——Git使用教程
- $.ajax()常用方法详解(推荐)
- java动态拼接请求_在JavaWeb项目中处理静态文件或动态链接拼接网站地址的最优处理方案...
- C#中的DBNull、Null、String.Empty和“”
- Graph Valid Tree
- iOS 10 推送的简单使用
- 转:windows xp 安装MYSQL 出现Error 1045 access denied 的解决方法
- 诺禾--分子生物学常用小软件分享
- H5基础阶段二(表格、表单)
- ubuntu翻译软件安装
- 实验三 数字加法器的设计【Verilog】
- 徐磊英语 4 5 时态,被动,时态的错误定义
- 5-8 SpringBoot拦截器的使用
- 使用IDEA 进行 安卓开发
- 衡水中学2021年的高考成绩查询,2021年全国百强高中排名,它拥有90%一本升学率,超衡水中学成第一...
- 深圳软件测试 黑盒测试,深圳软件测试培训:常用控件黑盒测试方法有哪些?...
- springBoot项目中Graphics2D在linux上使用Font字体出现乱码或者中文字无法显示的问题
- Linux SVA特性分析