Can It record a video from M-JPEG stream?

[realcrazysun]

I have a IP camera and I want to record sometimes,thank you!

[muaz-khan]

<script src="https://cdn.webrtc-experiment.com/DetectRTC.js"></script>
<script>
var videoStream;

if (DetectRTC.isVideoSupportsStreamCapturing) {
    var yourVideoElement = document.querySelector('video');

    if ('captureStream' in yourVideoElement) {
        videoStream = yourVideoElement.captureStream(15);
    } else if ('mozCaptureStream' in yourVideoElement) {
        videoStream = yourVideoElement.mozCaptureStream(15);
    } else if ('webkitCaptureStream' in yourVideoElement) {
        videoStream = yourVideoElement.webkitCaptureStream(15);
    }
}

if (videoStream) {
    var recorder = new MediaStreamRecorder(videStream);
    // your MediaStreamRecorder.js code goes here
}
</script>

Requires: Chrome 53+ i.e. Canary; or Firefox.

You can record youtube HTML5 videos; HLS/DASH based HTML5 videos as well.

[realcrazysun]

Thank you for your response.But my question is to record a video from M-JPEG stream,the element in html is like this <img src='http://192.168.43.1:8080/?action=stream'/> ' .The stream is generated by an Android Device ,and real-time output. Is there any way to record the img src?

[muaz-khan]

You can use canvas.drawImage "repeatedly" to draw image on Canvas2D context.

Then you can use above code to capture Canvas stream.

Then you can record Canvas stream as well, using either MediaStreamRecorder or RecordRTC.

[noahjerreel]

Interesting :)

[realcrazysun]

@noahjerreel Any better idea?The method ' canvas.drawImage "repeatedly" ' is not so efficient。

[ghost]

@realcrazysun Have you got any better way to record Mjpeg_streamer?