What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Allow camera access - show camera view -- don’t start recording video


New member
This code below works successfully to capture/record/play video - after camera access permission is granted - when the start button is selected. I'm trying to add the functionality where (after camera access is allowed) the camera view appears, without recording starting automatically (And have the camera view displayed while recording).

Currently, the screen is black after camera access and while capture/recording. I was told that I need to "capture the stream from the video element and put it through the MediaRecorder object". I don't know how to do that. Any help is appreciated

var video = document.querySelector("video");
let params = { audio: true, video: { facingMode: { exact: "environment" } } };

let blobs = [];
let stream, mediaRecorder, blob;

async function startRecording() {
  stream = await navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true,

  mediaRecorder = new MediaRecorder(stream);
  mediaRecorder.ondataavailable = (event) => {
    // Let's append blobs for now, we could also upload them to the network.
    if (event.data) {