We Keep Coding

WebRTC ontrack is never called for for video webcam streaming in svelte

I am trying to use WebRTC for creating a two-person video chat application. I am able to establish a connection and send messages between the two clients, but I am not able to stream the other client's video. I am using firebase to establish the connection, and that part seems to be working since I am able to send messages. What am I doing wrong?
index.svelte is
<script lang="ts">
import { db } from '$lib/firebase';
import { doc, setDoc, getDoc, updateDoc, deleteDoc, onSnapshot } from 'firebase/firestore';
const collectionName = 'conversations';
var server = '';
var pc: RTCPeerConnection | null = null;
var dc: RTCDataChannel | null = null;
var connected = false;
var finishedAddingRemoteDescription = false;
const iceConfig = {
iceServers: [
{
urls: ['stun:stun1.l.google.com:19302', 'stun:stun2.l.google.com:19302']
}
],
iceCandidatePoolSize: 10
};
const startHost = async () => {
if (server == '') {
console.log('Name cannot be empty');
return;
}
await deleteDoc(doc(db, collectionName, server));
pc = new RTCPeerConnection(iceConfig);
dc = pc.createDataChannel('channel');
dc.onmessage = (e) => console.log('Just got a message ' + e.data);
dc.onopen = (_) => (connected = true);
pc.ontrack = (e) => console.log('On track a!');
pc.onicecandidate = async (_) => {
try {
const docRef = await setDoc(doc(db, collectionName, server), {
offer: pc!.localDescription?.toJSON()
});
onSnapshot(doc(db, collectionName, server), (doc) => {
if (
doc.data() != undefined &&
'answer' in doc.data() &&
!finishedAddingRemoteDescription
) {
pc!.setRemoteDescription(doc.data().answer);
finishedAddingRemoteDescription = true;
}
});
} catch (e) {
console.error('Error adding document: ', e);
}
};
pc.createOffer()
.then((o) => pc!.setLocalDescription(o))
.then((_) => console.log('Set successfully'));
};
const startJoin = async () => {
const docRef = doc(db, collectionName, server);
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
pc = new RTCPeerConnection(iceConfig);
pc.onicecandidate = async (_) => {
try {
const docRef = await updateDoc(doc(db, collectionName, server), {
answer: pc!.localDescription?.toJSON()
});
} catch (e) {
console.error('Error adding document: ', e);
}
};
pc.ondatachannel = (e) => {
dc = e.channel;
dc.onmessage = (e) => console.log('new message from client: ' + e.data);
dc.onopen = (_) => (connected = true);
};
pc.ontrack = (e) => console.log('On track b!');
pc.setRemoteDescription(docSnap.data().offer).then((_) => console.log('offer set!'));
pc.createAnswer()
.then((a) => pc!.setLocalDescription(a))
.then((_) => console.log('answer crated'));
} else {
console.log('No such document!');
}
};
var message = '';
const sendMsg = () => {
console.log('Send msg: ' + message);
dc!.send(message);
};
var localVideo: HTMLVideoElement;
var remoteVideo: HTMLVideoElement;
var remoteStream: MediaProvider | null = null;
const startWebcam = async () => {
const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
remoteStream = new MediaStream();
localStream.getTracks().forEach((track) => {
pc!.addTrack(track, localStream);
});
pc!.ontrack = (event) => {
console.log('Handling on track'); // never called
event.streams[0].getTracks().forEach((track) => {
console.log('GOT A TRACK!!!'); // never called
remoteStream!.addTrack(track);
});
};
localVideo.srcObject = localStream;
remoteVideo.srcObject = remoteStream;
};
</script>
<div class="m-5">
<input type="text" bind:value={server} placeholder="server" class="rounded-xl p-3 block" />
<button on:click={startHost} class="text-blue-500 block">host</button>
<button on:click={startJoin} class="text-blue-500 block">join</button>
<p>{connected ? 'Connected' : 'Not connected'}</p>
<div>
<input type="text" placeholder="message" bind:value={message} class="rounded-xl p-3 block" />
<button class="text-blue-500 disabled:text-blue-300" disabled={!connected} on:click={sendMsg}
>send</button
>
</div>
<div class="flex w-full space-x-5 {connected || 'opacity-50'}">
<div class="flex-1 text-center">
<h3>Yours</h3>
<video
class="bg-black aspect-video w-full"
bind:this={localVideo}
autoplay
playsinline
muted
/>
<button class="text-blue-500" disabled={!connected} on:click={startWebcam}>Start video</button
>
</div>
<div class="flex-1">
<h3 class="text-center">Others</h3>
<video
class="bg-black aspect-video w-full"
bind:this={remoteVideo}
autoplay
playsinline
muted
/>
</div>
</div>
</div>
The lib/firebase.ts code is:
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
const firebaseConfig = {
...
};
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

