Chrome Subscription fails - "Cannot access 'stream' before initialization" about mediasoup-sample-app

[mkhahani]

Of course. Here's the latest version of my app-bundle. I hope it help.

https://gist.githubusercontent.com/mkhahani/21e856c7f92237382d4cf2ce3fe5af87/raw/b0d3a3a8e731a4fe7f3148f06e4c27961bfcd640/app-bundle.js

[mkhahani]

What is your Chrome version? Do you publish and subscribe in the same page?

[morxw]

Thanks for your quick reply! It's Chrome Version 79(.0.3945.130)
But also tested on other machines with different versions they all throw the same error.
Yes i tried both, publishing and subscribing at the same page but also setting ob a stream on firefox and trying to subscribe on chrome, nothing worked (On Chrome).
The big Mediasoup-Example (https://github.com/versatica/mediasoup-demo) works on the other hand. Somehow there is something wrong which makes it fail to setup the remote stream :-/

[mkhahani]

No idea honestly. It works well on Chrome for me and no one reported this yet.

[morxw]

Which Chrome Version did you use to test? I Installed a fresh new machine with your current GitHub Repo and got the same result. On a different Machine chrome is sometimes able to get the stream (1 out of 3) But also with the nodejs Server throwing following error:
(node:10347) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'id' of undefined
at createConsumer (/opt/mediasoup-sample-app/server.js:205:28)
at Socket.<anonymous> (/opt/mediasoup-sample-app/server.js:145:22)
at Socket.emit (events.js:223:5)
at /opt/mediasoup-sample-app/node_modules/socket.io/lib/socket.js:528:12
at processTicksAndRejections (internal/process/task_queues.js:76:11)
(node:10347) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:10347) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Seems like chrome reaches a temporal dead zone(sveltejs/svelte#3234 (comment)) in the variable "stream".

Thanks for any help

• Moritz

[mkhahani]

I'm using Chrome 79 with Windows 10.

[morxw]

Would you mind uploading or sending me your exact app-bundle.js (so I can check if my client dependencies and the client.js are correct) and your server.js file so I can make a diff and check if I have something different or wrong in there? That would be awesome! I'm really confused because I set up several fresh virtual machines and installed it several times without changing much but the IP address in the config and the result was always the same with it working on Firefox and Edge but not on different Chrome's. So I'm really confused about that🙁

[morxw]

Hey there,
Thanks a lot for sharing this. I compared it to my app-bundle files and it somehow looks really different to mine.. That's kinda strange. When i adjust your app-bundle (Port and ListenIp) it works without any problems on my system when running the server.js manually (So your app-bundle doesn't get overwritten). Seems like there is a problem with the way browserify builds the app-bundle.
Because when i set up a new instance on a freshly build server the app-bundle files always look the same (But different to yours)
Thanks for your help. :-)

[mkhahani]

Interesting! Let me know if you could find the reason.

[morxw]

One last question, could you tell me which Folders/Packages you have in your node_modules folder? Seems like there are differences between your app_bundle.js file (20431 lines) and my three different installations. (19876 lines) So it seems like something is missing in my case.
Would really appreciate if you could tell me what's in your node_modules folder so i know what dependency i'm missing that you seem to use in your instance.
Thank you for your support!

[mkhahani]

Sure:

node_modules

accepts
after
ajv
arraybuffer.slice
array-find-index
array-flatten
asn1
assert-plus
asynckit
async-limiter
awaitqueue
aws4
aws-sign2
backo2
base64-arraybuffer
base64id
bcrypt-pbkdf
better-assert
blob
body-parser
bowser
bytes
callsite
camelcase
camelcase-keys
caseless
clang-tools-prebuilt
combined-stream
component-bind
component-emitter
component-inherit
content-disposition
content-type
cookie
cookie-signature
core-util-is
currently-unhandled
dashdash
debug
decamelize
delayed-stream
depd
destroy
ecc-jsbn
ee-first
encodeurl
engine.io
engine.io-client
engine.io-parser
error-ex
escape-html
etag
events
express
extend
extsprintf
fast-deep-equal
fast-json-stable-stringify
finalhandler
find-up
forever-agent
form-data
forwarded
fresh
getpass
get-stdin
graceful-fs
h264-profile-level-id
har-schema
har-validator
has-binary2
has-cors
home-path
hosted-git-info
http-errors
http-signature
iconv-lite
indent-string
indexof
inherits
ipaddr.js
isarray
is-arrayish
is-finite
isstream
is-typedarray
is-utf8
jsbn
json-schema
json-schema-traverse
json-stringify-safe
jsprim
load-json-file
loud-rejection
map-obj
mediasoup
mediasoup-client
media-typer
meow
merge-descriptors
methods
mime
mime-db
mime-types
minimist
mkdirp
ms
negotiator
netstring
normalize-package-data
nugget
number-is-nan
oauth-sign
object-assign
object-component
object-keys
on-finished
parse-json
parseqs
parseuri
parseurl
path-exists
path-parse
path-to-regexp
path-type
performance-now
pify
pinkie
pinkie-promise
pretty-bytes
progress-stream
proxy-addr
psl
punycode
qs
random-number
range-parser
raw-body
readable-stream
read-pkg
read-pkg-up
redent
repeating
request
requirejs
resolve
safe-buffer
safer-buffer
sdp-transform
semver
send
serve-static
setprototypeof
signal-exit
single-line-log
socket.io
socket.io-adapter
socket.io-client
socket.io-parser
spdx-correct
spdx-exceptions
spdx-expression-parse
spdx-license-ids
speedometer
sshpk
statuses
string_decoder
strip-bom
strip-indent
throttleit
through2
to-array
tough-cookie
trim-newlines
tunnel-agent
tweetnacl
type-is
unpipe
uri-js
utils-merge
uuid
validate-npm-package-license
vary
verror
ws
xmlhttprequest-ssl
xtend
yeast

[morxw]

Hey there,
It seems to work now, after using the code of a Fork. Don't really know why but i used the code and moddified it and it seems to work. But one thing i noticed is that it's only possible to transport either audio or video but not both. I know that is kinda offtopic but maybe there is a quick solution to this, i tried adding another producer but somehow the client side only receives the last put producer/track instead of both. Is there a simple workaround for your example to get both to work?
Thanks :)

[mkhahani]

It's just a sample app and I tried to keep it as simple as possible.

However in-order to have audio+video you will need two producers and two consumers in both client and server side codes since each producer/consumer can carry one audio or video track only.

[morxw]

I totally understand that, but i hoped maybe you'd know how to achieve that, since the mediasoup documentation is a quite a little "thin" with only a basic listing of the api modules, where on the other hand their own example app is so big and heavy that it's almost impossible for me as a -noob- to fully understand everything. That's why i love your example, it made me understand most of the basics. As far as i understood you can use multible producers inside of one transporter, but when i try adding:
anotherVideoProducer = await transport.produce({track : anotherTrack});
It seems to overwrite the old Producer and only attach this one to the transporter.

[mkhahani]

This is another project based on mediasoup that has more features and may help you:
https://github.com/daily-co/mediasoup-sandbox/tree/master/single-page

[morxw]

Wow, perfect! Thanks so much, that is really helpful. I must have missed this code example when searching for something similar, since most suitable examples were made for Mediasoup2. That example seems not too difficult to adapt it to work with socket.io for multi producer transport.
Thanks again for your support and your time. :)

[mkhahani]

Good luck.