How to record a div + audio input on mobile browser?

Question

I'm Kevin, a Junior Web Dev.

I have a project which include Drawing a Game Canvas over a Camera Canvas, something that looks like this:

To simplify, it's implemented pseudo-ly like this:

<div class="container" style="position: relative"> 
   <canvas class="camera-canvas" style="position: absolute"></canvas>
   <canvas class="game-canvas" style="position: absolute"></canvas>
   <p class="score" style="position: absolute">Score: 159</p>
</div>

Because the game will be played on mobile browser , how do I record the outer container + mic audio input ?

The player has to be able to record the gameplay for about 15s,

I already seen this SO post: Is it possible to record a video of the contents of an HTML element?

but I don't understand the meaning at:

If you don't have a canvas element and you need to record an HTML element, you would first need to place a hidden canvas on the screen and draw on it your HTML content using window.requestAnimationFrame(). Then you can use RecordRTC to record that canvas element.

You can use RecordRTC's CanvasRecorder to record just the canvas.

But if you want to do other things like record the user's microphone or browser tab's audio alongside your recording your canvas, you can canvas.captureStream() and use the RecordRTC's MediaStreamRecorder to record.

Image taken from zaleos blog at: https://blog.zaleos.net/game-with-camera-controller/

For simplicity, I want to record this demo on mobile browser: https://league55.github.io/fruit-ninja-blog-post-demo/

Answer 1

With Js to record a video with audio use this => Add a video tag And set its position exactly as canvas position

Js =>

const consts = {
audio: true, // ALLOW AUDIO
video: true // ALLOW VIDEO
}
window.navigator.getMediaDevices(consts).then((src) => {
cameraRecord.srcObject = src
})

Reference => GO TO