Allow camera access - show camera view but don't start recording video

JavaScript
1

This code below works successfully to capture/record/play video - after camera access permission is granted - when the start button is selected.

  1. How can I add the functionality where (after camera access is allowed) the camera view appears, without recording starting automatically?

2.And have the camera view displayed while recording?

Currently, the screen is black after camera access and while capture/recording.

<button id="btn1" onclick="startRecording()">Start</button>
<button id="btn2" onclick="endRecording()">Stop</button>
<video id="video" autoplay controls muted playsInline></video>

<script>

function supportsRecording(mimeType) {
 if (!window.MediaRecorder) {
   return false;
 }
 if (!MediaRecorder.isTypeSupported) {
   return mimeType.startsWith("audio/mp4") || mimeType.startsWith("video/mp4");
 }
 return MediaRecorder.isTypeSupported(mimeType);
}

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) {
     blobs.push(event.data);
   }
 };
 mediaRecorder.onstop = doPreview;
 // Let's receive 1 second blobs
 mediaRecorder.start(1000);
}

function endRecording() {
 // Let's stop capture and recording
 mediaRecorder.stop();
 stream.getTracks().forEach((track) => track.stop());
}

function doPreview() {
 if (!blobs.length) {
   return;
 }
 // Let's concatenate blobs to preview the recorded content
 blob = new Blob(blobs, { type: mediaRecorder.mimeType });
 video.src = URL.createObjectURL(
   blob,
 );
}

any assistance is appreciated

2

Well it is recording because you are piping the video stream through the MediaRecorder object. Check out the following page for example code…

Go to the section titled “Get the media stream” for an example of where they request the stream and then use that stream to bind to the video element (in the code section above). This is the line video.srcObject = stream;

Now if you look at your code, you will notice that you also get the stream, but then you send that stream into the MediaRecorder object’s constructor. This is what it is setting it up for recording. I hope you get what I am saying here.

3

Many thanks for your reply.
I get what you’ve described, I just don’t know how to accomplish that. I tried this, without success:

let blobs = [];
let stream, mediaRecorder, blob;
    .then(function(stream) {
        video.srcObject = stream;
        video.play();
    }

any additional guidance is welcomed.

4

Your JavaScript there is not even right syntax wise. Your .then has to be tied to an object that returns a promise.

Working example below (make sure camera is hooked up and that you grant permission)…

5

Thanks again for your reply/help.
Currently, when I open my page, the camera screen is black, and then I select ‘Start’, it asks for Mic/Cam access and the webcam records, but screen stays black. When I select ‘Stop’, the screen displays the recording and the Player time clock proceeds while playing back.

When I add in your JS the screen displays the Cam view, upon giving Access, the Player timer/clock starts, but nothing is being recorded and selecting ‘Stop’ seems to have no affect.

I’d like to keep all my current abilities, but just have the cam display/view after access, keep the cam display/view while recording.
Any help with modifying the code is appreciated.

6

No no, don’t add in my example code. My example runs by itself. On codepen it should ask for camera access, once granted it should immediately start showing the camera view on the page. My example is meant to check that you have a working camera and demonstrate how to pipe a video camera stream through the web page.

So the first question is, do you see your camera view on the page when you start my code pen? If you still see black only, then you have a problem with your camera or the browser.

7

Yes, I see my camera view on the page when I start your code pen

8

Great… so that is an example of how you would pipe a stream through to the video element. So this addresses your question number 1. You have a working example of how you can have the camera view appearing without recording starting automatically.

Now, if you compare this to your code, you will see that you are taking stream and putting it through an object called MediaRecorder. Where in my example I don’t do this. Since you are running it through MediaRecorder, what is triggering your recording when you click the start button.

So logically this means that you need to take the stream, pipe it to the video element and then after it goes to the video element, pipe that stream through the recorder using the start button.

Maybe when you click start, rather than making the getUserMedia call, you have the function take in a stream. You can fetch the stream by capturing it from the video element. To see how this is done for recording, check out this link…

To recap, you pipe your camera through to the video element like demonstrated. Next, when someone clicks the button to start recording, you capture the stream from the video element and pipe it through the MediaRecorder object like shown in your code. When they click stop, then you stop the media recorder.

Hopefully this makes sense. :slight_smile:

9

Thanks you for the reply.
After trial and error, I can’t see to add the functionality where the camera view appears, without recording starting automatically and have the camera view displayed while recording, as I am not very knowledgable in js
Any additional help is welcomed

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.