WebRTC对等视频不出现

如何解决WebRTC对等视频不出现

我正在尝试了解有关WebRTC的更多信息，并且我正在尝试测试这个小应用程序。对等方连接似乎正常，但对等方的视频未出现，我只能看到一个视频源。我的控制台中也没有记录任何错误。我已经在下面发布了我的代码。

谢谢！

server.js

from flask import Flask,render_template
from flask import redirect,url_for,session,request,g
from flask_sqlalchemy import SQLAlchemy
import wtforms
from flask_wtf import Form

# from flask_user import roles_required
from wtforms import validators

app = Flask(__name__)

app.config['SECRET_KEY'] = 'a8b84f7b63d64fb2a6e0161caabc4673'
app.config['SQLALCHEMY_DATABASE_URI'] ='sqlite:///samlple.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] =True

db = SQLAlchemy(app)


class RegistrationData(db.Model):
    id= db.Column(db.Integer,primary_key=True)
    Patient_Name = db.Column(db.String(80))
    Patient_Age = db.Column(db.Integer)
    email = db.Column(db.String(80))
    Doctor_Name= db.Column(db.String(80))
    PhoneNumber=db.Column(db.String(80))
    Equipment=db.Column(db.String(80))
    Deposit= db.Column(db.Integer)
    Disease= db.Column(db.String(80))
    Issue_Date= db.Column(db.String(80))
    Return_Date= db.Column(db.String(80))
    Address = db.Column (db.String (80))

    def __init__(self,Patient_Name,Patient_Age,email,Doctor_Name,PhoneNumber,Equipment,Deposit,Disease,Issue_Date,Return_Date,Address):
        self.Patient_Name = Patient_Name
        self.Patient_Age = Patient_Age
        self.email = email
        self.Doctor_Name = Doctor_Name
        self.PhoneNumber = PhoneNumber
        self.Equipment = Equipment
        self.Deposit = Deposit
        self.Disease = Disease
        self.Issue_Date = Issue_Date
        self.Return_Date = Return_Date
        self.Address = Address


class DeviceData (db.Model):
        id = db.Column (db.Integer,primary_key=True)
        DeviceName = db.Column (db.String (80))
        quantity = db.Column (db.Integer)
        Price = db.Column (db.String (80))
        Deposit = db.Column (db.String (80))
        Location = db.Column (db.String (80))
        description = db.Column (db.String (80))


@app.route('/')
def home():
    return render_template("index.html")

@app.route('/template/device')
def devices():
    return render_template("device.html")

@app.route('/templates/home')
def about():
    name= "Rugna Sahayata Kendra"
    return render_template("home.html",name=name)

@app.route('/templates/Registration')
def Registration():
    name= "Rugna Sahayata Kendra"
    return render_template("RegistrationForm.html",name=name)

@app.route('/templates/Add_Device')
def AddDevice():
    name= "Rugna Sahayata Kendra"
    return render_template("Add_Device.html",name=name)



@app.route ('/templates/table')
def AllocationList():
    con = sql.connect ("samlple.db")
    con.row_factory = sql.Row

    cur = con.cursor ()
    cur.execute ("select * from registration_data")

    rows = cur.fetchall ();
    return render_template ("table.html",rows=rows)


@app.route ('/templates/EquipmentList')
def EquipmentList():
    con = sql.connect ("samlple.db")
    con.row_factory = sql.Row

    cur = con.cursor ()
    cur.execute ("select * from device_data")

    rows = cur.fetchall ();
    return render_template ("EquipmentList.html",rows=rows)


@app.route("/home",methods=["GET","POST"])
def register():
    if request.method == "POST":
        P_Name = request.form.get('PatientName')
        P_AGE=request.form.get ('Age')
        P_Email=request.form.get ('email')
        D_Name=request.form.get ('DoctorName')
        Phone_No=request.form.get ('phoneNumber')
        equipment=request.form.get ('Equipment')
        deposit=request.form.get ('Deposit')
        disease=request.form.get('Disease')
        I_Date=request.form.get ('IssueDate')
        R_Date=request.form.get ('ReturnDate')
        address = request.form.get('Address')

        register = RegistrationData(Patient_Name=P_Name,Patient_Age=P_AGE,email=P_Email,Doctor_Name=D_Name,PhoneNumber=Phone_No,Equipment=equipment,Deposit=deposit,Disease=disease,Issue_Date=I_Date,Return_Date=R_Date,Address=address
                                    )
        db.session.add (register)
        db.session.commit()

    return render_template ("RegistrationForm.html")




@app.route("/home","POST"])
def AddDeviceDB():
    if request.method == "POST":
        D_Name = request.form.get('DeviceName')
        Quantity=request.form.get ('Quantity')
        Price=request.form.get ('Price')
        Deposit=request.form.get ('Deposit')
        Location=request.form.get ('Location')
        Description=request.form.get ('Description')

        deviceList = DeviceData(DeviceName=D_Name,quantity=Quantity,Price=Price,Deposit=Deposit,Location=Location,description=Description
                                    )
        db.session.add(deviceList)
        db.session.commit()

    return render_template ("EquipmentList.html")

if __name__=='__main__':

    app.run(debug=True)

script.js

const express = require('express')
const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(server)
const { v4: uuidV4 } = require('uuid')

app.set('view engine','ejs')
app.use(express.static('public'))

app.get('/',(req,res) => {
  res.redirect(`/${uuidV4()}`)
})

app.get('/:room',res) => {
  res.render('room',{ roomId: req.params.room })
})

io.on('connection',socket => {
  socket.on('join-room',(roomId,userId) => {
    socket.join(roomId)
    socket.to(roomId).broadcast.emit('user-connected',userId)
    socket.on('disconnect',() => {
      socket.to(roomId).broadcast.emit('user-disconnected',userId)
    })
  })
})

server.listen(3000)

room.ejs

const socket = io('/')
const videoGrid = document.getElementById('video-grid')
const myPeer = new Peer(undefined,{
  host: '/',port: '3001'
})
const myVideo = document.createElement('video')
myVideo.muted = true
const peers = {}
navigator.mediaDevices.getUserMedia({
  video: true,audio: true
}).then(stream => {
  addVideoStream(myVideo,stream)

  myPeer.on('call',call => {
    call.answer(stream)
    const video = document.createElement('video')
    call.on('stream',userVideoStream => {
      addVideoStream(video,userVideoStream)
    })
  })

  socket.on('user-connected',userId => {
    connectToNewUser(userId,stream)
    console.log(userId,'It Works!')
  })
})

socket.on('user-disconnected',userId => {
  if (peers[userId]) peers[userId].close()
})

myPeer.on('open',id => {
  socket.emit('join-room',ROOM_ID,id)
})

function connectToNewUser(userId,stream) {
  const call = myPeer.call(userId,stream)
  const video = document.createElement('video')
  call.on('stream',userVideoStream => {
    addVideoStream(video,userVideoStream)
  })
  call.on('close',() => {
    video.remove()
  })

  peers[userId] = call
}

function addVideoStream(video,stream) {
  video.srcObject = stream
  video.addEventListener('loadedmetadata',() => {
    video.play()
  })
  videoGrid.append(video)
}

我的package.json也可供参考！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script>
    const ROOM_ID = "<%= roomId %>"
  </script>
  <script defer src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
  <script src="/socket.io/socket.io.js" defer></script>
  <script src="script.js" defer></script>
  <title>Document</title>
  <style>
    #video-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill,300px);
      grid-auto-rows: 300px;
    }
    
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <div id="video-grid"></div>
</body>
</html>

WebRTC对等视频不出现

如何解决WebRTC对等视频不出现

相关推荐