1. The background

For the video being played, you want to record the video stream and upload it to the back-end service.

2. Implementation ideas:

1. Play a video through the video, but the video is set to invisible. 2. Display the video frames in the video on the canvas. 3. Record the content drawn on the canvas and generate a byte blob package. 4. Upload byte data packets to the backend

3. Implementation method

Play the video and render the video stream on the canvas

Note that video is not visible, canvas is visible.

<div style="text-align: center; margin-top:10px;" > <canvas id="theCanvas" height=360 width=640 style="width:640px; margin:auto;" ></canvas> <video src="hmbb.mp4" id="theVideo" autoplay=true style="display:none;" ></video> </div>Copy the code

Click the Play button to start playing

1. Initial video operation. 2

Get the cavAS drawing context and use the requestAnimationFrame frame callback to continually refresh and draw the content of the video into canAS

$("#openBtn").click(function(){console.log("# openBtn"); _chunks = []; _theVideo.play() _playID = playCanvas(_theVideo, _ctx); setRecorder(); }); Var init = function() {_theVideo = $("#theVideo").get(0); _theCanvas = $("#theCanvas").get(0); console.log(_theCanvas); const ctx = _theCanvas.getContext('2d'); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, _theCanvas.width, _theCanvas.height); _ctx = ctx; }; // write the content of video stream to canvas function playCanvas(srcvideo, CTX) {//console.log("# playCanvas... "); ctx.drawImage(srcvideo, 0, 0, 640, 360) _playID = requestAnimationFrame(() => { //console.log("# ctx.drawImage... id="+_playID); playCanvas(srcvideo, ctx) }) }Copy the code

The recording

  1. Through _theCanvas. CaptureStream (60); Get a video stream
  2. Generate a MediaStreamRecorder recorder with the video stream as an argument.
  3. Call the recorder’s start() method to start recording.
  4. _mediaRecorder. Ondataavailable callback methods Additional bytes.
  5. Upload bytes (recorded data)
$("#openBtn").click(function(){console.log("# openBtn"); _chunks = []; _theVideo.play() _playID = playCanvas(_theVideo, _ctx); setRecorder(); }); $("#startBtn").click(function(){console.log("# startBtn"); _mediaRecorder.start(); / / video}); $("#stopBtn").click(function(){console.log("# stopBtn"); _mediaRecorder.stop(); // Stop recording}); Var setRecorder = function(mediaStream){console.log("# init mediaRecorder"); _chunks = []; // Let VIDEO_FORMAT = 'video/webm'; if(! The MediaRecorder. IsTypeSupported (VIDEO_FORMAT)) {alert (format) alert (" the current browser does not support the encoding type "); return; } // Initialize the video mediaRecorder _mediaStream= _thecanvas.captureStream (60); // 60 FPS recording console.log(_mediaStream); _mediaRecorder = new MediaStreamRecorder(_mediaStream); _mediaRecorder.mimeType = VIDEO_FORMAT; _mediaRecorder. Ondataavailable = function (data) {the console. The log (" # the recorded data..." ); console.log(data); console.log("# ondataavailable, size = " + parseInt(data.size/1024) + "KB"); _chunks.push(data); }; _mediaRecorder. Onstop = function(e) {console.log("# record stop... ); const fullBlob = new Blob(_chunks); const blobURL = window.URL.createObjectURL(fullBlob); console.log("blob is ? , size="+parseInt(fullBlob.size/1024)+"KB. "); console.log(fullBlob); console.log("blobURL =" + blobURL); uploadFile(fullBlob); } }// end initMediaRecorderCopy the code

Method: Start and stop animation (video stream)

play

Window. RequestAnimationFrame () : tells the browser – you want to perform an animation, and require the browser until the next redraw calls the specified callback function to update the animation.

This method takes as an argument a callback function that is executed before the browser’s next redraw.

Stop asking: How do I stop requestAnimationFrame? A: requestAnimationFrame returns an ID by default. CancelAnimationFrame only needs to pass this ID to stop.

www.jianshu.com/p/fa5512dfb…

My sample code

The code is placed at githb: :github.com/vir56k/demo…

reference

Developer.mozilla.org/zh-CN/docs/…

www.jianshu.com/p/fa5512dfb…

www.w3school.com.cn/jsref/dom_o…

www.cnblogs.com/scarecrowlx…

Under the best advice to see this cloud.tencent.com/developer/a… Below video demo source code. Worth seeing wendychengc lot. IO/media – recor…

www.zuidaima.com/blog/381972…