网站首页 > 知识剖析正文

webrtc进行屏幕录制

nixiaole 2025-01-08 16:25:20 知识剖析 11 ℃

屏幕录制和摄像头录制差不多，只是把API从getUserMedia换成getUserMedia。但是由于这个功能目前是谷歌一个实验性的功能，需要进行一些设置。首先打开Chrome浏览器，在地址栏输入chrome://flags/按回车，再在搜索框中输入web-platform，将Experimental Web Platform features设置为Enabled后点击右下角的RELAUNCH NOW按钮重启浏览器。

通过nodejs搭建web服务器，搭建好后将服务启动。然后在public目录下新建一个recordScreen目录，在recordScreen目录下创建一个index.html文件，代码内容如下:

C++音视频开发学习资料：点击莬费领取→音视频开发（资料文档+视频教程+面试题）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

<!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);
}

C++音视频开发学习资料：点击莬费领取→音视频开发（资料文档+视频教程+面试题）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

然后打开浏览器在地址栏输入https://192.168.20.242:8081/recordScreen/index.html，此时会弹出下图所示的选择屏幕共享内容，可以选择共享整个屏幕或者共享某个应用窗口或者共享Chrome浏览器的某个页面(测试时不建议选择共享整个屏幕，因为共享显示的视频区会形成类似循环嵌套的效果，会导致电脑变得非常卡)。共享屏幕时同样可以进行录制、播放和下载。

如果你对音视频开发感兴趣，或者对本文的一些阐述有自己的看法，可以在下方的留言框，一起探讨。

上一篇：知识付费阿里云视频点播功能
下一篇： ios使用ijkplayer+nginx进行视频直播

网站首页 > 知识剖析 正文

webrtc进行屏幕录制

猜你喜欢

网站首页 > 知识剖析正文