Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I've inherited a project that uses video.js and videojs-record

In the project I've inherited, the user of the app is required to click twice before recording starts - first, on the camera icon in the middle of the player, and second on the circle 'record' button on the bottom left. (There's also a requirement to accept permissions the first time, but I'm not personally worried about that requirement as I understand its necessity).

But realistically, for my use case, I don't want to ask the user to click anything to record. I want to start recording programatically through javascript, once permissions are accepted.

But even all the examples have the user required to click those two buttons, so I'm starting to think there's no way around it. I looked through all the options and I couldn't find any for this. I see the functions start and stop but when i do player.start() and player.stop() it says undefined.

HTML:

<div class="video-js">
    <button (click)="startRecording()" class="btn btn-primary">Start</button>
    <button (click)="stopRecording()" class="btn btn-warn">Stop</button>
    <video id="video_{{idx}}" class="video-js vjs-default-skin"></video>
Sharing Screen & Starting the recorder:
startRecording(){
        this.player.record().getDevice();
Stopping the recorder:
stopRecording(){
        this.player.record().stop();
AfterViewInit:
ngAfterViewInit() {
      // device is ready
      this.player.on('deviceReady', () => {
        console.log('device is ready!');
        this.player.record().start(); // <-- IMPORTANT*
      // user clicked the record button and started recording
      this.player.on('startRecord', () => {
        console.log('started recording!');
      // user completed recording and stream is available
      this.player.on('finishRecord', () => {
        // show save as dialog
        console.log('finished recording: ', this.player.recordedData);
        this.player.record().saveAs({'video': 'my-video-file-name.webm'});
I have specified a line as IMPORTANT*, this line is important for starting the recorder, as otherwise it would only initiate screen-sharing.
your HTML
<button class="btn btn-primary" (click)="startRecord()">Start</button>
<button (click)="camOn()" class="btn btn-primary">i am ready</button>
<button (click)="stopRecording()" class="btn btn-warn">Stop</button>
TS/JS
startRecord() {
this.player.record().start();
camOn() {
this.player.record().getDevice();
stopRecording() {
this.player.record().stop();
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.