WebRTC-本地简单端到端视频通话demo

Nwafu_zyccc

已于 2022-03-19 12:55:01 修改

阅读量487

点赞数

文章标签： webrtc 音视频

于 2022-03-19 12:52:52 首次发布

本文链接：https://blog.csdn.net/qq_33329316/article/details/123592701

版权

内容概述

前文说了端到端的概念

简单代码写一个demo

效果如图

在这里插入图片描述

基础界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本机端到端连接测试</title>
    <link href="./css/main.css" rel="stylesheet" />
</head>
<body>
<div>


    <div>
        <button id="start">Start</button>
        <button id="call" disabled>Call</button>
        <button id="hangup" disabled>HangUp</button>
    </div>

    <div id="preview">
        <div >
            <h2>Local:</h2>
            <video id="localvideo" autoplay playsinline></video>
            <h2>Local SDP:</h2>
            <textarea id="offer"></textarea>
        </div>
        <div>
            <h2>Remote:</h2>
            <video id="remotevideo" autoplay playsinline></video>
            <h2>Remote SDP:</h2>
            <textarea id="answer"></textarea>
        </div>
    </div>
</div>

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

业务逻辑

和前文流程一致

'use strict'

var localVideo = document.querySelector('video#localvideo');
var remoteVideo = document.querySelector('video#remotevideo');

var btnStart = document.querySelector('button#start');
var btnCall = document.querySelector('button#call');
var btnHangup = document.querySelector('button#hangup');

var offerSdpTextarea = document.querySelector('textarea#offer');
var answerSdpTextarea = document.querySelector('textarea#answer');

var localStream;
var pc1;
var pc2;

function getMediaStream(stream){
    localVideo.srcObject = stream;
    localStream = stream;
}

function handleError(err){
    console.error('Failed to get Media Stream!', err);
}

function start(){

    if(!navigator.mediaDevices ||
        !navigator.mediaDevices.getUserMedia){
        console.error('the getUserMedia is not supported!');
        return;
    }else {
        var constraints = {
            video : {
                width: 640,
                height: 480,
                frameRate:15,
            },
            audio: false
        }
        navigator.mediaDevices.getDisplayMedia(constraints)
            .then(getMediaStream)
            .catch(handleError);

        btnStart.disabled = true;
        btnCall.disabled = false;
        btnHangup.disabled = true;
    }
}

function getRemoteStream(e){
    remoteVideo.srcObject = e.streams[0];
}

function handleOfferError(err){
    console.error('Failed to create offer:', err);
}

function handleAnswerError(err){
    console.error('Failed to create answer:', err);
}

function getAnswer(desc){
    pc2.setLocalDescription(desc);
    answerSdpTextarea.value = desc.sdp

    //send desc to signal
    //receive desc from signal

    pc1.setRemoteDescription(desc);
}

function getOffer(desc){
    pc1.setLocalDescription(desc);
    offerSdpTextarea.value = desc.sdp

    //send desc to signal
    //receive desc from signal

    pc2.setRemoteDescription(desc);

    pc2.createAnswer()
        .then(getAnswer)
        .catch(handleAnswerError);

}

function call(){

    pc1 = new RTCPeerConnection();
    pc2 = new RTCPeerConnection();

    pc1.onicecandidate = (e)=>{
        pc2.addIceCandidate(e.candidate);
    }

    pc2.onicecandidate = (e)=>{
        pc1.addIceCandidate(e.candidate);
    }

    pc2.ontrack = getRemoteStream;

    localStream.getTracks().forEach((track)=>{
        pc1.addTrack(track, localStream);
    });

    var offerOptions = {
        offerToRecieveAudio: 0,
        offerToRecieveVideo: 1
    }

    pc1.createOffer(offerOptions)
        .then(getOffer)
        .catch(handleOfferError);

    btnCall.disabled = true;
    btnHangup.disabled = false;
}

function hangup(){
    pc1.close();
    pc2.close();
    pc1 = null;
    pc2 = null;

    btnCall.disabled = false;
    btnHangup.disabled = true;
}

btnStart.onclick = start;
btnCall.onclick = call;
btnHangup.onclick = hangup;