Description
Video not showing on my browser despite stream.attachVideo() returning the element properly. It seems to be empty though
Browser Console Error
No error message, just no video and the VideoPlayer object with mostly nulls (including video quality also being a null)
renderVideo: is capturing video? true Videochat.tsx:529:25
renderVideo: is camera Taken? false Videochat.tsx:530:25
renderVideo: is capture forbidden? false Videochat.tsx:531:25
renderVideo: get camera id EygvzAsmorqiYpYMbQ7uk0bVVqnHABm1ALcOajQWhg4= Videochat.tsx:532:25
renderVideo: userId in renderVideo 16778240 and action: Start Videochat.tsx:533:11
renderVideo: in Start Videochat.tsx:536:13
renderVideo: VideoQuality.Video_360P 2 Videochat.tsx:544:13
renderVideo: userVideo:
<video-player node-id="16778240">
_srcObject: null
accessKey: ""
accessKeyLabel: ""
ariaActiveDescendantElement: null
ariaAtomic: null
ariaAutoComplete: null
ariaBrailleLabel: null
ariaBrailleRoleDescription: null
ariaBusy: null
ariaChecked: null
ariaColCount: null
ariaColIndex: null
ariaColIndexText: null
ariaColSpan: null
ariaControlsElements: null
ariaCurrent: null
ariaDescribedByElements: null
ariaDescription: null
ariaDetailsElements: null
ariaDisabled: null
ariaErrorMessageElements: null
ariaExpanded: null
ariaFlowToElements: null
ariaHasPopup: null
ariaHidden: null
ariaInvalid: null
ariaKeyShortcuts: null
ariaLabel: null
ariaLabelledByElements: null
ariaLevel: null
ariaLive: null
ariaModal: null
ariaMultiLine: null
ariaMultiSelectable: null
ariaOrientation: null
ariaOwnsElements: null
ariaPlaceholder: null
ariaPosInSet: null
ariaPressed: null
ariaReadOnly: null
ariaRelevant: null
ariaRequired: null
ariaRoleDescription: null
ariaRowCount: null
ariaRowIndex: null
ariaRowIndexText: null
ariaRowSpan: null
ariaSelected: null
ariaSetSize: null
ariaSort: null
ariaValueMax: null
ariaValueMin: null
ariaValueNow: null
ariaValueText: null
assignedSlot: <slot>
attributes: NamedNodeMap(3) [ node-id="16778240", style="display: block;", media-type="video" ]
autocapitalize: ""
autocorrect: true
autofocus: false
baseURI: "http://localhost:3000/session/1f1b9ce8-4ca3-4636-a45c-c36cbc764fc6?username=azaan"
borderRadius: null
callback: function callback(e, t1)
childElementCount: 1
childNodes: NodeList [ div
]
children: HTMLCollection { 0: div
, length: 1 }
classList: DOMTokenList []
className: ""
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 1199
container: <video-player-container class="video-tile w-full h-full" style="background: rgb(34, 34, …ck; position: relative;">
contentEditable: "inherit"
currentCSSZoom: 1
dataset: DOMStringMap(0)
dir: ""
draggable: false
enterKeyHint: ""
"fill-mode":
firstChild: <div style="width: 100%; height: 100%;">
firstElementChild: <div style="width: 100%; height: 100%;">
getRenderParams: BoundFunctionObject { … }
hidden: false
id: ""
inert: false
innerHTML: '<div style="width: 100%; height: 100%;"></div>'
innerText: ""
inputMode: ""
isConnected: true
isContentEditable: false
lang: ""
lastChild: <div style="width: 100%; height: 100%;">
lastElementChild: <div style="width: 100%; height: 100%;">
localName: "video-player"
"media-type":
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: null
"node-id":
nodeName: "VIDEO-PLAYER"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 0
offsetLeft: 0
offsetParent: <video-player-container class="video-tile w-full h-full" style="background: rgb(34, 34, …ck; position: relative;">
offsetTop: 0
offsetWidth: 1199
onabort: null
onanimationcancel: null
onanimationend: null
onanimationiteration: null
onanimationstart: null
onauxclick: null
onbeforeinput: null
onbeforematch: null
onbeforetoggle: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontentvisibilityautostatechange: null
oncontextlost: null
oncontextmenu: null
oncontextrestored: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragexit: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
onformdata: null
onfullscreenchange: null
onfullscreenerror: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onpointercancel: null
onpointerdown: null
onpointerenter: null
onpointerleave: null
onpointermove: null
onpointerout: null
onpointerover: null
onpointerrawupdate: null
onpointerup: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onscrollend: null
onsecuritypolicyviolation: null
onseeked: null
onseeking: null
onselect: null
onselectionchange: null
onselectstart: null
onslotchange: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
ontransitioncancel: null
ontransitionend: null
ontransitionrun: null
ontransitionstart: null
onvolumechange: null
onwaiting: null
onwebkitanimationend: null
onwebkitanimationiteration: null
onwebkitanimationstart: null
onwebkittransitionend: null
onwheel: null
outerHTML: '<video-player node-id="16778240" style="display: block;" media-type="video"><div style="width: 100%; height: 100%;"></div></video-player>'
outerText: ""
ownerDocument: HTMLDocument http://localhost:3000/session/1f1b9ce8-4ca3-4636-a45c-c36cbc764fc6?username=azaan
parentElement: <video-player-container class="video-tile w-full h-full" style="background: rgb(34, 34, …ck; position: relative;">
parentNode: <video-player-container class="video-tile w-full h-full" style="background: rgb(34, 34, …ck; position: relative;">
part: DOMTokenList []
popover: null
prefix: null
previousElementSibling: null
previousSibling: null
"refresh-key":
removeStyleListener: function removeStyleListener()
removeSubscribe: function subscribe()
render: Object { getRenderParams: BoundFunctionObject, id: "16778240", viewId: "video-player-fa51b310-1d4c-4999-b5ec-f808092db917", … }
role: null
scrollHeight: 0
scrollLeft: 0
scrollLeftMax: 0
scrollTop: 0
scrollTopMax: 0
scrollWidth: 1199
shadowRoot: null
"share-source":
slot: ""
spellcheck: false
"stop-no-clean":
style: CSS2Properties { display → "block" }
tabIndex: -1
tagName: "VIDEO-PLAYER"
textContent: ""
title: ""
translate: true
"video-quality":
<get fill-mode()>: function get()
<set fill-mode()>: function set(t1)
<get media-type()>: function get()
<set media-type()>: function set(t1)
<get node-id()>: function get()
<set node-id()>: function set(t1)
<get refresh-key()>: function get()
<set refresh-key()>: function set(t1)
<get share-source()>: function get()
<set share-source()>: function set(t1)
<get stop-no-clean()>: function get()
<set stop-no-clean()>: function set(t1)
<get video-quality()>: function get()
<set video-quality()>: function set(t1)
<prototype>: Object { … }
Videochat.tsx:547:13
renderVideo: past attachVideo Videochat.tsx:548:13
renderVideo: past appendChild Videochat.tsx:554:13
renderVideo: past setIsVideoMuted Videochat.tsx:556:13
Video started
Which Web Video SDK version?
2.2.5
Video SDK Code Snippets
const mediaStream = clientRef.current.getMediaStream();
await mediaStream.startVideo()
await renderVideo({ action: "Start", userId: clientRef.current.getCurrentUserInfo().userId });
const renderVideo = async ({ action, userId }: { action: "Start" | "Stop", userId?: number }) => {
if (!clientRef.current) return;
const mediaStream = clientRef.current.getMediaStream();
const cameraId = mediaStream.getActiveCamera()
console.log("renderVideo: is capturing video? ", mediaStream.isCapturingVideo())
console.log("renderVideo: is camera Taken? ", mediaStream.isCameraTaken())
console.log("renderVideo: is capture forbidden? ", mediaStream.isCaptureForbidden())
console.log("renderVideo: get camera id", cameraId)
console.log("renderVideo: userId in renderVideo", userId, "and action: ", action)
try {
if (action === "Start") {
console.log("renderVideo: in Start")
// if (!localVideoTrackRef.current) {
// // Create local video track if it doesn't exist
// localVideoTrackRef.current =
// await zoomVideoRef.current.createLocalVideoTrack();
// }
// await localVideoTrackRef.current.start(localVideoRef.current);
console.log("renderVideo: VideoQuality.Video_360P", VideoQuality.Video_360P)
const userVideo = await mediaStream.attachVideo(userId, VideoQuality.Video_360P);
console.log("renderVideo: userVideo: ", userVideo)
console.log("renderVideo: past attachVideo")
videoContainerRef.current!.appendChild(userVideo as VideoPlayer)
console.log("renderVideo: past appendChild")
setIsVideoMuted(false);
console.log("renderVideo: past setIsVideoMuted")
Screenshots
Troubleshooting Routes
Checking if stream is capturing video (true), camera taken (false), capture forbidden (false).
Device (please complete the following information):
- Device: Acer Nitro 5
- OS: Win 10
- Browser: Firefox
- Browser Version [e.g. 88.0.4324.150 (Official Build) (x86_64)]
Additional context