webrtc学习-3 音视频获取+约束+分析流保存视频

首先定义基础界面和初始化一些视频约束

具体功能有 ：

 1 播放视频 
 2 录制视频 
 3 获取视频流的轨信息  
 4 录制视频 
 5 下载视频 
 6 播放视频  

 <title>WebRTC capture video and audio</title>


    <style>
        .none {
            -webkit-filter: none;
        }

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

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

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

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

    </style>
    <script src="js/client.js"></script>
section>
    <div>
        <label>audio Source:</label>
        <select id="audioSource"></select>
    </div>

    <div>
        <label>audio Output:</label>
        <select id="audioOutput"></select>
    </div>

    <div>
        <label>video Source:</label>
        <select id="videoSource"></select>
    </div>

</section>
<section>
    <div>
        <label>Filter:</label>
        <select id="filter">
            <option value="none">None</option>
            <option value="blur">blur</option>
            <option value="grayscale">Grayscale</option>
            <option value="invert">Invert</option>
            <option value="sepia">sepia</option>
        </select>
    </div>

    <!--<audio autoplay controls id='audioplayer'></audio>-->
<div>
    <table>
        <tr>
        <tr>
            <td><video autoplay playsinline id="player"></video></td>
             <td><video playsinline id="recplayer"></video></td>
            <td><div id='constraints' class='output'></div></td>
        <tr>
            <td><button id="record">Start Record</button></td>
            <td><button id="recplay" disabled>Play</button></td>
            <td><button id="download" disabled>Download</button></td>
        </tr>
    </table>


<!--    <audio autoplay controls id="audioplayer"></audio>-->
</div>



</section>
<section>
    <div>
        <button id="snapshot">Take snapshot</button>
    </div>
    <div>
        <canvas id="picture"></canvas>
    </div>
</section>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="./js/client.js"></script>
</body>
</html>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
这个是作为浏览器适配用的

js绑定参数

//devices
var audioSource = document.querySelector('select#audioSource');
var audioOutput = document.querySelector('select#audioOutput');
var videoSource = document.querySelector('select#videoSource');

//filter
var filtersSelect = document.querySelector('select#filter');

//picture
var snapshot = document.querySelector('button#snapshot');
var picture = document.querySelector('canvas#picture');
picture.width = 640;
picture.height = 480;

var videoplay = document.querySelector('video#player');


//div
var divConstraints = document.querySelector('div#constraints');

//record
var recvideo = document.querySelector('video#recplayer');
var btnRecord = document.querySelector('button#record');
var btnPlay = document.querySelector('button#recplay');
var btnDownload = document.querySelector('button#download');

基础初始化

这里是如果没有https 有可能申请失败

if(!navigator.mediaDevices ||
        !navigator.mediaDevices.getUserMedia){

        console.log('getUserMedia is not supported!');

function start() {

    if(!navigator.mediaDevices ||
        !navigator.mediaDevices.getUserMedia){

        console.log('getUserMedia is not supported!');
        return;

    }else{

        var deviceId = videoSource.value;
        var constraints = {
            video : {
                width: 640,
                height: 480,
                frameRate:15,
                facingMode: 'enviroment',
                deviceId : deviceId ? {exact:deviceId} : undefined
            },
            audio : false
        }

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

获取相关音视频相关设备参数

function gotMediaStream(stream){

    return navigator.mediaDevices.enumerateDevices();
}
function gotDevices(deviceInfos){

    deviceInfos.forEach(function(deviceinfo){

        var option = document.createElement('option');
        option.text = deviceinfo.label;
        option.value = deviceinfo.deviceId;

        if(deviceinfo.kind === 'audioinput'){
            audioSource.appendChild(option);
        }else if(deviceinfo.kind === 'audiooutput'){
            audioOutput.appendChild(option);
        }else if(deviceinfo.kind === 'videoinput'){
            videoSource.appendChild(option);
        }
    })
}

获取视频数据

function gotMediaStream(stream){

    var videoTrack = stream.getVideoTracks()[0];
    var videoConstraints = videoTrack.getSettings();

    divConstraints.textContent = JSON.stringify(videoConstraints, null, 2);

    videoplay.srcObject = stream;

    //audioplay.srcObject = stream;
    return navigator.mediaDevices.enumerateDevices();
}

初始化视频过滤相关

filtersSelect.onchange = function(){
    videoplay.className = filtersSelect.value;
}

截图

snapshot.onclick = function() {
    picture.className = filtersSelect.value;
    picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height);
}

录制

btnRecord.onclick = ()=>{

    if(btnRecord.textContent === 'Start Record'){
        startRecord();
        btnRecord.textContent = 'Stop Record';
        btnPlay.disabled = true;
        btnDownload.disabled = true;
    }else{

        stopRecord();
        btnRecord.textContent = 'Start Record';
        btnPlay.disabled = false;
        btnDownload.disabled = false;

    }
}

function startRecord(){

    buffer = [];

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

    if(!MediaRecorder.isTypeSupported(options.mimeType)){
        console.error(`${options.mimeType} is not supported!`);
        return;
    }

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

    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.start(10);

}
function stopRecord(){
    mediaRecorder.stop();
}
function handleDataAvailable(e){
    if(e && e.data && e.data.size > 0){
        buffer.push(e.data);
    }
}

播放录屏和下载录屏

tnPlay.onclick = ()=> {
    var blob = new Blob(buffer, {type: 'video/webm'});
    recvideo.src = window.URL.createObjectURL(blob);
    recvideo.srcObject = null;
    recvideo.controls = true;
    recvideo.play();
}

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

####获取视频流中第一个轨的信息

function gotMediaStream(stream){

    var videoTrack = stream.getVideoTracks()[0];
    var videoConstraints = videoTrack.getSettings();

    divConstraints.textContent = JSON.stringify(videoConstraints, null, 2);


    //audioplay.srcObject = stream;
    return navigator.mediaDevices.enumerateDevices();
}