thijstriemstra
commented
3 years ago @pradeepaanumalla thanks for the report. Do you have any more info about this error? A longer stacktrace would be needed to determine where this error is triggered.
Closed pradeepaanumalla closed 2 years ago
thijstriemstra
commented
3 years ago @pradeepaanumalla thanks for the report. Do you have any more info about this error? A longer stacktrace would be needed to determine where this error is triggered.
pradeepaanumalla
commented
3 years ago Yes @thijstriemstra , Can you check this
Let me know if you need more info
thijstriemstra
commented
3 years ago @pradeepaanumalla can you try with a unminified version of video.js so the stacktrace contains the correct line numbers? You would have to compile your project with dev version of video.js, not video.min.js
pradeepaanumalla
commented
3 years ago Hi @thijstriemstra
Tried using unminified version and got this error when the window is not active/
I am also adding my source code here. Please run it in a firefox, click on start button and go to some other application.
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.5.5/video-js.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-record/3.8.0/css/videojs.record.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.5.5/video.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.1.1/adapter.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-record/3.8.0/videojs.record.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-landscape-fullscreen@11.1.0/dist/videojs-landscape-fullscreen.min.js"></script>
</head>
<body>
<div style="display: -webkit-inline-box;">
<video id="myVideo" class="video_player video-js vjs-default-skin" gravity="auto" playsinline></video>
<button id="start" class="btn btn-primary" onclick="startRecording()">start</button>
<button id="stop" style="display: none;" class="btn btn-primary" onclick="stopRecording()">stop</button>
<button id="play" style="display: none;" class="btn btn-primary" onclick="playRecordedData()">Play</button>
</div>
</body>
</html>
<style>
.btn-primary{
height: 36px !important;
}
.recording_time_wrapper, .preparation_time_wrapper {
width: calc(100vh - 365px);
height: 50px;
border-radius: 30px;
background-color: rgba(40, 110, 250, 0.5);
background-color: var(--main-company-color-opacity);
overflow: hidden;
color: var(--main-text-color);
text-align: center;
line-height: 50px;
margin: 0 auto;
position: relative;
margin-top: -60px;
display: block;
}
@media (max-height: 695px) {
.recording_time_wrapper, .preparation_time_wrapper {
width: 335px;
}
}
@media (min-height: 780px) {
.recording_time_wrapper, .preparation_time_wrapper {
width: 410px;
}
}
.recording_time, .preparation_time {
height: 50px;
width: 0;
border-radius: 30px;
background-color: rgba(40, 110, 250, 1);
background-color: var(--main-company-color);
margin-top: -50px;
}
</style>
<script>
var player_options = {
controls: false,
autoplay: false,
autosetup: false,
width: 500,
height:500,
fluid: false,
loop: false,
controlBar: {
volumePanel: false
},
plugins: {
record: {
audio: true,
video: true,
debug: false,
maxLength: 180,
timeSlice: 1000,
autoMuteDevice: false,
videoMimeType: 'video/mp4',
audioSampleRate: 48000,
frameWidth: 360,
frameHeight: 480,
facingMode: 'user'
}
}
}
var player = videojs('#myVideo', player_options);
player.ready(() => {
// player.record().getDevice();
})
player.on('finishRecord', async () => {
var recorderData = player.recordedData;
})
player.on('deviceError', (e) => {
console.log('ee',e.name,e);
var permissionDenied = true;
});
function startRecording(){
setTimeout(() => {
try{
player.record().getDevice();
document.querySelector('#stop').style.display="block";
document.querySelector('#play').style.display="block";
document.querySelector('#start').style.display="none";
player.record().start();
}
catch(error){
console.log('error',error);
}
}, 5000);
}
function stopRecording(){
document.querySelector('#play').style.display="block";
document.querySelector('#start').style.display="block";
document.querySelector('#stop').style.display="none";
player.record().stopDevice();
// player.record().stop();
var recordedData = player.recordedData;
}
function playRecordedData(){
player.play();
}
function reRecordedData(){
window.location.reload();
}
</script>
@pradeepaanumalla you're using a old version of videojs-record: 3.8.0
Please always test with the latest versions!
pradeepaanumalla
commented
3 years ago Hi @thijstriemstra I have updated the video js to 7.14.3 and video js record to 4.5.0 , but I am still facing the issue
thijstriemstra
commented
3 years ago player.record().getDevice();
document.querySelector('#stop').style.display="block";
document.querySelector('#play').style.display="block";
document.querySelector('#start').style.display="none";
player.record().start();you should not start() before deviceReady event is triggered (by getDevice). So wait with recording until deviceReady` event is triggered.
thijstriemstra
commented
2 years ago no feedback, closing.
Browser : Firefox version : 90.0
I am using video js to start and stop the recoding automatically on the basis of timer.
Generally we are having a requirement to record the user answer's. There will be multiple retakes to record the video.
When user clicks on start then we are calling getDevice() and then start(), when he stops then it will trigger stopDevice().
So after stopping the recording if user doesn't submit the answer then the next retake will start after certain time(ex : 60secs).
So In this autorestart process I am using getDevice() to access the camera , but its resulting in this error
Uncaught (in promise) DOMException: The fetching process for the media resource was aborted by the user agent at the user's request.