HTML/JS app - getting a reference to an element which is not part of the DOM

Question

I am trying to debug an app which I don't own which uses HTML5 and JS, which displays a video stream. The issue is that the video stutters when viewed in high resolution.

Note that the code is obfuscated, but has been prettyfied which helps a little. So far using Chrome developer tools and by injecting listeners I have determined that the video is being displayed in a <canvas> element. From my research, I have determined that displaying video content in <canvas> requires the use of <video>, where the data taken from the video element is manipulated and written on to the <canvas>.

My problem is that I want to get a reference to the <video> element, which apparently is not a part of the DOM. The use of Chrome developer tools reveals no such element, nor does getElementsByTagName(). I find clues in the code which indicate a <video> element most likely exists, so my conclusion is that it is just used in memory as a tool and is not added to the DOM.

Does anyone have any suggestions as to how I can get a reference to this element?

Answer 1

• Look for any requests to document.createElement or document.createElementNS in the code that may be creating and appending the <video> element to the DOM. You might be able to locate the <video> element by searching the child nodes of its parent element.

• Look for any event listeners associated with the <video> element. For example, if the <video> element has a onended event listener, you could try triggering it and seeing if it produces any output in the console or other visible effects.

• Search the code for any mentions of the <video> element. You might notice references to an attribute in the code, for instance, if the src attribute of the <video> element is set dynamically.

• You might be able to locate the <video> element by looking for it in the virtual DOM or component tree if the code makes use of a JavaScript library or framework (like React or Angular).

• If the <video> element is being used to display a video stream from a server, you may be able to locate it by inspecting the network traffic in the developer tools. For example, if the video stream is served via the HTML5 MediaSource API, network requests for video segments should be visible in the network panel.