Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Getting black frames as output #36

Open
talalz94 opened this issue Jul 12, 2021 · 0 comments
Open

Getting black frames as output #36

talalz94 opened this issue Jul 12, 2021 · 0 comments

Comments

@talalz94
Copy link

I am capturing my web-cam stream from a VUE extention of video-js called VideoJSRecord.vue. I am also using html2canvas to render the web-cam stream to an image. The issue is that I am able to get the frame of the video player (that shows record button and symbol) but the actual web-stream is missing and its all black.

async print() {
            const el = this.$refs.printMe.$el
            const options = {
                type: 'dataURL',
            }
           this.output = await this.$html2canvas(el, options)
           console.log(this.output)
        },
<div
                    class="video-record"
                    :class="
                        showVideo == true
                            ? 'videoRecored'
                            : '' || timeShow == true
                            ? 'videoRecored'
                            : ''
                    "
                >
                    <div class="show-record-video">
                        <video-js-record
                            ref="printMe"
                            @recordingStarted="onVideoRecording"
                            @recordingEnded="onRecordingEnded"
                        ></video-js-record>
                    </div>
                    <div
                        :class="showVideo == true ? 'video-recorded' : ''"
                        class="video-play"
                        ref="printMe"
                    >
                        <span v-if="timeShow" class="timer-countdown">{{
                            countDown
                        }}</span>
                        <i class="icon-record">
                            <i class="path1"></i>
                            <i class="path2"></i>
                            <i class="path3"></i>
                        </i>
                        <p v-if="showVideo == false">Record</p>
                        <p v-if="showVideo == true">Finish</p>
                    </div>
</div>

Here is the output image that is generated after decoding the base64 output.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant