一：WebRTC錄制基本知識

（一）MediaRecoder類基本格式

（二）options限制選項

mimeType:用來指定要錄制的是視頻還是音頻，即錄制的格式是什么，上面的列表中是webm格式的多媒體類型，也可以設置為其他格式，比如mp4。也可以指定編碼方式

（三）MediaRecorder常用API

如果不選擇timeslice，則所有的數據會存儲到一個大的buffer中，設置了timeslice，則會按timeslice分塊存儲數據，存為小塊的數據

stop不會丟棄最后一塊數據，會使得生效存儲下來

isTypeSupported:用來檢查是否支持對應的格式類型

（四）MediaRecorder事件

對於ondataavailable事件：如果指定了timeslice，則會每隔一段時間觸發這個事件，然后對數據進行處理。如果沒有指定timeslice，則會在視頻錄制完成，調用stop結束錄制時去出發這個事件

（五）javascript存儲方式

Blob是一塊高效的存儲區域（無類型的數據緩沖區），可以將整個緩沖區寫入文件中。Blob是ArrayBuffer的封裝，更加高效的處理ArrayBuffer。ArrayBufferView是帶有類型的ArrayBuffer

二：使用MediaRecoder實現錄制和播放

（一）代碼實現

<html>
    <head>
        <title>    WebRTC get audio and video devices </title>
        <style>
            .none {
                -webkit-filter: none;
            }

            .blue {
                -webkit-filter: blur(3px); 
            }

            .grayscale {
                -webkit-filter: grayscale(1);
            }

            .invert {
                -webkit-filter: invert(1);
            }

            .sepia {
                -webkit-filter: sepia(1);
            }
        </style>
    </head>
    <body>
        <h1>Index5.html</h1>
        <div>
            <table>
                <tr>
                    <td>
                        <video autoplay playsinline id="player"></video>
                    </td>
                    <td>
                        <video playsinline id="recplayer"></video>
                    </td>
                    <td>
                        <div id="constraints"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button id="record">Start Record</button>
                    </td>
                    <td>
                        <button id="recplay" disabled>Start Play</button>
                    </td>
                    <td>
                        <button id="download" disabled>download</button>
                    </td>
                </tr>
            </table>
        </div>
    </body>
    <script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script type="text/javascript" src="./js/client5.js"></script>
    
</html>

index5.html

client5.js實現

'use strict'

//視頻錄制
var videoplay = document.querySelector("video#player");
//視頻播放
var recvideoplay = document.querySelector("video#recplayer");
//約束顯示
var divConstraints = document.querySelector("div#constraints");

//--------按鈕
var btnRecord = document.querySelector("button#record");
var btnRecplay = document.querySelector("button#recplay");
var btnDownload = document.querySelector("button#download");

var buffer;    //存儲錄制數據
var mediaRecorder;    //對象

function start(){
    console.log("start......");
    if(!navigator.mediaDevices || 
        !navigator.mediaDevices.getUserMedia){
        console.log("getUserMedia is not supported!");
    }else{
        var constraints = {
            video : {
                width:320,
                height:240,
                frameRate:30,
                facingMode:"user"
            },
            audio : {
                noiseSuppression:true,
                echoCancellation:true
            },
        }

        navigator.mediaDevices.getUserMedia(constraints)
                    .then(getMediaStream)
                    .catch(handleError);
    }
}

function getMediaStream(stream){
    window.stream = stream;            //將stream變量放入全局中

    videoplay.srcObject = stream;    //設置采集到的流進行播放

    //獲取視頻的track
    var videoTrack = stream.getVideoTracks()[0];        //只有一個，所以只取一個
    var videoConstraints = videoTrack.getSettings();    //獲取約束對象

    divConstraints.textContent = JSON.stringify(videoConstraints,null,2);        //轉為json
}

function handleError(err){
    console.log(err.name+":"+err.message);
}

start();    //開始執行邏輯

//---------設置事件：錄制-----

//設置數據處理函數
function handleDataAvail(e){
    if(e && e.data && e.data.size > 0){
        buffer.push(e.data);    
    }
}


//錄制與停止錄制
function startRecord(){
    buffer = [];    //定義數據

    var options = {
        mimeType: "video/webm;codecs=vp8"
    }

    if(!MediaRecorder.isTypeSupported(options.mimeType)){    //查看是否支持這個類型
        console.error("${options.mimeType} is not suppported!");
        return;
    }

    try{
        mediaRecorder = new MediaRecorder(window.stream,options);
    }catch(e){
        console.error("Failed to create MediaRecoder!");
        return;
    }

    mediaRecorder.ondataavailable = handleDataAvail;
    mediaRecorder.start(10);    //設置時間片存儲數據
}

function stopRecord(){
    mediaRecorder.stop();        //停止錄制
}

btnRecord.onclick = function(){
    if(btnRecord.textContent === "Start Record"){
        startRecord();
        btnRecord.textContent = "Stop Record";
        btnRecplay.disabled = true;
        btnDownload.disabled = true;
    }else{
        stopRecord();
        btnRecord.textContent = "Start Record";
        btnRecplay.disabled = false;
        btnDownload.disabled = false;    
    }
}

//---------設置事件：播放-----


btnRecplay.onclick = function(){
    var blob = new Blob(buffer,{type: 'video/webm'});        //生成了一個可以處理buffer的對象
    recvideoplay.src = window.URL.createObjectURL(blob);    //獲取數據所在位置
    recvideoplay.srcObject = null;    //實時獲取數據時才需要
    recvideoplay.controls = true;    //進行播放控制，播放與暫停
    recvideoplay.play();    //進行播放
}

//---------設置事件：下載-----

btnDownload.onclick = function(){
    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 = "video.webm";
    a.click();
}

（二）結果顯示

三：WebRTC采集屏幕數據

（一）獲取桌面API

（二）對瀏覽器進行設置（chrome新版本中的功能）

（三）代碼實現

'use strict'

//視頻錄制
var videoplay = document.querySelector("video#player");
//視頻播放
var recvideoplay = document.querySelector("video#recplayer");
//約束顯示
var divConstraints = document.querySelector("div#constraints");

//--------按鈕
var btnRecord = document.querySelector("button#record");
var btnRecplay = document.querySelector("button#recplay");
var btnDownload = document.querySelector("button#download");

var buffer;    //存儲錄制數據
var mediaRecorder;    //對象

function start(){
    console.log("start......");
    if(!navigator.mediaDevices || 
        !navigator.mediaDevices.getDisplayMedia){
        console.log("getDisplayMedia is not supported!");
    }else{
        var constraints = {
            video : true,
            audio : false
        }

        navigator.mediaDevices.getDisplayMedia(constraints)
                    .then(getMediaStream)
                    .catch(handleError);
    }
}

function getMediaStream(stream){
    window.stream = stream;            //將stream變量放入全局中

    videoplay.srcObject = stream;    //設置采集到的流進行播放

    //獲取視頻的track
    var videoTrack = stream.getVideoTracks()[0];        //只有一個，所以只取一個
    var videoConstraints = videoTrack.getSettings();    //獲取約束對象

    divConstraints.textContent = JSON.stringify(videoConstraints,null,2);        //轉為json
}

function handleError(err){
    console.log(err.name+":"+err.message);
}

start();    //開始執行邏輯

//---------設置事件：錄制-----

//設置數據處理函數
function handleDataAvail(e){
    if(e && e.data && e.data.size > 0){
        buffer.push(e.data);    
    }
}


//錄制與停止錄制
function startRecord(){
    buffer = [];    //定義數據

    var options = {
        mimeType: "video/webm;codecs=vp8"
    }

    if(!MediaRecorder.isTypeSupported(options.mimeType)){    //查看是否支持這個類型
        console.error("${options.mimeType} is not suppported!");
        return;
    }

    try{
        mediaRecorder = new MediaRecorder(window.stream,options);
    }catch(e){
        console.error("Failed to create MediaRecoder!");
        return;
    }

    mediaRecorder.ondataavailable = handleDataAvail;
    mediaRecorder.start(10);    //設置時間片存儲數據
}

function stopRecord(){
    mediaRecorder.stop();        //停止錄制
}

btnRecord.onclick = function(){
    if(btnRecord.textContent === "Start Record"){
        startRecord();
        btnRecord.textContent = "Stop Record";
        btnRecplay.disabled = true;
        btnDownload.disabled = true;
    }else{
        stopRecord();
        btnRecord.textContent = "Start Record";
        btnRecplay.disabled = false;
        btnDownload.disabled = false;    
    }
}

//---------設置事件：播放-----


btnRecplay.onclick = function(){
    var blob = new Blob(buffer,{type: 'video/webm'});        //生成了一個可以處理buffer的對象
    recvideoplay.src = window.URL.createObjectURL(blob);    //獲取數據所在位置
    recvideoplay.srcObject = null;    //實時獲取數據時才需要
    recvideoplay.controls = true;    //進行播放控制，播放與暫停
    recvideoplay.play();    //進行播放
}

//---------設置事件：下載-----

btnDownload.onclick = function(){
    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 = "video.webm";
    a.click();
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 [轉]WebRTC 音視頻開發總結（八） WebRTC 音視頻同步原理與實現 WebRTC筆記（三）音視頻同步 Android WebRTC 音視頻開發總結基於webrtc的android和windows音視頻通訊 WebRTC實時音視頻通訊 Android WebRTC 音視頻開發總結（一） Android WebRTC 音視頻開發總結（四）-- webrtc傳輸模塊 Android WebRTC 音視頻開發總結（五）-- webrtc開發原型 Android IOS WebRTC 音視頻開發總結（五四）-- WebRTC標准之父談WebRTC