Raspberry PI WebRTC Video Stream via USB Camera on Chromium freezing & blacking out

I have a Raspberry Pi running a Node express server with webRTC. The Raspberry Pi is connected to a web cam. I'm able to view the index.html page and see the video stream, but then it randomly freezes or black out completely. I've tried researching the issue but most solutions refer to changing settings on components that are not part of what I'm using. Help is sincerely appreciated as I've been banging my head for the past few days.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Stream</title>
<meta charset="UTF-8" />
<link href="/styles.css" rel="stylesheet" />
</head>
<body>
<video playsinline autoplay muted></video>
<button id="enable-audio">Enable audio</button>
<script src="/socket.io/socket.io.js"></script>
<script src="/watch.js"></script>
</body>
</html>
broadcast.js
// wip 21 January 2022
const peerConnections = {};
const config = {
iceServers: [
{
"urls": "stun:stun.l.google.com:19302",
},
// {
// "urls": "turn:TURN_IP?transport=tcp",
// "username": "TURN_USERNAME",
// "credential": "TURN_CREDENTIALS"
// }
]
};
const socket = io.connect(window.location.origin);
socket.on("answer", (id, description) => {
peerConnections[id].setRemoteDescription(description);
});
socket.on("watcher", id => {
const peerConnection = new RTCPeerConnection(config);
peerConnections[id] = peerConnection;
let stream = videoElement.srcObject;
stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
peerConnection.onicecandidate = event => {
if (event.candidate) {
socket.emit("candidate", id, event.candidate);
}
};
peerConnection
.createOffer()
.then(sdp => peerConnection.setLocalDescription(sdp))
.then(() => {
socket.emit("offer", id, peerConnection.localDescription);
});
});
socket.on("candidate", (id, candidate) => {
peerConnections[id].addIceCandidate(new RTCIceCandidate(candidate));
});
socket.on("disconnectPeer", id => {
peerConnections[id].close();
delete peerConnections[id];
});
window.onunload = window.onbeforeunload = () => {
socket.close();
};
// Get camera and microphone
const videoElement = document.querySelector("video");
const audioSelect = document.querySelector("select#audioSource");
const videoSelect = document.querySelector("select#videoSource");
audioSelect.onchange = getStream;
videoSelect.onchange = getStream;
getStream()
.then(getDevices)
.then(gotDevices);
function getDevices() {
return navigator.mediaDevices.enumerateDevices();
}
function gotDevices(deviceInfos) {
window.deviceInfos = deviceInfos;
for (const deviceInfo of deviceInfos) {
const option = document.createElement("option");
option.value = deviceInfo.deviceId;
if (deviceInfo.kind === "audioinput") {
option.text = deviceInfo.label || `Microphone ${audioSelect.length + 1}`;
audioSelect.appendChild(option);
} else if (deviceInfo.kind === "videoinput") {
option.text = deviceInfo.label || `Camera ${videoSelect.length + 1}`;
videoSelect.appendChild(option);
}
}
}
function getStream() {
if (window.stream) {
window.stream.getTracks().forEach(track => {
track.stop();
});
}
const audioSource = audioSelect.value;
const videoSource = videoSelect.value;
const constraints = {
audio: { deviceId: audioSource ? { exact: audioSource } : undefined },
video: { deviceId: videoSource ? { exact: videoSource } : undefined }
};
return navigator.mediaDevices
.getUserMedia(constraints)
.then(gotStream)
.catch(handleError);
}
function gotStream(stream) {
window.stream = stream;
audioSelect.selectedIndex = [...audioSelect.options].findIndex(
option => option.text === stream.getAudioTracks()[0].label
);
videoSelect.selectedIndex = [...videoSelect.options].findIndex(
option => option.text === stream.getVideoTracks()[0].label
);
videoElement.srcObject = stream;
socket.emit("broadcaster");
}
function handleError(error) {
console.error("Error: ", error);
}
watch.js
let peerConnection;
const config = {
iceServers: [
{
"urls": "stun:stun.l.google.com:19302",
},
// {
// "urls": "turn:TURN_IP?transport=tcp",
// "username": "TURN_USERNAME",
// "credential": "TURN_CREDENTIALS"
// }
]
};
const socket = io.connect(window.location.origin);
const video = document.querySelector("video");
const enableAudioButton = document.querySelector("#enable-audio");
enableAudioButton.addEventListener("click", enableAudio)
socket.on("offer", (id, description) => {
peerConnection = new RTCPeerConnection(config);
peerConnection
.setRemoteDescription(description)
.then(() => peerConnection.createAnswer())
.then(sdp => peerConnection.setLocalDescription(sdp))
.then(() => {
socket.emit("answer", id, peerConnection.localDescription);
});
peerConnection.ontrack = event => {
video.srcObject = event.streams[0];
};
peerConnection.onicecandidate = event => {
if (event.candidate) {
socket.emit("candidate", id, event.candidate);
}
};
});
socket.on("candidate", (id, candidate) => {
peerConnection
.addIceCandidate(new RTCIceCandidate(candidate))
.catch(e => console.error(e));
});
socket.on("connect", () => {
socket.emit("watcher");
});
socket.on("broadcaster", () => {
socket.emit("watcher");
});
window.onunload = window.onbeforeunload = () => {
socket.close();
peerConnection.close();
};
function enableAudio() {
console.log("Enabling audio")
video.muted = false;
}

