Open
Description
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.
Metadata
Metadata
Assignees
Labels
No labels