通过peerjs无需后台服务器前端实现视频通话功能

最新推荐文章于 2024-08-09 07:08:06 发布

不愁发量

最新推荐文章于 2024-08-09 07:08:06 发布

阅读量2.3k

点赞数 3

分类专栏： js 文章标签：前端音视频视频 javascript

本文链接：https://blog.csdn.net/zzh122500/article/details/126837375

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该博客提供了一段HTML代码，展示了如何利用PeerJS库在两台设备之间建立视频通话。用户只需输入对方的ID，点击确认按钮即可开始视频通话。代码中包含了获取媒体设备、创建Peer对象、处理视频流和通话事件等功能。

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

直接上代码，粘贴即可使用，俩台设备打开网页后，将一台设备的ID填入到另一台设备中，点击确认按钮直接进行视频通话。

<html>
<head>
    <title>peerjs视频聊天</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/peerjs/1.3.1/peerjs.min.js"></script>
</head>
<body>
<h3>视频聊天</h3>
<video id="localVideo" style="width: 400px;height: 300px;"></video>
<div style="text-align: left">
    自己ID<input type="text" id="myPeerid"/>
    <br>
    对方ID<input type="text" id="youPeerid"/>
    <br>
    <button id="callBtn">确认</button>
</div>
<video id="remoteVideo" style="width: 400px;height: 300px;"></video>
<script type="text/javascript">
    //媒体设备的兼容方法
    function getUserMedia(constrains,success,error){
        if(navigator.mediaDevices.getUserMedia){
            navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia){
            navigator.webkitGetUserMedia(constrains).then(success).catch(error);
        } else if (navigator.mozGetUserMedia){
            navagator.mozGetUserMedia(constrains).then(success).catch(error);
        } else if (navigator.getUserMedia){
            navigator.getUserMedia(constrains).then(success).catch(error);
        }
    }
    var localVideo = document.querySelector('video#localVideo');
    var remoteVideo = document.querySelector('video#remoteVideo');
    var localStream=null;
    $(function(){
        getUserMedia({video: true, audio: true}, function(stream) {
            localStream=stream;
            localVideo.srcObject = stream;
            localVideo.autoplay = true;
            localVideo.play();
        }, function(err) {
            console.log('Failed to get local stream' ,err);
        });
 
        var peer = new Peer();
        peer.on('open', function(id) {
            $("#myPeerid").val(id);
        });
        peer.on('call', function(call) {
            call.answer(localStream);
            call.on('stream', function(remoteStream) {
                console.log(remoteStream);
                remoteVideo.srcObject = remoteStream;
                remoteVideo.autoplay = true;
            });
        });
        $('#callBtn').click(function(){
            var remoteId=$("#youPeerid").val();
            if(remoteId==""){
                alert("请输入对方ID");return;
            }
 
            var call = peer.call(remoteId,localStream);
            call.on('stream', function(remoteStream) {
                console.log(remoteStream);
                remoteVideo.srcObject = remoteStream;
                remoteVideo.autoplay = true;
            });
            call.on('close', function() {
                console.log("call close");
                _this.loading.close();
            });
            call.on('error', function(err) {
                console.log(err);
                _this.loading.close();
            });
        });
    });
</script>
</body>
</html>