Hello, me again i still couldn’t resolve the issue
transport id: eedbf051-b2a7-4840-95cc-bf41879fe7be
is transport closed :false
transport direction : undefined
transport connection state : undefined
this the transport from the server side
transport id: eedbf051-b2a7-4840-95cc-bf41879fe7be
is transport closed :false
transport direction : send
transport connection state : new
this from the client side
I saw the what you recommended me, but it gets complicated for me, can you please give a simple example on how to send and receive video and audio from server and to server
to show my implementation
on client side
const mediasoup = require('mediasoup-client');
import transport from 'mediasoup-client/lib/Transport'
const socket = io();
let btn_sub; //publish button
let btn_cam; //camera
let btn_screen; //publish the screen
let text_publish; //notify the user what is going on
let text_webcam;
let text_screen;
let text_subscribe;
let JSON_msg;
let local_video;
let remote_video;
let remote_stream;
let device;
let producer;
let consumer_transport;
let user_id;
let isWebcam;
let producer_callback, produceErrback;
let consumer_callback, consumerErrback;
document.addEventListener("DOMContentLoaded", function(){
btn_cam = document.getElementById('btn_webcam')
btn_screen = document.getElementById('btn_screen')
btn_sub = document.getElementById('btn_subscribe')
text_webcam = document.getElementById('webcam_status')
text_screen = document.getElementById('screen_status')
text_subscribe = document.getElementById('subscribe_status')
local_video = document.getElementById('localVideo')
remote_video = document.getElementById('remoteVideo')
//button event listener
btn_cam.addEventListener("click", publish);
btn_screen.addEventListener("click", publish);
btn_sub.addEventListener("click", console.log('subscribe button clicked'));
JSON_msg = document.getElementById('JSON')
alert('document loaded')
});
// Join chatroom
socket.on('connect', ()=> {
const msg = {
type: "getRouterRTPCapabilities"
}
const resp = JSON.stringify(msg)
socket.send(resp)
})
socket.on('message',(message) => {
const json_validate = isJsonString(message)
const event = JSON.parse(message)
alert(`event: ${event.type}`)
switch(event.type){
case 'routerCapabilities':
onRouterRTPCapabilities(event)
break;
case 'producerTransportCreated':
oncreateProducerTransport(event)
break;
default:
break;
}
});
//start of oncreateProducerTransport
const oncreateProducerTransport = async (event)=>{
if(event.error){
console.error('producer transport create error', event.error)
return
}
const transport = await device.createSendTransport(event.data)
JSON_msg.innerHTML = `<pre>
transport id: ${transport.id}
is transport closed :${transport.closed}
transport direction : ${transport.direction}
transport connection state : ${transport.connectionState}
</pre>`
transport.on("connect", async ({ dtlsParameters }, callback, errback) =>{
const message = {
type: 'connectProducerTransport',
dtlsParameters
}
const resp = JSON.stringify(message)
socket.send(resp)
socket.addEventListener('message', (event) =>{
if (!json_validate){
console.error('json error')
return
}
const resp = JSON.parse(event.data)
if (resp.type === 'producerConnected'){
console.log('got a producer connected')
callback();
}
})
});
}//end of oncreateProducerTransport
// start of onRouterRTPCapabilities
const onRouterRTPCapabilities = (event) =>{
loadDevice(event.data)
btn_cam.disabled = false
btn_screen.disabled = false
}//end of onRouterRTPCapabilities
//start of publish
const publish = (event) => {
isWebcam = (event.target.id === 'btn_webcam')//the button id
text_publish = isWebcam ? text_webcam : text_screen
//both cam and publish screen buttons need to be disabled inorder not to publish again while publshing is on progress
btn_cam.disabled = true
btn_screen.disabled = true
const message = {
type: 'createProducerTransport',
forceTcp: false,
RtpCapabilities: device.RtpCapabilities
}
const resp = JSON.stringify(message)
socket.send(resp)
}//end of publish
//start of isJsonString
const isJsonString = (str)=>{
try{
JSON.parse(str)
}
catch(error){
return false;
}
return true;
}//end of isJsonString
//start of loadDevice
const loadDevice = async (routerRTPCapabilities) =>{
var caps
try{
device = new mediasoup.Device();
console.log('load devices')
var caps = {routerRtpCapabilities: routerRTPCapabilities};
}
catch(error){
if (error.name === 'UnsupportedError'){
console.log('browser is not supported')
}
}
await device.load(caps)
}//end of loadDevice
//start of getUserMedia
const getUserMedia = (transport, iswebcam) =>{
if (!device.canProduce('video')){
console.error('cannot produce video')
return
}
let stream;
try{
stream = iswebcam ?
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}) :
navigator.mediaDevices.getDisplayMedia({
video: true
})
}
catch(error){
console.log (error)
throw error
}
}//end of getUserMedia
for server side
i create transport as follows
const Router = require('mediasoup/lib/Router')
var configure = require("../config/config");
const create_WebRTC_Transport = async(mediasoupRouter) => {
//distracting the maxIncomeBitrate, initalAvailabilityOutgoingBitrate for WebRTC Transport
const {
maxIncomeBitrate,
initialAvailableOutgoingBitrate
} = configure.config.mediasoup.webRtcTransport
const transport = await mediasoupRouter.createWebRtcTransport({
listenIps: configure.config.mediasoup.webRtcTransport.listenIps, //the webrtc transport listens to this ip
enableUdp: true,
enableTcp: true,
preferUdp: true,
initialAvailableOutgoingBitrate
});
if (maxIncomeBitrate){
try{
await transport.setMaxIncomingBitrate(maxIncomeBitrate)
}
catch(error){
console.log(error)
}
}
const mediaCodecs = configure.config.mediasoup.router.mediaCodecs;
return{
transport,
params:{
id: transport.id,
iceParameters: transport.iceParameters,
iceCandidates: transport.iceCandidates,
dtlsParameters: transport.dtlsParameters,
dtlsCandidate: transport.dtlsCandidates
}
}
}
module.exports = { create_WebRTC_Transport }
and my socket.io file
const { Server } = require('socket.io');
const message_format = require('../utils/messages'); // /utils/messages
const {join_user, get_current_user, user_leave_chat, get_room_users} = require('../utils/users');
const worker = require('../lib/workers');
const Router = require('mediasoup/lib/Router');
const Producer = require('mediasoup/lib/Producer');
const WebRtcTransport = require('mediasoup/lib/WebRtcTransport');
var WebRTC_Transport = require("../lib/create_WebRTC_Transport");
const websocket = require('socket.io');
var configure = require("../config/config");
const { ISO_8601 } = require('moment');
var mediasoupRouter;
var producerTransport;
var dtlsParameters;
var transport;
var producer;
const botName = 'RCNDC Colab Bot';
const createSocketConnection = async (io) => {
try{
mediasoupRouter = await worker.createWorker();
}
catch(error){
throw error
}
io.on('connection', (socket)=>{
socket.on('message', (message)=>{
const json_validate = isJsonString(message)
console.log(`Router id is:${mediasoupRouter.id}`)
console.log(`a user has connected: user_id ${socket.id}`);
if (!json_validate){
console.error('json error')
return
}
const event = JSON.parse(message)
console.log(`event type: ${event.type}`)
switch(event.type){
case 'getRouterRTPCapabilities':
onRouterRTPCapabilities(event)
break;
case 'createProducerTransport':
oncreateProducerTransport(event)
break;
case 'connectProducerTransport':
onconnectProducerTransport(event)
break;
case 'produce':
onProduce(event, ws, websocket)
break;
default:
break;
}
})
//start of onconnectProducerTransport
const onconnectProducerTransport = async (event) => {
producerTransport.connect({dtlsParameters: event.dtlsParameters})
send("producerConnected", 'producer connected')
}//end of onconnectProducerTransport
//start of oncreateProducerTransport
const oncreateProducerTransport = async (event) =>{
try{
const { transport, params } = await WebRTC_Transport.create_WebRTC_Transport(mediasoupRouter)
dtlsParameters = params.dtlsParameters
send("producerTransportCreated", params)
console.log(`
transport id: ${transport.id}
is transport closed :${transport.closed}
transport direction : ${transport.direction}
transport connection state : ${transport.connectionState}
`
)
}
catch(error){
console.log(error);
send("error", error);
}
}//end of oncreateProducerTransport
//start of onRouterRTPCapabilities
const onRouterRTPCapabilities = (event) =>{
send("routerCapabilities", mediasoupRouter.rtpCapabilities)
}//end of onRouterRTPCapabilities
//start of send
const send = (type, inc_data) => {
const message = {
type,
data: inc_data
}
const resp = JSON.stringify(message)
socket.emit('message',resp)
}// end of send
})//socket io listening at connection event (loop)
//
}//end of createSocketConnection
module.exports = {createSocketConnection}
//user defined functions
//
const isJsonString = (str)=>{
try{
JSON.parse(str)
}
catch(error){
return false;
}
return true;
}//
this how I am trying to implement the mediasoup as SFU