1. <script>
    2.   export default {
    3.     components: {},
    4.     data() {
    5.       return {
    6.         fromIm: Math.floor(Math.random()*1000),
    7.         toIm: '',
    8.         ws: '',
    9.         rtcPeer: '',
    10.         localVideo: '',
    11.         remoteVideo: '',
    12.         offerIces: [],
    13.         answerIces: [],
    14.         iceFlag: false
    15.       }
    16.     },
    17.     mounted() {
    18.       this.initWs()
    19.     },
    20.     methods:{
    21.       sender(){
    22.         if(!this.toIm){
    23.             alert("toIm不能为空")
    24.             return;
    25.         }
    26.         this.initMedia('offer')
    27.       },
    28.       initWs(){
    29.         let _this = this
    30.         //修改成你自己websocket服务端的ip和端口
    31.         _this.ws = new WebSocket("wss://www.xxxxxx.com/ws?username="+this.fromIm);
    32.         _this.ws.onopen = function(){
    33.             // Web Socket 已连接上，使用 send() 方法发送数据
    34.             alert("WebSocket连接成功");
    35.             //心跳检测
    36.             setInterval(() => {
    37.                 _this.ws.send("{msgType: 'PING'}")
    38.             },5000)
    39.         };
    40.         //我自己定义的格式，你们可以根据自己修改
    41.         //ret = {msgType: 'RTC',msg: '消息体',toIm: '接收人', fromIm: '发送人'}
    42.         _this.ws.onmessage = function (ret){ 
    43.             var data = JSON.parse(ret.data)
    44.             console.log("收到消息",data)
    45.             if(data.msgType!=='RTC'){
    46.             return;
    47.             }
    48.             const { type, sdp, iceCandidate } = JSON.parse(data.msg)
    49.             console.log("收到消息",type,iceCandidate)
    50.             if (type === 'answer') {
    51.                 _this.rtcPeer.setRemoteDescription(new RTCSessionDescription({ type, sdp }));
    52.             } else if (type === 'answer_ice') {
    53.                 _this.answerIces.push(iceCandidate)
    54.             } else if (type === 'offer') {
    55.                 _this.toIm = data.fromIm
    56.                 _this.initMedia("answer",new RTCSessionDescription({ type, sdp }));
    57.             } else if (type === 'offer_ice') {
    58.                 _this.offerIces.push(iceCandidate)
    59.             }
    60.         };
    62.         _this.ws.onclose = function(){ 
    63.             // 关闭 websocket
    64.             alert("WebSocket连接已关闭..."); 
    65.         };
    66.       },
    67.       //接收拨打方的消息，判断后添加候选人（因为addIceCandidate必须在设置描述remoteDescription之后，如果还没设置描述，我们先把它存起来，添加描述后再添加候选人）
    68.       intervalAddIce(){
    69.         let _this = this
    70.         setInterval(() => {
    71.           if(_this.rtcPeer && _this.rtcPeer.remoteDescription && _this.rtcPeer.remoteDescription.type){
    72.             if(!_this.iceFlag){
    73.               _this.iceFlag = true;
    74.               while(_this.offerIces.length>0){
    75.                 let iceCandidate = _this.offerIces.shift();
    76.                 _this.rtcPeer.addIceCandidate(iceCandidate).then(_=>{
    77.                   console.log("success addIceCandidate()");
    78.                 }).catch(e=>{
    79.                   console.log("Error: Failure during addIceCandidate()",e);
    80.                 });
    81.               }
    83.               while(_this.answerIces.length>0){
    84.                 let iceCandidate = _this.answerIces.shift();
    85.                 _this.rtcPeer.addIceCandidate(iceCandidate).then(_=>{
    86.                   console.log("success addIceCandidate()");
    87.                 }).catch(e=>{
    88.                   console.log("Error: Failure during addIceCandidate()",e);
    89.                 });
    90.               }
    91.               _this.iceFlag = false;
    92.             }
    93.           }
    94.         }, 1000);
    95.       },
    96.       //初始化媒体源
    97.       async initMedia(iceType,offerSdp){
    98.         var _this = this
    99.         //ios浏览器不判断这部分会提示不支持  (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
    100.         const UserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || (navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
    101.         if(!UserMedia){
    102.           alert("media,您的浏览器不支持访问用户媒体设备，请换一个浏览器")
    103.           return;
    104.         }
    105.         //RTCPeerConnection 接口代表一个由本地计算机到远端的WebRTC连接。该接口提供了创建，保持，监控，关闭连接的方法的实现。   
    106.         const PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
    107.         if(!PeerConnection){
    108.           alert("peer,您的浏览器不支持访问用户媒体设备，请换一个浏览器")
    109.           return;
    110.         }
    112.         _this.localVideo = document.getElementById('localVideo');
    114.         navigator.mediaDevices.getUserMedia({
    115.           audio: {
    116.             channelCount: {ideal: 2,min: 1}, //双声道
    117.             echoCancellation: true, //回声消除
    118.             autoGainControl: true, //修改麦克风输入音量，自动增益
    119.             noiseSuppression: true //消除背景噪声
    120.           }
    121.           // video: { //可以指定获取传入摄像头影像的宽高
    122.           //   width: 400,
    123.           //   height: 500
    124.           // }
    125.           ,video: true
    126.         }).then(async stream => {
    127.           await _this.initPeer(iceType,PeerConnection)
    128.           _this.intervalAddIce()
    129.           //成功打开音视频流
    130.           try {
    131.             _this.localVideo.srcObject = stream;
    132.           } catch (error) {
    133.             _this.localVideo.src = await window.URL.createObjectURL(stream);
    134.           }
    135.           stream.getTracks().forEach( async track => {
    136.            await _this.rtcPeer.addTrack(track, stream);
    137.           });
    138.           if (!offerSdp) {
    139.             console.log('创建本地SDP');
    140.             const offer = await _this.rtcPeer.createOffer();
    141.             await _this.rtcPeer.setLocalDescription(offer);
    143.             console.log(`传输发起方本地SDP`,offer);
    144.             await _this.ws.send(_this.getMsgObj(offer));
    146.           } else {
    147.             console.log('接收到发送方SDP');
    148.             await _this.rtcPeer.setRemoteDescription(offerSdp);
    150.             console.log('创建接收方（应答）SDP');
    151.             const answer = await _this.rtcPeer.createAnswer();
    152.             console.log(`传输接收方（应答）SDP`);
    153.             await _this.ws.send(_this.getMsgObj(answer));
    154.             await _this.rtcPeer.setLocalDescription(answer);
    155.           }
    156.         }).catch(error => {
    157.           alert("无法开启本地媒体源："+error);
    158.         })
    159.       },
    160.       //初始化webRtc连接
    161.       async initPeer(iceType,PeerConnection){
    162.         let _this = this
    163.         _this.remoteVideo = document.getElementById('remoteVideo');
    165.         if(!_this.rtcPeer){
    166.           var stun = "stun:120.24.202.127:3478"
    167.           var turn = "turn:120.24.202.127:3478"
    168.           var peerConfig = {
    169.               "iceServers": [{
    170.                   "urls": stun
    171.               }, {
    172.                   "urls": turn,
    173.                   "username": "admin",
    174.                   "credential": "123456"
    175.               }]
    176.           };
    177.           //如果是局域网，不需要配置穿透服务，直接传null即可
    178.           _this.rtcPeer = new PeerConnection(peerConfig);
    179.           _this.rtcPeer.onicecandidate = async (e) => {
    180.             if (e.candidate) {
    181.               console.log("搜集并发送候选人")
    182.               await _this.ws.send(_this.getMsgObj({
    183.                 type: iceType+'_ice',
    184.                 iceCandidate: e.candidate
    185.               }));
    186.             }else{
    187.               console.log("候选人收集完成")
    188.             }
    189.           };
    190.           _this.rtcPeer.ontrack =  async(e) => {
    191.             console.log("ontrack",e)
    192.               if (e && e.streams) {
    193.                 _this.remoteVideo.srcObject = await e.streams[0];
    194.               }
    195.           };
    196.         }
    197.       },
    198.       getMsgObj(msg){
    199.         var msgObj = {
    200.           fromIm: this.fromIm,
    201.           toIm: this.toIm,
    202.           msg: msg,
    203.           msgType: "RTC",
    204.         }
    205.         console.log(msgObj)
    206.         return JSON.stringify(msgObj);
    207.       }
    208.     }
    209.   }   
    210. </script>
    212. <style scoped>
    213.   .video {
    214.      transform: rotateY(180deg);
    215.    }
    216.    .remote{
    217.      float: left;
    218.    }
    219.    .local{
    221.    }
    222. </style>