webrtc实现录制屏幕小工具

最新推荐文章于 2024-07-08 18:21:10 发布
最新推荐文章于 2024-07-08 18:21:10 发布
阅读量2.6k 收藏 8
点赞数 2
分类专栏： 音视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leapmotion/article/details/108611151
版权

webrtc（网页即时通信）

大家平常都会听到webrtc，那么webrtc是什么呢，实际上WebRTC是一个免费的开放项目，它通过简单的API为浏览器和移动应用程序提供实时通信（RTC）功能，而对于开发人员来说就是一组api。同时我们说webrtc上一组标准，协议也没错。已被Google、Mozilla、Opera等浏览器支持。

chrome中录制桌面

接下来我们通过使用webrtc中的api实现一个简单的录屏工具

先来介绍下相关api：

getDisplayMedia方法

var promise = 
  navigator.mediaDevices.getDisplayMedia(constraints);
  • mediaDevices接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等.
  • getDisplayMedia() 方法提示用户去选择和授权捕获展示的内容或部分内容（如一个窗口）
  • constraints,MediaStreamConstraints对象,指定返回的MediaStream的要求
  • 返回值， 解析为MediaStream的Promise，包含指定的视频轨和音频轨

我们这里只来捕获视频图像。

MediaRecorder

名字既可以看出来，是作为录制的api

  • 构造函数
var mediaRecorder = new MediaRecorder(stream[, options]);

stream就是录制的数据来源，options可选参数，字典对象，包含mimeType（指定mime类型），audioBitsPerSecond（指定音频比特率），videoBitsPerSecond（指定视频比特率），bitsPerSecond（指定音频和视频的比特率）具体参考MDN

  • 方法
  1. isTypeSupported()，是否支持设置MIME type
  2. start()，开始录制，可以设置毫秒为参数，这样录制内容会按照你设置的这个值分割成小块，不然就是整体一个大块数据
  3. pause(),resume(), stop() 暂停，继续，停止录制
  • 事件处理
  1. ondataavailable, 调用start后数据后会执行这个事件
  2. onerror，发生错误
  3. onstop, 停止录制后调用

    …

捕获视频图像

下边我们自己开始实现

首先我们设置constraints，我们设置捕获的图像分辨率为1280*720,帧率为15

const streamContrains = {
    video: {
        width: 1280,
        height: 720,
        frameRate: 15,
    },
    audio: false
};

然后我们来捕获视频帧,捕获成功后进入onGetStream，出现错误时onGetStreamError打印错误信息

function onGetStream(stream) {}

function onGetStreamError(error) {
    console.log('getDisplayMedia error', error);
}

const mDevices = navigator.mediaDevices;
const promise = mDevices.getDisplayMedia(streamContrains);
promise.then(
    onGetStream
).catch(
    onGetStreamError
);

录制捕获的stream

我们看到onGetStream函数还没有实现，我们已经拿到了stream，接下来我们将stream录制下来：

同样我们先来指定mimetype,然后判断下浏览器是否支持，我们这里录制视频的webm封装格式，编码格式是h264。

var options = {mimeType: 'video/webm;codecs=h264'};
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
      console.error(`${options.mimeType} not supported!`);
      return;
}

然后我们把stream和options传入MediaRecorder的构造函数。调用start，指定事件的回调函数：

function onDataAvailable(d) {}

function onRecordError(e) {
    console.error('Recorder error', e);
}

// snip...
try {
    mediaRecorder = new MediaRecorder(stream, options);
}
catch (e) {
    console.error('create MediaRecorder error', e);
    return;
}

mediaRecorder.ondataavailable = onDataAvailable;
mediaRecorder.onerror = onRecordError;

mediaRecorder.start(10);

保存录制内容

我们已经将录制的内容在onDataAvailable体现。我们先用一个数组来存放：

var buffer = [];
//snip...

function onDataAvailable(d) {
    if (d && d.data && d.data.size > 0) {
        buffer.push(d.data);
    }
}

等到我们停止录制的时候，我们需要把数据保存成文件。

function saveVideo() {
    if (buffer) {
        var blob = new Blob(buffer, {type: 'video/webm'});
        var url = window.URL.createObjectURL(blob);
        var a = document.createElement('a');

        a.href = url;
        a.style.display = 'none';
        a.download = 'record.webm';
        a.click();
    }
    else {
        console.error("record failed");
    }
}

通过buffer创建Blob对象，同时创建一个隐藏的a标签，将内容保存成文件。

完整的代码

如果只是需要这个小工具，可以将此处代码复制保存成html，chrome打开即可使用。