Using Html and Javascript in Flutter

I am using peerJS for screen sharing feature and flutter for web app, I'm able to call javascript functions in flutter but not able to pass values from Javascript and Flutter and make them listen in flutter.
this is my script.js:
const PRE = "Devcom"
const SUF = "Community"
var room_id;
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var local_stream;
var screenStream;
var peer = null;
var currentPeer = null
var screenSharing = false
function createRoom() {
console.log("Creating Room")
let room = document.getElementById("room-input").value;
if (room == " " || room == "") {
alert("Please enter room number")
return;
}
room_id = PRE + room + SUF;
peer = new Peer(room_id)
peer.on('open', (id) => {
console.log("Peer Connected with ID: ", id)
hideModal()
getUserMedia({ video: true, audio: true }, (stream) => {
local_stream = stream;
setLocalStream(local_stream)
}, (err) => {
console.log(err)
})
notify("Waiting for peer to join.")
})
peer.on('call', (call) => {
call.answer(local_stream);
call.on('stream', (stream) => {
setRemoteStream(stream)
})
currentPeer = call;
})
}
function setLocalStream(stream) {
let video = document.getElementById("local-video");
video.srcObject = stream;
video.muted = true;
video.play();
}
function setRemoteStream(stream) {
let video = document.getElementById("remote-video");
video.srcObject = stream;
video.play();
}
function hideModal() {
document.getElementById("entry-modal").hidden = true
}
function notify(msg) {
let notification = document.getElementById("notification")
notification.innerHTML = msg
notification.hidden = false
setTimeout(() => {
notification.hidden = true;
}, 3000)
}
function joinRoom() {
console.log("Joining Room")
let room = document.getElementById("room-input").value;
if (room == " " || room == "") {
alert("Please enter room number")
return;
}
room_id = PRE + room + SUF;
hideModal()
peer = new Peer()
peer.on('open', (id) => {
console.log("Connected with Id: " + id)
getUserMedia({ video: true, audio: true }, (stream) => {
local_stream = stream;
setLocalStream(local_stream)
notify("Joining peer")
let call = peer.call(room_id, stream)
call.on('stream', (stream) => {
setRemoteStream(stream);
})
currentPeer = call;
}, (err) => {
console.log(err)
})
})
}
function startScreenShare() {
if (screenSharing) {
stopScreenSharing()
}
navigator.mediaDevices.getDisplayMedia({ video: true }).then((stream) => {
screenStream = stream;
let videoTrack = screenStream.getVideoTracks()[0];
videoTrack.onended = () => {
stopScreenSharing()
}
if (peer) {
let sender = currentPeer.peerConnection.getSenders().find(function (s) {
return s.track.kind == videoTrack.kind;
})
sender.replaceTrack(videoTrack)
screenSharing = true
}
console.log(screenStream)
})
}
function stopScreenSharing() {
if (!screenSharing) return;
let videoTrack = local_stream.getVideoTracks()[0];
if (peer) {
let sender = currentPeer.peerConnection.getSenders().find(function (s) {
return s.track.kind == videoTrack.kind;
})
sender.replaceTrack(videoTrack)
}
screenStream.getTracks().forEach(function (track) {
track.stop();
});
screenSharing = false
}
function alertMessage(text) {
alert(text)
}
window.logger = (flutter_value) => {
console.log({ js_context: this, flutter_value });
}
window.state = {
hello: 'world'
}
I am able to call these javascript functions in my flutter app using:
import 'dart:js' as js;
js.context.callMethod('alertMessage', ['Flutter is calling upon JavaScript!']);
I have webRTC.html file below which works fine with my js file attached above:
<html>
<head>
<title>DEVCOM - Rooms</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1 class="title">Devcom</h1>
<p id="notification" hidden></p>
<div class="entry-modal" id="entry-modal">
<p>Create or Join Meeting</p>
<input id="room-input" class="room-input" placeholder="Enter Room ID">
<div>
<button onclick="createRoom()">Create Room</button>
<button onclick="joinRoom()">Join Room</button>
</div>
</div>
<div class="meet-area">
<!-- Remote Video Element-->
<video id="remote-video"></video>
<!-- Local Video Element-->
<video id="local-video"></video>
<div class="meet-controls-bar">
<button onclick="startScreenShare()">Screen Share</button>
</div>
</div>
</body>
<script src="https://unpkg.com/peerjs#1.3.1/dist/peerjs.min.js"></script>
<script src="script.js"></script>
</html>
but the problem which I am facing is how can I make a flutter widget listen to javascript like instead of using document.getElementById("room-input").value I want to make javascript listen to flutter widgets and variables rather than html id, values...
or Is there any other way which can make html rendering in flutter web I tried webview_flutter, easy_web_view, flutter_html but nothing worked for me as I want to use it in windows chrome (web) few of earlier mentioned plugins are rather legacy and other are only for android and ios

