web实时音视频demo

Web实时音视频（WebRTC）是一种支持网页浏览器进行实时音视频通信的技术。它允许用户通过简单的API调用，在不需要任何插件的情况下，在浏览器之间直接传输音频和视频数据。

基础概念

WebRTC的核心组件包括：

getUserMedia：用于访问用户的摄像头和麦克风。
RTCPeerConnection：用于建立和管理点对点的音视频连接。
RTCDataChannel：用于传输任意数据，不仅仅是音视频流。

优势

实时性：低延迟的音视频传输。
跨平台：支持多种浏览器和设备。
安全性：数据传输采用加密方式，保障通信安全。
易用性：开发者可以通过简单的API实现复杂的通信功能。

类型

一对一通信：最常见的应用场景，两个用户之间的直接通信。
多人会议：通过信令服务器协调多个用户之间的连接。
直播推流：将音视频流推送到服务器，供大量观众观看。

应用场景

在线教育：远程教学和互动课堂。
远程医疗：视频会诊和手术直播。
视频会议：企业内部沟通和协作。
娱乐直播：游戏直播和在线演唱会。

示例代码

以下是一个简单的WebRTC一对一通信的示例代码：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebRTC Demo</title>
</head>
<body>
    <video id="localVideo" autoplay playsinline></video>
    <video id="remoteVideo" autoplay playsinline></video>
    <button id="startButton">Start</button>
    <button id="callButton">Call</button>
    <button id="hangupButton">Hang Up</button>
    <script src="app.js"></script>
</body>
</html>

JavaScript部分（app.js）

const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');
const startButton = document.getElementById('startButton');
const callButton = document.getElementById('callButton');
const hangupButton = document.getElementById('hangupButton');

let localStream;
let remoteStream;
let peerConnection;

const servers = {
    iceServers: [
        { urls: 'stun:stun.l.google.com:19302' }
    ]
};

startButton.onclick = async () => {
    localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    localVideo.srcObject = localStream;
};

callButton.onclick = async () => {
    peerConnection = new RTCPeerConnection(servers);
    peerConnection.onicecandidate = event => {
        if (event.candidate) {
            // Send the candidate to the remote peer
        }
    };
    peerConnection.ontrack = event => {
        remoteVideo.srcObject = event.streams[0];
    };

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

    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);
    // Send the offer to the remote peer
};

hangupButton.onclick = () => {
    peerConnection.close();
    peerConnection = null;
};