A demo that uses webRTC for one-to-one or one-to-many video calls and can take photos and upload screenshots of playing video streams

Click to see the specific webRTC API

The final result is shown as follows:

1. This demo meets the following requirements:

1. The PC side can obtain the rear camera of the remote APP operator and make real-time calls. In addition, the PC side can capture the pictures of the rear camera of the APP through remote video stream. (APP end — >PC end) 2. Video call between app end unloading personnel and site responsible person. (App end — > App end)

Two, need to pay attention to (pit)

Socket. IO -client (socket. IO -client) (socket. IO -client) (socket. Later, it was changed to the version above 2.*.

2. After the completion of business requirements, not only peerConnection should be closed, but also local and remote video streams should be closed; But by the navigator. MediaDevices. GetUserMedia to obtain video streaming, need to stop media stream according to the following ways:

const tracks = localStream.getTracks().concat(remoteStream.getTracks())
tracks.forEach((track) = > {
track.stop()
})
Copy the code

3. Disconnect event of socket cannot be monitored; It turned out to be a different room number

The nodeJs configuration is as follows

'use strict'
let http = require('http');
let express = require('express');
let serveIndex = require('serve-index');
let app = express();
app.use(serveIndex('./dist'));
app.use(express.static('./dist'));
let http_server = http.createServer(app);
http_server.listen(3003);
let io = require('socket.io')(http_server, {
  path: '/rtcket'
});
http_server.on('listening', onListening);
function onListening () {
  let addr = http_server.address();
  let bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  console.log('Listening on ' + bind);
}
let clients = []
io.on('connection'.function (socket) {
  let query = socket.handshake.query
  let username = query.username
  let room = query.room
  console.log(username + 'Connected')
  if (clients.some(v= > v.userId === socket.id)) {
    return
  }
  socket.join(room)
  clients.push({ userId: socket.id, username })
  // Filter the same user name
  if (clients.length > 1) {
    let hash = {}
    clients = clients.reduce((item, next) = > {
      hash[next.username] ? ' '
        : hash[next.username] = true && item.push(next)
      return item
    }, [])
    console.log('the end', clients)
  }
  if (clients.length >= 2) {
    io.sockets.in(room).emit('ready')
  }
  socket.emit('joined')
  socket.broadcast.to(room).emit('join', { username })
  io.sockets.in(room).emit('clients', clients)
  // Received a message about peer connection creation
  socket.on('pc message'.function (data) {
    socket.to(data.to.userId).emit('pc message', data)
    console.log('PC message received message for peer connection creation')})// Send a private message to initiate a video interaction request
  socket.on('interact'.function (data) {
    socket.to(data.to.userId).emit('interact', data)
    console.log("Interact initiates a request for video interaction")})// The other party agrees to video interaction
  socket.on('agree interact'.function (data) {
    socket.to(data.from.userId).emit('agree interact', data)
    console.log('Agree interact')})// The other party refuses video interaction
  socket.on('refuse interact'.function (data) {
    socket.to(data.from.userId).emit('refuse interact', data)
    console.log('Refuse requests for video interaction')})// End the video
  socket.on('stop interact'.function (data) {
    socket.to(data.to.userId).emit('stop interact', data)
    console.log('Stop video interaction')
  })
  socket.on('leave'.function () {
    socket.emit('left')
    socket.broadcast.to(room).emit('leave', { userId: socket.id, username })
    clients = clients.filter(v= >v.userId ! == socket.id) io.sockets.in(room).emit('clients', clients)
  })
  socket.on('disconnect'.function () {
    console.log(username + 'Disconnected')
    const obj = clients.filter(v= > v.userId === socket.id)
    socket.broadcast.to(room).emit('close_disconnect', obj)
    console.log(room + 'close_disconnect', obj)
    clients = clients.filter(v= >v.userId ! == socket.id) io.sockets.in(room).emit('clients', clients)
    console.log(username + 'Finally disconnected.')})})Copy the code

4. Specific Demo code

Because the cause of the recent network, can’t upload on making, only later to catch up on Temporary network backup way links: pan.baidu.com/s/1sn3vcdic… Extraction code: 48BW

Five,Item code cloud address

Vi. Start the project as follows

NPM run serve NPM run node http://localhost:8888/ open multiple at the same time can achieve one-to-one chat or one-to-many chatCopy the code

7. How to interact and chat on the page as shown below

On the other page it will look like this (select Accept)

Item code cloud address

The last

Base component documents are repackaged based on ElementUi