[javascript] 使用javascript实现webrtc视频聊天demo_html-js-css

概述自己的ID是自动获取的，然后输入对方的ID , 对方的ID可以这样获取，再打开新的浏览器或者手机也可以原理是利用js的h5新特性获取摄像头视频流，通过peerjs的服务交换双方的信息，

自己的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=youPeerID（请手动输入）    <button ID=callBtn">聊天</button></div><h3>远程视频</h3><vIDeo ID=remoteVIDeo"></vIDeo><script type=text/JavaScript">    //访问用户媒体设备的兼容方法    function getUserMedia(constrains,success,error){        if(navigator.mediaDevices.getUserMedia){            最新标准API            navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);        } else  (navigator.webkitGetUserMedia){            webkit内核浏览器            navigator.webkitGetUserMedia(constrains).then(success). (navigator.mozGetUserMedia){            firefox浏览器            navagator.mozGetUserMedia(constrains).then(success). (navigator.getUserMedia){            旧版API            navigator.getUserMedia(constrains).then(success).(error);        }    }    var localVIDeo = document.querySelector('vIDeo#localVIDeo');    var remoteVIDeo = document.querySelector(vIDeo#remoteVIDeovar localStream=null;    $(function(){        getUserMedia({vIDeo: true,audio: true},function(stream) {            localStream=stream;            localVIDeo.srcObject = stream;            localVIDeo.autoplay = ;            localVIDeo.play();        },function(err) {            console.log(@R_404_5138@ to get local stream,err);        });        var peer = new Peer();        peer.on(open#myPeerID").val(ID);        });        peer.on(callstream remoteStream;                remoteVIDeo.autoplay = ;            });        });        $(#callBtn).click(function(){            var remoteID=$(#youPeerID).val();            if(remoteID==""){                alert(请输入对方ID");return;            }            var call = peer.call(remoteID,localStream);            call.on(;            });            call.on(closecall close);                _this.loading.close();            });            call.on(error          总结       以上是内存溢出为你收集整理的[javascript] 使用javascript实现webrtc视频聊天demo全部内容，希望文章能够帮你解决[javascript] 使用javascript实现webrtc视频聊天demo所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。					
										


					
						欢迎分享，转载请注明来源：内存溢出
原文地址: https://outofmemory.cn/web/1015223.html

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

发表评论

评论列表（0条）