Video records in Black & White

Bugs
1

Using the Web SDK on localhost for face filter video recording, the video playback and the downloaded recorded video is black and white with some pinkish tinge.

image
image902Ă—287 70.4 KB

2

Hello, Hi,

Can you provide us with the necessary information and steps to reproduce this issue:

  1. Can you reproduce your issue on our quickstart example on GitHub? Those examples are tried and tested, and if you can reproduce the issue on them that will be the fastest way to fix the issue.
  2. What is your DeepAR SKD version and what device you are running this one?
  3. Does this still happen with a different device/camera
  4. Write the steps and what you are expecting to happen.
  5. Write the steps and what is actually happening.
3

Hey,

I am using the deepAR Web SDK.

I am having trouble getting the HTML/JavaScript quickstart samples on GitHub to run.

So, I have attached my sample page, index1.html.

  • Load page from a web server in a Chromium based browser
  • click Start Camera
  • click Capture Photo, if you want
  • click Record
  • let record for a few seconds
  • click Stop Recording
  • observe the captured black and white video, it should be in color, right?

I am running as localhost on IIS with a Win 11 MSI GE75 Raider with 48GB of RAM and a 10th gen i7.

My browser is Chrome Version 112.0.5615.139 (Official Build) (64-bit). I ge the same results with Edge, FireFox, Brave, and Chromium

I am using the CDN at https://cdn.jsdelivr.net/npm/deepar for deepAR JS source files.

I have tried two different types of Logitech cameras and the laptop built-in camera. Same results for each.

Link to a video demo of what I am seeing using the laptop’s built-in camera.

Please let me know what else I can do to help get this fixed.

Thanks for your time and help.

Eric

(Attachment index1.html is missing)

4

I am re-submitting index1.html as a zip file.

Please see previous reply for details.

Eric

index1.zip (1.58 KB)

5

I’ll have a look. Can you reproduce this issue with our quick-start example?

6

No, in a previous reply I mentioned I cannot get the quick-start examples to work.

The sample I provided is way easier than the deepAR samples to get working and the basis of it comes from the deepAR web site.

Eric

7

Have you had an opportunity to look over this yet?

8

Hello,

Is there anything I can do to help with this?

Eric

9

The issue seems to be with camera input handling, I’m not sure how exactly but it looks as if the camera is using the YUV color space.

Any chance we can get back your original issue running our examples since dissecting custom examples is time intensive?

What exactly goes wrong with npm?

10

I will try again to get a DeepAR example to run and let you know the results.

I would like to point out that I consider my submitted example to be a fair test of the Web SDK as it is quite simple, realistic, and is pulling directly from the DeepAR CDN with no other SDKs needed. It is a rudimentary test of the ability of DeepAR to record a video. Right now, I can’t see how the recording results will change if it is my example or DeepAR’s. My example makes a direct call to DeepAR’s start and finish recording and then uses the DeepAR generated blob as the video source, which is black and white. From a SDK user’s perspective, I don’t see any example getting any simpler or more direct. Record, Stop, Show is as basic as it gets from a developer’s POV.

Wish me luck with the Deep AR examples.

Thanks,
Eric

11

Hello,

I got this example to run quickstart-web-js-npm. Works as expected, I guess. It doesn’t do video recording, though. None of the quick start examples do video recording and very few examples are HTML and/or JavaScript with the DeepAR Web SDK, which is what we are interested in. Me doing anything other than a video recording example with the Web SDK doesn’t seem like a practical use of time since I need video recording with a filter using the Web SDK.

Is there a particular example you wish me to try?

Your pal,
Eric

12

We have a startVideoRecording function but we will also look into a specific example for video recording

13

Thanks.

The example code I submitted as a zip file in a previous reply uses startVideoRecording and finishVideoRecording.

I look forward to seeing a DeepAR example of video recording followed by a display of the recorded video.

Thanks again.

Eric

14

@egravittatmozeus.com be warned, their startVideoRecording only records video; it won’t record audio. That would have been a deal-breaker for us, except that it’s really really easy to record a video stream from the canvas, and audio stream(s) from the mic, combined, and just avoid using startVideoRecording. Of course, you’re on your own for getting the blob out, but we already had that code from prior to using DeepAR – RecordRTC works nicely here – so that wasn’t an issue.

This blurb is React.JS. this.state.stream is straight from getUserMedia and this.state.deepARCanvas is a Ref to the canvas object that deepar is rendering to.

let arstream = this.state.deepARCanvas.current.captureStream();

var finalStream = new MediaStream();
this.state.stream.getAudioTracks().forEach(track => {
    finalStream.addTrack(track);
});
arstream.getVideoTracks().forEach(track => {
    finalStream.addTrack(track);
});

recorder = RecordRTC(finalStream, {
    mimeType: "video/webm;codecs=h264",
    recorderType: MediaStreamRecorder
});
recorder.startRecording();
1 Like