WebRTC 웹 페이지 녹음 오디오 및 비디오 튜토리얼

서론 : 최근에 웹페이지의 오디오 및 비디오 녹화의 원리와 구현에 대해 공부했고, 이제 현재 구현 방법을 요약해 보겠습니다.

콘텐츠

• 관련 API
• 방법 소개
• 실용 드릴

관련 API

이 기능을 수행하려면 두 개의 js API가 필요합니다.

• getUserMedia

• 미디어 레코더

방법 소개

getUserMedia

이 인터페이스를 사용 getUserMedia하여 장치의 카메라와 마이크를 가져오고 Promise개체를 반환합니다.

문법var stream = navigator.mediaDevices.getUserMedia(constraints);

constraints여기에는 다음과 같은 철자가 포함됩니다.

• 오디오 및 비디오 요청

const constraints = {
    audio: true,
    video: true
}
复制代码

• 특정 장치 비디오 해상도 요청

const constraints = {
    audio: true,
    video: {
        width: { 
            min: 1280 
        },
        height: { 
            min: 720 
        }
    }
}
复制代码

• 전면 카메라 사용(기본값)

const constraints = {
    audio: true,
    video: {
        facingMode: "user"
    }
}
复制代码

• 후방카메라 강제사용

const constraints = {
    audio: true,
    video: {
        facingMode: {
            exact: "environment"
        }
    }
}
复制代码

예:

const constraints = {
    audio: true,
    video: {
        width: 1280,
        height: 720
    }
};

async function createMedia() {
    try {
        let stream = await navigator.mediaDevices.getUserMedia(constraints);
        var video = document.querySelector('video');
        video.srcObject = stream;
        video.onloadedmetadata = function (e) {
            video.play();
        };
    } catch (error) {
        console.log(`getUserMedia: ${error}`);
    }
}

createMedia();
复制代码

물론 stream다음과 같은 다른 방법도 사용할 수 있습니다.

• addTrack스트림에 새 트랙 추가
• getAudioTracks스트림의 모든 오디오 트랙을 포함합니다.
• getVideoTracks미디어 스트림에 포함된 각 비디오 트랙에 대해
• getTracks이 스트림의 모든 개체

미디어 레코더

이것은 스트림을 기록하는 한 가지 방법입니다.

• start녹음 시작
• stop녹음 종료
• onstop이벤트 종료 듣기
• ondataavailable실시간 스트리밍 데이터

문법var mediaRecorder = new MediaRecorder(stream[, options]);

예

// stream就是上面获取的音视频流
let options = {
    audioBitsPerSecond : 128000,
    videoBitsPerSecond : 2500000,
}
let mediaRecorder = new MediaRecorder(stream, options);

// 实时的录制流数据
mediaRecorder.ondataavailable = function (e) {  
    console.log(e.data);
}

// 监听停止录制事件并生成播放地址
mediaRecorder.onstop = function () {
    let blob = new Blob(chunks, {'type': mediaRecorder.mimeType});
    let url = window.URL.createObjectURL(blob);
    console.log(url);
}
复制代码

실용 드릴

• 페이지 구조 섹션

<audio controls src=""></audio>
<video controls src="" style="width: 100%;"></video>
<button id="start">开始音频</button>
<button id="stop">结束音频</button>
<button id="play">播放音频</button>
<button id="startVideo">开始视频</button>
<button id="stopVideo">结束视频</button>
<button id="playVideo">播放视频</button>
复制代码

• js 부분

요소 추가 이벤트 가져오기

// 获取按钮
let audioStart = document.querySelector('#start');
let audioStop = document.querySelector('#stop');
let audioPlay = document.querySelector('#play');
let startVideo = document.querySelector('#startVideo');
let stopVideo = document.querySelector('#stopVideo');
let playVideo = document.querySelector('#playVideo');

// 音频操作
audioStart.onclick = function () {  
    start('audio');
}

audioStop.onclick = function () {  
    stop('audio');
}

audioPlay.onclick = function () {  
    document.querySelector('audio').play();
}

// 视频操作
startVideo.onclick = function () {  
    start('video');
}

stopVideo.onclick = function () {  
    stop('video');
}

playVideo.onclick = function () {  
    document.querySelector('video').play();
}
复制代码

녹음 시작

// 开始录制
function start (type) {
    let option = type == 'audio' ? {
        audio: true
    } : {
        video: true,
    }
    createMedia(type, option);
}
复制代码

녹음 중지

// 停止录制
function stop (type) {
    mediaRecorder.stop();
}

function stopSet (type) {  
    if (type == 'audio') {
        stream.getAudioTracks()[0].stop();
        stream = null;
    } else {
        stream.getVideoTracks()[0].stop();
    }
    stream = null;
    mediaRecorder = null;
    chunks = [];
    meida = null;
}
复制代码

통용 방법

// 全局参数
let stream = null,mediaRecorder = null,chunks = [], media = null;
async function createMedia (type, option) {  
    try {
        // 获取媒体流
        stream = await navigator.mediaDevices.getUserMedia(option);
        media = document.querySelector(type);
        if (type === 'video') {
            media.srcObject = stream;
        }
        console.log(type, stream);

        // 录制流
        let options = {
            audioBitsPerSecond : 128000,
            videoBitsPerSecond : 2500000,
        }
        mediaRecorder = new MediaRecorder(stream, options);
        console.log(type, mediaRecorder);

        mediaRecorder.ondataavailable = function (e) {  
            chunks.push(e.data);
        }

        mediaRecorder.start();

        // 停止录制
        mediaRecorder.onstop = function () {
            let blob = new Blob(chunks, {'type': mediaRecorder.mimeType});
            let url = window.URL.createObjectURL(blob);
            if (type === 'video') {
                media.srcObject = null;
            }
            media.src = url;
            stopSet(type);
        }

    } catch (error) {
        console.log('getUserMedia： ', error);
    }
}
复制代码

효과를 보다

당신이 그것을 경험하고 싶다면, 당신은 휴대 전화에 더 나은 이 오디오 및 비디오 녹음 을 켤 수 있습니다 .

자, 오늘의 튜토리얼은 여기까지입니다. 안녕!