编程知识 cdmana.com

One to one video chat with HTML5

Related technology stack

For the mobile end , Most of them are video chat functions Native End of the code , This way has good performance , The compatibility is strong, but the development cost will be higher , So this article will introduce the use of pure H5 To realize the video chat function .

  1. WebRTC
  2. Socket.io
  3. Node.js

Project screenshots :

1a8e735d7f754dc6bd8201dc79e43bb1~tplv-k3 fbaebdccfafd43bea3b0fd30f38017e5~tplv-k3 0a74d216593743eb9959ca854babce06~tplv-k3 26bd3f128d1240dd898111fea749ed5b~tplv-k3
e42a3172c2954439be2290e7116bed59~tplv-k3

Recommended Safari open .

WebRTC Introduce

WebRTC It mainly provides three core API:

  • getUserMedia: Access to local media streams , A stream contains several orbits , Like video and audio tracks .
  • getDisplayMedia: Get the video stream from the computer screen , But we can't get the audio media stream right now , If you need audio streaming , Manually add to track , Make it play in sync .
  • RTCPeerConnection: For building P2P Connect and transfer multimedia data .
  • RTCDataChannel: Set up a data channel for two-way communication , You can pass multiple data types .

These are through API, We can get local audio and video streams , Then establish a point-to-point connection with other browsers and send the audio and video stream to each other , You can also set up a two-way data channel , Send text 、 Real time data like files .

This project , We mainly use getUserMedia and RTCPeerConnection dependent API.

getUserMedia Audio and video collection API

You can use the getUserMedia Interface , Collect local audio and video .

const localVideo = document.getElementById('local-video');
//    Non safety mode ( Not https/localhost) Next  navigator.mediaDevices  Returns the  undefined
const mediaStream = await navigator.mediaDevices.getUserMedia({ 
    video: true, 
    audio: true
});
localVideo.srcObject = mediaStream;


RTCPeerConnection Creating point-to-point connections API

RTCPeerConnection To create a point-to-point connection API, It is the key to realize the real-time communication of audio and video , The following methods and events will be used :

Media negotiation methods

  • createOffer
  • createAnswer
  • setLocalDesccription
  • setRemoteDesccription
    Important events
  • onicecandidate
  • ontrack

For point-to-point connections , You need to have a sender and a receiver , Corresponding to the code above , Namely :

The sender :

const pc = new RTCPeerConnection(iceConfig);
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
sendToPeerViaSignalingServer(SIGNALING_OFFER, offer); //  The sender sends a signaling message 

The receiving party :

const pc = new RTCPeerConnection(iceConfig);
await pc.setRemoteDescription(offer);
const answer = await pc.createAnswer();
await pc.setLocalDescription(answer);
sendToPeerViaSignalingServer(SIGNALING_ANSWER, answer); //  The receiver sends a signaling message 

Add audio and video streams :

//  Add audio and video streams 
mediaStream.getTracks().forEach(track => {
    pc.addTrack(track, mediaStream);
});

Audio and video reception :

remotePeer.ontrack = function(evt) {
    const remoteVideo = document.getElementById('remote-video');
    remoteVideo.srcObject = evt.streams[0];
}

Some will use addstream and onaddstream Belong to the old version of API, It is no longer recommended here .

Communication negotiation process

stay WebRTC in , There's a special agreement , be called Session Description Protocol(SDP), It can be used to describe the above information . Therefore, both parties involved in audio and video communication want to know the media formats supported by the other party , It has to be exchanged SDP Information . And exchange SDP The process of , It's often called media negotiation . The whole media negotiation process is as follows :

  1. Call side creation Offer(createOffer) And will offer news ( The content is the caller's SDP Information ) It is transmitted to the receiving end through the signaling server , At the same time call setLocalDesccription Will contain local SDP The information of Offer Save up .

  2. The receiver receives the opposite Offer After the information is called setRemoteDesccription Method will contain the opposite end SDP The information of Offer Save up , And create Answer(createAnswer) And will Answer news ( Content is on the receiving end SDP Information ) The signaling is transmitted to the call server through .

  3. The caller receives a message from the other end Answer After the information is called setRemoteDesccription Method will contain the opposite end SDP The information of Answer Save up .

More about WebRTC Related documents can refer to [ Official website address ]webrtc.github.io/webrtc-org/architecture/

Project code

I don't want to post a large piece of code here , Interested children's shoes can refer to the source code [GitHub]github.com/lvming6816077/liveone To understand the , Here I simply explain the overall code logic .

  1. about Vue Some of the main functions related to video preview or response are realized CSS3 Animation .
  2. about Node.js The main implementation of the end is real-time information communication (socket.io Of room relevant API), It includes the communication of identifying the signaling information of the other party and some basic head picture nickname information of the user .
  3. Holistic WebRTC The logic of the protocol is embodied by installing the code described above .
Click to see more

版权声明
本文为[osc_ ydeb2o99]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201225111824262t.html

Scroll to Top