<!DOCTYPE html>
<html>
    <head>
        <title>Record Desktop</title>
    </head>
    <body>
        <h1>Record Desktop with webRTC</h1>
        <div>
            <button id = "record">record</button>
            <button id = "pause">pause</button>
        </div>

        <script>
            'use strict'

            var mediaRecorder;
            const pauseBtn = document.getElementById('pause');
            pauseBtn.disabled = true;
            pauseBtn.onclick = function(ev) {
                if (!mediaRecorder) {
                    return;
                }

                if (pauseBtn.textContent == "pause") {
                    mediaRecorder.pause();
                    pauseBtn.textContent = "resume";
                }
                else {
                    mediaRecorder.resume();
                    pauseBtn.textContent = "pause";
                }
            }

            var buffer = [];
            function onDataAvailable(d) {
                if (d && d.data && d.data.size > 0) {
                    buffer.push(d.data);
                }
            }

            function onRecordError(e) {
                console.error('Recorder error', e);
            }

            const recordBtn = document.getElementById('record');
            function onGetStream(stream) {
                recordBtn.textContent = "stop";
                var options = {mimeType: 'video/webm;codecs=vp8'};
                if (!MediaRecorder.isTypeSupported(options.mimeType)) {
                    console.error(`${options.mimeType} is not supported!`);
                    return;
                }

                try {
                    mediaRecorder = new MediaRecorder(stream, options);
                }
                catch (e) {
                    console.error('Filed to create MediaRecorder', e);
                    return;
                }

                mediaRecorder.ondataavailable = onDataAvailable;
                mediaRecorder.onerror = onRecordError;
                mediaRecorder.start(10);
            }

            function saveVideo() {
                if (buffer) {
                    var blob = new Blob(buffer, {type: 'video/webm'});
                    var url = window.URL.createObjectURL(blob);
                    var a = document.createElement('a');

                    a.href = url;
                    a.style.display = 'none';
                    a.download = 'record.webm';
                    a.click();
                }
                else {
                    console.error("record failed");
                }
            }

            // 捕获视频
            const streamContrains = {
                video: {
                    width: 1280,
                    height: 720,
                    frameRate: 15,
                },
                audio: false
            };

            function onGetStreamError(error) {
                console.log('getDisplayMedia error', error);
            }

            recordBtn.onclick = function(ev) {
                if (mediaRecorder && recordBtn.textContent != "record") {
                    recordBtn.textContent = "record";
                    pauseBtn.disabled = false;

                    let tracks = mediaRecorder.stream.getTracks();
                    tracks.forEach(track => track.stop());
                    saveVideo();
                    return;
                }
                
                pauseBtn.disabled = false;
                const mDevices = navigator.mediaDevices;
                const promise = mDevices.getDisplayMedia(streamContrains);
                promise.then(
                    onGetStream
                ).catch(
                    onGetStreamError
                );
            }
        </script>
    </body>
</html>

运行

以上代码保存html文件，chrome浏览器打开：
在这里插入图片描述

点击record时，会弹出框，选择共享屏幕或者其他窗口，然后点击分享就开始录制了，
在这里插入图片描述
此时可以点击stop停止录制或者暂停然后继续录制等等。
在这里插入图片描述
点击stop就会自动下载视频文件，浏览器打开就可以查看录制的视频了。

参考

https://developer.mozilla.org/
https://github.com/avdance/webrtc_web.git

