mycurelabs / vue-html2canvas

Vue mixin for Html2Canvas
MIT License
116 stars 23 forks source link

Getting black frames as output #36

Open talalz94 opened 3 years ago

talalz94 commented 3 years ago

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.