how to correctly use getDisplayMedia on peer js?

hello recently I've been creating a video system called that is working super well here the code I'm using: Html
<html>
<head>
<title>Delta Meet</title>
</head>
<body>
<h1 class="title">Delta Meet</h1>
<p id="notification" hidden></p>
<div class="entry-modal" id="entry-modal">
<p>Create or Join Meeting</p>
<input id="room-input" class="room-input" placeholder="Enter Room ID">
<div>
<button onclick="createRoom()">Create Room</button>
<button onclick="joinRoom()">Join Room</button>
</div>
</div>
<div class="meet-area">
<!-- Remote Video Element-->
<video id="remote-video"></video>
<!-- Local Video Element-->
<video id="local-video"></video>
</div>
<br><br><br>
</body>
<script src="https://unpkg.com/peerjs#1.3.1/dist/peerjs.min.js"></script>
<script src="script.js"></script>
</html>
and here the js:
const PRE = "DELTA"
const SUF = "MEET"
var room_id;
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var local_stream;
function createRoom(){
console.log("Creating Room")
let room = document.getElementById("room-input").value;
if(room == " " || room == "") {
alert("Please enter room number")
return;
}
room_id = PRE+room+SUF;
let peer = new Peer(room_id)
peer.on('open', (id)=>{
console.log("Peer Connected with ID: ", id)
hideModal()
getUserMedia({video: true, audio: true}, (stream)=>{
local_stream = stream;
setLocalStream(local_stream)
},(err)=>{
console.log(err)
})
notify("Waiting for peer to join.")
})
peer.on('call',(call)=>{
call.answer(local_stream);
call.on('stream',(stream)=>{
setRemoteStream(stream)
})
})
}
function setLocalStream(stream){
let video = document.getElementById("local-video");
video.srcObject = stream;
video.muted = true;
video.play();
}
function setRemoteStream(stream){
let video = document.getElementById("remote-video");
video.srcObject = stream;
video.play();
}
function hideModal(){
document.getElementById("entry-modal").hidden = true
}
function notify(msg){
let notification = document.getElementById("notification")
notification.innerHTML = msg
notification.hidden = false
setTimeout(()=>{
notification.hidden = true;
}, 3000)
}
function joinRoom(){
console.log("Joining Room")
let room = document.getElementById("room-input").value;
if(room == " " || room == "") {
alert("Please enter room number")
return;
}
room_id = PRE+room+SUF;
hideModal()
let peer = new Peer()
peer.on('open', (id)=>{
console.log("Connected with Id: "+id)
getUserMedia({video: true, audio: true}, (stream)=>{
local_stream = stream;
setLocalStream(local_stream)
notify("Joining peer")
let call = peer.call(room_id, stream)
call.on('stream', (stream)=>{
setRemoteStream(stream);
})
}, (err)=>{
console.log(err)
})
})
}
so far so good, so I decided to create a button for the user to be able to share the screen:
<button id="start">Start Capture</button> <button id="stop">Stop Capture</button>
then I went there and created a script:
async function startCapture() {
try {
videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
dumpOptionsInfo();
} catch(err) {
console.error("Error: " + err);
}
}
function stopCapture(evt) {
let tracks = videoElem.srcObject.getTracks();
tracks.forEach(track => track.stop());
videoElem.srcObject = null;
}
function dumpOptionsInfo() {
const videoTrack = videoElem.srcObject.getVideoTracks()[0];
console.info("Track settings:");
console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
console.info("Track constraints:");
console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
}const videoElem = document.getElementById("local-video");
const logElem = document.getElementById("log");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");
// Options for getDisplayMedia()
var displayMediaOptions = {
video: {
cursor: "always"
},
audio: false
};
// Set event listeners for the start and stop buttons
startElem.addEventListener("click", function(evt) {
startCapture();
}, false);
stopElem.addEventListener("click", function(evt) {
stopCapture();
}, false);
it works just right for me because for the other user it doesn't appear at all. What did I do wrong?