leapmotion
关注
专栏目录
screen-recorder:使用WebRTC的简单屏幕录像机
04-29
屏幕录像机 版权所有（c） Antmicro的基于WebRTC的简单屏幕录像机，用于基于和制作视频或GIF。 创建此文件的原因是因为我们想要一个不需要服务器的单文件解决方案（因为WebRTC完全可以在客户端正常运行），并且可以针对我们的需求（默认值，UI等）进行量身定制。 欢迎PR，这是一个进行中的早期工作工具。 用法（在线） 打开： 享受。 至于记录器，有一个“开始”和“停止”按钮，其余部分实际上是由浏览器处理的，因此，如果您曾经使用过Google Meet或Zoom等功能，应该没问题。 GIF录制选项依赖转换器，保证只能在Chrome中使用。 要使用转换器，请使用按钮上传文件。 转换完成后，结果将自动下载。 用法（本地） 下载screen-recorder.html并在您选择的浏览器中打开它（除非您选择的浏览器是Internet Explorer或Safari，在这种
WebRTC 实现PC电脑录屏
最新发布
黄彪博客
07-09 870
WebRTC 实现PC电脑录屏。
Node.js-一个WebRTC屏幕录像机electron应用
08-10
一个WebRTC屏幕录像机electron应用
探索基于WebRTC的有感录屏技术开发流程
04-07 1122
title: 探索基于WebRTC的有感录屏技术开发流程。
flutter使用webrtc技术实现共享桌面，视频
02-22
这通常涉及获取用户的权限，然后开始录制屏幕。 4. **视频流的发送和接收**： 使用`RTCPeerConnection`的`addStream`方法将本地视频流或桌面共享流添加到连接中，然后通过`createOffer`和`setLocalDescription`...
基于浏览器 webrtc的PC屏幕共享
热门推荐
yunjinwang的专栏
12-20 2万+
https://www.html5rocks.com/en/tutorials/webrtc/basics/          从官方介绍可知，webrtc不仅可提供以摄像头为源的视频通讯功能，也能进行主机的screensharing，但目前支持webrtc的浏览器，无法直接截取主机屏幕，故无法使用此功能，需要插件支持才能实现屏幕截取共享功能，这里就介绍如何使用chrome浏览器进行屏幕共享。
WebRTC学习04----屏幕录制实例
qq_43345339的博客
04-04 927
屏幕录制实例 摄像头录制 // 1. 首先，先在发布目录下，创建工作区 mkdir demo02 cd demo02 // 2. 创建相应的渲染文件 mkdir js // 3.编写html、js文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>屏幕录制实例</title> </head> <body> <s
基于webrtc的前端录屏与直播
chenthe1的专栏
12-27 1772
getDisplayMedia是webrtc整体标准中的一个接口，要了解webrtc的入门信息，可以移步《WebRTC点对点应用架构研究》这篇2018年发表的博文，这篇文章可以作为入门了解webrtc及其基本开发步骤的知识文章。在上述文章之上，我们再去理解webrtc，可以这么理解：webrtc是一套客户端点对点流式信息传播的技术方案。其中我的新认识在于“流式信息”这个点，以前，我把重点放在“点对点”上，但逐渐我发现，但凡基于流式信息的传播，都可以在webrtc标准下去讨论。
webrtc、kurento 屏幕共享及切换屏幕和摄像头
12-20
仅支持谷歌和火狐，谷歌浏览器请下载插件Screen Capturing3.7，地址去谷歌商店搜索 前台的js写的。后台为java，请自行部署kurento server服务器。并且自己修改One2ManyCallApp类 的连接地址
WebRTC(五) Web端实现屏幕录制
simple_a的博客
10-21 5380
1 完成html代码 <html> <head> <title>WebRTC capture video and audio</title> <style> //============== 切换视频效果 ================== .none{ -webkit-filter:none; ...
webRTC（四）：Webrtc音视频数据采集&录制&采集屏面数据
2401_84139049的博客
04-16 1431
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
WebRTC录制视频原理
m0_60259116的博客
07-04 981
WebRTC录制视频原理
使用WebRTC 进行1V1视频通话，录制视频
weixin_42141077的博客
07-08 1065
这个方案受网络影响比较大物理路由比较多，内网项目涉及到端口申请，可能都没有办法建立连接，（p2p没有那么容易建立，也可能会卡在防火墙 端口被墙，连接会根据不同的协议使用一定范围内随机接口）实现视频展示，但是相比服务器转发的方案，延时上会有优势。3.2.1 用户B获取candidate信息并且通过信令服务器发送candidate给用户A（同上）3.2.2用户A添加用户B的candidate信息（同上）2.3 用户a收到用户b的answer后设置本地描述。3.1.1用户B添加用户A的candidate信息。
从0搭建一个WebRTC，实现多房间多对多通话，并实现屏幕录制
yinshipin007的博客
01-03 1754
这篇文章开始会实现一个一对一WebRTC和多对多的WebRTC，以及基于屏幕共享的录制。本篇会实现信令和前端部分，信令使用fastity来搭建，前端部分使用Vue3来实现。为什么要使用WebRTC WebRTC全称Real-Time Communication，是一种实时音视频的技术，它的优势是低延时。本片文章食用者要求能搭建简单的node服务，docker配置vue框架的使用环境搭建及要求 废话不多说，现在开始搭建环境，首先是需要开启socket服务，采用的是来进行搭建。，本例使用的是3.x来启动的。
五分钟搞定WebRTC视频录制
死磕音视频
08-03 3708
WebRTC中文社区是一个为大家解决在使用WebRTC当中遇到问题所建立的社区，欢迎更多学习和使用WebRTC的人加入进来，一起建设。 视频录制 在之前的文章里我们提到过视频录制的两种方式：客户端录制和服务端录制，以及他们的优缺点 WebRTC-Client-Record 服务端录制要根据你所使用的服务端，来决定视频录制的解决方案。 所以不是本文讨论的重点，本文主要讨论使用WebRTC的客户端解决方案 WebRTC-Client-Record是基于WebRTC所写的客户端视频录制解决方案，他已经完美得集成到
webRTC（四），android应用开发基础课件
m0_64604636的博客
12-10 357
//获取屏幕约束 var divConstraints = document.querySelector(‘div#constraints’) function gotMediaStream(stream){ var videoTrack = stream.getVideoTracks()[0]; var videoConstraints = videoTrack.getSettings(); divConstraints.textContent= JSON.stringify(videoConstrain
音视频应用--webrtc视频录制总结
yinshipin007的博客
03-27 579
背景：要在视频通话中进行相关录制，具体要求如下：（1） 视频通话录像，并保存为AVI格式，并上传到服务端，服务端下发给设备message部分，但是管理机本身不存储录像；（2） 能监控其他的设备，并且支持录像因此需要现在Android系统支持视频录制和监控录制两种类型录制。在设备上是有开发相关录制功能的，但是设备整体硬件和性能决定了之前的框架运行是有问题，同时通话录制和监控录制分数不同的框架，因此需要两套框架都支持。
webrtc 零基础开发者教程 pdf
07-02
除了基本API，教程还涵盖了一些常见的拓展功能，如屏幕共享、音频录制等。这些额外功能的学习可以帮助开发者更好地适应实际开发需求。 总之，“WebRTC零基础开发者教程”是一本给零基础开发者准备的教材，通过系统...
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值