WebRTC

client-package.json

{
  "name": "video-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "global": "^4.3.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "socket.io": "^2.0.3",
    "socket.io-p2p": "^2.2.0",
    "yo-yo": "^1.4.1"
  },
  "proxy": "https://localhost:3001/",
  "devDependencies": {
    "react-scripts": "1.0.13"
  },
  "scripts": {
    "start": "HTTPS=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

client-src-index.js

const io = require('socket.io-client')
const P2P = require('socket.io-p2p')
const yo = require('yo-yo')

// Helpers
const getStreamUrl = window.URL.createObjectURL

const video = () => yo`<video />`
const button = (text) => yo`<button>${text}</button>`

const startVideo = (videoEl, src) => {
  videoEl.src = src
  videoEl.play()
}

// Create DOM elements
const localVideo = video()
const startBtn = button('start stream')

// Handlers
const handleError = (err) => {
  console.error('Unable to get media', err)
}

const addPeerVideo = (stream) => {
  const src = getStreamUrl(stream)
  const videoEl = video()
  document.body.appendChild(videoEl)
  startVideo(videoEl, src)
}

const handleP2PStartStream = (p2p) => () => {
  p2p.usePeerConnection = true
}

const handleMediaStream = (stream) => {
  startVideo(localVideo, getStreamUrl(stream))

  // Initiate P2P!
  const socket = io()

  const p2p = new P2P(socket, {
    peerOpts: { stream }
  })

  // Handle P2P events
  p2p.on('stream', addPeerVideo)
  p2p.on('start-stream', handleP2PStartStream(p2p))
}

// Add DOM elements
document.body.appendChild(localVideo)
document.body.appendChild(startBtn)

// Start streaming when start button is clicked
startBtn.addEventListener('click', (event) => {
  startBtn.setAttribute('disabled', true)

  window.navigator.getUserMedia(
    { video: true },
    handleMediaStream,
    handleError
  )
})

server-.env

PORT=3001

server-package.json

{
  "name": "video-server",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "start": "nodemon src/index"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^4.0.0",
    "mime-types": "^2.1.17",
    "socket.io": "^2.0.3",
    "socket.io-p2p-server": "^1.2.0"
  },
  "devDependencies": {
    "nodemon": "^1.12.0"
  }
}

server-src-app.js

// https://deliciousbrains.com/https-locally-without-browser-privacy-errors/

const path = require('path')
const fs = require('fs')
const server = require('https').createServer({
  key: fs.readFileSync(path.resolve(__dirname, '../dev.videochat.com.key')),
  cert: fs.readFileSync(path.resolve(__dirname, '../dev.videochat.com.crt'))
})
const io = require('socket.io')(server)
const p2p = require('socket.io-p2p-server').Server

const PORT = process.env.PORT || 8080

// p2p is a middleware which will keep
// track on connected peers and handle WebRTC
// offers
io.use(p2p)

io.on('connection', (client) => {
  client.on('start-stream', (stream) => {
    client.broadcast.emit('stream', stream)
  })
})

server.listen(PORT, (err) => {
  if (err) return console.error(err)
  console.log(`Listening on localhost:${PORT}`)
})

server-src-index.js

require('dotenv').config()
require('./app')