How to Stop the Video Stream and tracks in WeRTC Angular Part 03

Introduction

In this third installment of our WebRTC tutorial series, we will focus on stopping a video stream. In the previous tutorial, we attached a video stream to a video element and handled the media access request through the browser. If you followed along, you may have seen a prompt asking for permission to access your media devices (camera/microphone).

This time, we want to add functionality to stop the video stream when desired. Let’s go ahead and implement this feature step-by-step.

Objective

Our primary goal is to add a button that allows users to stop the video stream. This will enhance user control over the video experience.

Implementation Steps

1. Refresh the Page

Start by refreshing your application. This will reset the video stream so we can work from a clean slate.

2. Update the User Interface

We will add a button to stop the video stream. You can add this button near the existing "Show Video" button:

<button id="showStream">Start Video Stream</button>
<button id="stopStream">Stop Video Stream</button>

Both buttons invoke methods that manage the video stream: one starts it, and the other stops it.

3. Modify the Service

Next, we need to create a new method in our media service. This method will be responsible for stopping the media stream.

stopMediaStream() (
    if (this.stream) {
        const tracks = this.stream.getTracks();
        tracks.forEach(track => track.stop());
        this.stream = null;
        console.log("Media stream stopped");
    ) else (
        console.log("No media stream available to stop");
    )
}

4. Implement the Stop Stream Method

Now, we need to implement the related method in our component to invoke the service’s stop functionality:

stopStream() (
    this.mediaService.stopMediaStream();
    if (this.videoElement) {
        this.videoElement.nativeElement.srcObject = null;
    )
}

In this method, we clear the source of the video element to ensure that no visual output remains.

5. Testing the Implementation

To test the implementation, refresh the application and request access to the media devices. You should be able to see the video stream. When you click the "Stop Video Stream" button, the video should disappear, demonstrating that the stream has stopped successfully.

6. View Stream Tracks

To gain more insight, you can retrieve and log the media stream tracks just before stopping them:

console.log("Media Stream Tracks: ", this.stream.getTracks());

This function provides detailed information about the audio and video tracks before you stop them.

Conclusion

With this implementation, you have successfully added the capability to stop a video stream in your WebRTC Angular application. The entire sequence—from requesting media access to stopping the stream—gives users enhanced control over their video interactions.

Stay tuned for our next video, where we will delve deeper into WebRTC functionalities and provide more advanced features!

---

Keywords

• WebRTC
• Angular
• Video Stream
• Media Stream Tracks
• Stop Stream
• User Interface

---

FAQ

1. How do I stop a video stream in WebRTC?

• To stop a video stream, you need to call the stop method on each track of the media stream and clear the video element’s source.

2. What do I need to add to my HTML to implement the stop functionality?

• You will need to add an HTML button that will trigger the method to stop the video stream.

3. Can I stop individual tracks (audio/video) separately?

• Yes, you can stop individual tracks by iterating over the tracks in the media stream and calling the stop method on each one.

4. What happens if I try to stop the stream when it doesn’t exist?

• If you attempt to stop a non-existent stream, you will receive a log stating that there is no media stream available to stop.

5. How can I see the details of the media tracks?

• You can use the getTracks() method on the media stream to retrieve an array of the current tracks, which you can then log to the console.