webrtc实现视频通话（前端）

最新推荐文章于 2024-08-01 16:52:20 发布

weixin_40983140

最新推荐文章于 2024-08-01 16:52:20 发布

阅读量2.4k

点赞数 1

分类专栏：互联网前端文章标签：前端 webrtc 音视频

本文链接：https://blog.csdn.net/weixin_40983140/article/details/126107096

版权

这篇博客详细记录了如何使用前端技术WebRTC来实现视频通话功能。通过结合WebSocket进行传输通信，后端采用Java实现，尽管内容中提到已将后端改为Vue3，但具体Vue3的代码并未提供。

摘要由CSDN通过智能技术生成

记录前端代码，实现视频通话。后台主要用java写一个websocket实现传输通信，后边我改成了vue3，就不上传了，vue版本自己改一下就行。

代码片.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>video</title>
</head>
<body>
<h2 style="text-align: center;">播放页面</h2>
<h3 id="userId" style="text-align: center;"></h3>
<center>
    <div>
        <video id="localVideo" class="video" muted autoplay="autoplay"></video>
        <video id="remoteVideo" class="video" height="100px" autoplay="autoplay"></video>
    </div>
</center>
</br>
<div style="text-align: center;">
    <button id="callBtn" onclick="requestConnect()">建立连接</button>
    <button id="hangupBtn" onclick="hangupHandle()">断开连接</button>
</div>
</br>
<div style="text-align: center;">
    对方id: <input id="toUserId">
</div>
</body>
</html>
<script src="./js/adapter-latest.js"></script>
<script>
    var flag = false;//防止断开连接时彼此无法同时断开问题
    const localVideo = document.querySelector('#localVideo');
    const remoteVideo = document.querySelector('#remoteVideo');

    const callBtn = document.getElementById('callBtn')
    const hangupBtn = document.getElementById('hangupBtn')

    const config = {
   
        iceServers: [
            // { urls: 'stun:10.243.0.101:3478' }
            {
    urls: 'stun:159.75.239.36:3478' }
        ],
    };

    let peerConnection;

    let socket, userId, toUserId;
    userId = parseInt(Math.random()*10000);
    document.getElementById('userId').innerText = '我的id:' + userId;

    // 本地流和远端流
    let localStream, remoteStream;

    function requestConnect() {
   
        toUserId = document.getElementById('toUserId').value
        if(!toUserId){
   
            alert('请输入对方id')
            return false
        }else if(!socket){
   
            alert('请先打开websocket')
            return false
        }else if(toUserId == userId){
   
            alert('自己不能和自己连接')
            return false
        }
        //准备连接
        startHandle().then(