[javascript] 使用javascript实现webrtc视频聊天demo

唯一Chat

发布于 2021-02-04 11:24:20

2.2K00

代码可运行

文章被收录于专栏：陶士涵的菜地陶士涵的菜地

运行总次数：0

代码可运行

自己的ID是自动获取的，然后输入对方的ID , 对方的ID可以这样获取，再打开新的浏览器或者手机也可以

原理是利用js的h5新特性获取摄像头视频流，通过peerjs的服务交换双方的信息，然后使用浏览器的webrtc特性进行点对点通信，这个时候是不需要中间服务器的

代码如下：

<html>
<head>
    <title>视频聊天</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"/>（自动获取）
    对方ID<input type="text" id="youPeerid"/>（请手动输入）
    <button id="callBtn">聊天</button>
</div>
<h3>远程视频</h3>
<video id="remoteVideo" style="width: 400px;height: 300px;"></video>



<script type="text/javascript">
    //访问用户媒体设备的兼容方法
    function getUserMedia(constrains,success,error){
        if(navigator.mediaDevices.getUserMedia){
            //最新标准API
            navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia){
            //webkit内核浏览器
            navigator.webkitGetUserMedia(constrains).then(success).catch(error);
        } else if (navigator.mozGetUserMedia){
            //Firefox浏览器
            navagator.mozGetUserMedia(constrains).then(success).catch(error);
        } else if (navigator.getUserMedia){
            //旧版API
            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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-02-01 ，如有侵权请联系 cloudcommunity@tencent.com 删除

webrtc