error in data when i connect a weather api

This is my first app doing it with node.js and express. This is a basic app where I connect to an external API to show temperature and take a user input "zipcode and feeling" and show it to the UI. I can't get the data.
I ran the app and entered data in the zipcode and feeling text area, What am I doing wrong?
the server.js
// Setup empty JS object to act as endpoint for all routes
projectData = {};
const port = 3000
// Require Express to run server and routes
const express = require("express")
const bodyParser = require("body-parser")
const cors = require("cors")
// Start up an instance of app
const app = express();
/* Middleware*/
//Here we are configuring express to use body-parser as middle-ware.
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// Cors for cross origin allowance
app.use(cors())
// Initialize the main project folder
app.use(express.static('website'));
app.get('/getWeather',(req,res) => {
res.send(projectData)
})
app.post('/addWeather',(req,res) => {
newEntry = {
data:req.body.data,
temp: req.body.temp,
content: req.body.content
}
projectData = newEntry;
})
// Setup Server
app.listen(port, () => {
console.log(`Your server is running on port ${port}`);
})
website/app.js
/* Global Variables */
//const { request } = require("express");
// Create a new date instance dynamically with JS
let d = new Date();
let newDate = (d.getMonth()+1) +'.'+ d.getDate()+'.'+ d.getFullYear();
//let zipcode = document.querySelector("#zip").value;
const APIkey = "2f12ba4132bf221863be475a1a6b34f6";
//let fullURL=`https://api.openweathermap.org/data/2.5/weather?zip=${zipcode}&appid=${APIkey}$units=metric`
const button1 = document.querySelector("#generate")
button1.addEventListener("click", getDataOfWeather)
function getDataOfWeather(){
const feeling = document.querySelector("#feelings").value;
const zipcode = document.querySelector("#zip").value;
getTemp(zipcode)
.then(function(temp){
/* console.log(temp);
addData('/addWeather',{ data: newDate , temp: temp, content: feeling});*/
addData(temp,feeling)
})
.then(
updateUI()
)
}
const getTemp = async(zipcode) => {
try {
if(!zipcode){
alert("you didnot enter zip code");
}
const fullURL=`https://api.openweathermap.org/data/2.5/weather?zip=${zipcode}&appid=${APIkey}&units=metric`
const res = await fetch(fullURL)
if(res.status === 200){
const data = await res.json();
console.log(data.main.temp);
return data.main.temp;
}
else if(res.status === 404){
alert("error in ZIP code ");
return false;}
/* const data = await res.json();
return data;*/
}
catch (err)
{
console.log(err);
}
}
const addData = async(temp,fell) => {
console.log(fell);
const response = await fetch("/addWeather",{
method: "POST",
credentials: "same-origin",
body:{
data : newDate,
temp:temp,
content: fell,
}
})
try {
const nData = await response.json();
return nData;
}
catch(err)
{
console.log(err);
}
}
/*const addData = async(url = '', data = {})=> {
const response = await fetch (url , {
method: 'POST',
credentials: 'same-origin',
headers: {
'content-Type': 'application/json',
},
body: JSON.stringify(data),
})
try {
const nData = await response.json();
return nData;
}
catch(err)
{
console.log(err);
}
}*/
const updateUI = async() => {
const request = await fetch('/getWeather');
try {
const allOfData = await request.json();
console.log(allOfData);
document.getElementById('data').innerHTML = allOfData.newDate;
document.getElementById('temp').innerHTML = allOfData.temp;
document.getElementById('content').innerHTML = allOfData.content;
}
catch (err)
{
console.log("error",err);
}
}
website/index.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Weather Journal</title>
<link href="https://fonts.googleapis.com/css?family=Oswald:400,600,700|Ranga:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id = "app">
<div class ="holder headline">
Weather Journal App
</div>
<div class ="holder zip">
<label for="zip">Enter Zipcode here</label>
<input type="text" id="zip" placeholder="enter zip code here">
</div>
<div class ="holder feel">
<label for="feelings">How are you feeling today?</label>
<textarea class= "myInput" id="feelings" placeholder="Enter your feelings here" rows="3" cols="30"></textarea>
<button id="generate" type = "submit"> Generate </button>
</div>
<div class ="holder entry">
<div class = "title">Most Recent Entry</div>
<div id = "entryHolder">
<div id = "date"></div>
<div id = "temp"></div>
<div id = "content"></div>
</div>
</div>
</div>
<script src="app.js" type="text/javascript"></script>
</body>
</html>

Your Id is date not data in update UI function in app.js
const updateUI = async() => {
const request = await fetch('/getWeather');
try {
const allOfData = await request.json();
console.log(allOfData);
document.getElementById('date').innerHTML = allOfData.newDate; // change data to date
document.getElementById('temp').innerHTML = allOfData.temp;
document.getElementById('content').innerHTML = allOfData.content;
}
catch (err)
{
console.log("error",err);
}
}