preface

In the previous article, we introduced how to use WEBRTC to simplify and enhance the tedious and bottleneck problems encountered in the process of WEBRTC direct connection, as well as the simple implementation of network video call small tutorial, this article will introduce how to record call data in real time during the above video call.

Prepare the basic call demo and start recording the tutorial

This demo is mainly used in previous demos, and the recording function is added

Initialize recording and playback of janus plug-in

The plugin name janus.plugin. Recordplay that.$store.state. Recordplay is the global handle obtained after the plugin is initialized.

Handle initRecordPlay(){const that = this; janus.attach({ plugin: "janus.plugin.recordplay", success: function(pluginHandle) { that.$store.commit("setRecordPlay",pluginHandle) Janus.log("Plugin attached! (" + pluginHandle.getPlugin() + ", id=" + pluginHandle.getId() + ")"); }, error: function(cause) { Janus.error(" -- Error attaching recordplay plugin..." , error); }, onmessage: function(msg, jsep) { Janus.debug(" ::: Got a message :::", msg); var result = msg["result"]; if(result) { if(result["status"]){ var event = result["status"]; if(event === 'preparing' || event === 'refreshing') { Janus.log("Preparing the recording playout"); that.$store.state.recordPlay.createAnswer( { jsep: jsep, media: { video:false, audio:false, data:true }, success: function(jsep) { var body = { request: "start" }; that.$store.state.recordPlay.send({ message: body, jsep: jsep }); }, error: function(error) { Janus.error("WebRTC error:", error); }}); if(result["warning"]){ console.log() } } else if(event === 'recording') { if(jsep) that.$store.state.recordPlay.handleRemoteJsep({ jsep: jsep }); var id = result["id"]; if(id) { Janus.log("The ID of the current recording is " + id); } } else if(event === 'playing') { Janus.log("Playout has started!" ); } else if(event === 'stopped') { Janus.log("Session has stopped!" ); }}}}, onLocalStream :function(stream){console.log(" local video ")}, onRemoteStream: Function (stream) {console.log(" remote video ") that.settarGetMedia (stream,'recordPlay')// Listen to the video source and output it to the specified video tag janus.debug (" ::: Got a remote stream :::", stream); }}); },Copy the code

Start recording

Use the global recording handle that.$store.state.recordPlay above to send a specific instruction to Janus to start recording.

recordvideo(){ const that = this; if(! Enclosing the username) {this. $message. The error (" user name cannot be empty) return} that. $store. State. RecordPlay. CreateOffer ({success: function(jsep) { console.log("Got SDP!" , jsep); var body = { request: "record", name: getNowStrTime(new Date())+"-"+that.username }; that.$store.state.recordPlay.send({ message: body, jsep: jsep }); }, error: function(error) { that.$store.state.recordPlay.hangup(); }}); },Copy the code

The end of the recording

It’s essentially the handle to hang up the recording

stoprecordvideo(){
	this.$store.state.recordPlay.hangup();
  },
Copy the code

Get the recorded video

The list directive returns a collection of recorded videos, which can then be played based on the ID of each video

loadAllvideos(){
		const that = this;
		var body = { request: "list" };
		this.$store.state.recordPlay.send({ message: body,success:function(res){
			console.log("videos:",res)
			
		}})
	},
Copy the code

Var body = {request: “record”, name: getNowStrTime(new Date())+”-“+ thate.username}; The time and the logged-in user defined here

Play the recorded content

According to the ID field in the recording information set obtained above, the playback instruction can be sent through the recording handle

Playvideo (row){// row.id = {request: "play",id:row.id}; this.$store.state.recordPlay.send({ message: body}) },Copy the code

When the play command is sent, the handle will respond accordingly, and you can see the onMessage listener in the initialization plug-in. Of course, the following is already written when the plug-in is initialized.

onmessage: function(msg, jsep) { Janus.debug(" ::: Got a message :::", msg); var result = msg["result"]; if(result) { if(result["status"]){ var event = result["status"]; if(event === 'preparing' || event === 'refreshing') { Janus.log("Preparing the recording playout"); that.$store.state.recordPlay.createAnswer( { jsep: jsep, media: { video:false, audio:false, data:true }, success: function(jsep) { Janus.debug("Got SDP!" , jsep); var body = { request: "start" }; that.$store.state.recordPlay.send({ message: body, jsep: jsep }); }, error: function(error) { Janus.error("WebRTC error:", error); }}); if(result["warning"]){ console.log() } } else if(event === 'recording') { // Got an ANSWER to our recording OFFER if(jsep) that.$store.state.recordPlay.handleRemoteJsep({ jsep: jsep }); var id = result["id"]; if(id) { Janus.log("The ID of the current recording is " + id); } } else if(event === 'playing') { Janus.log("Playout has started!" ); } else if(event === 'stopped') { Janus.log("Session has stopped!" ); }}}},Copy the code

End play

Stopplayvideo (row){var body = {request: "stop",id:row.id}; this.$store.state.recordPlay.send({ message: body}) },Copy the code

How to download recorded video

Janus himself recorded information

Janus doesn’t record video directly in MP4 format, but instead has three files for each video

Nfo content is the basic information of each video file obtained when obtaining the recording information above, such as the video name, video file and audio file

[2464070935677548]
name = 2021-08-15-19-22-19-aaa
date = 2021-08-15 11:22:20
audio = rec-2464070935677548-audio.mjr
video = rec-2464070935677548-video.mjr
Copy the code

How do I convert to MP4

Janus directly saves the above non-MP4 format, but also provides a plug-in to convert to MP4 format. I will write how to use the plug-in in the following script. The essence is to convert the corresponding.mjr files into basic video (.webm) and audio files (.opus), and then use FFMPEG to merge video and audio sources, output MP4, the general script is as follows, if you want to complete the script, you can leave a message to me.

tmp_video=./tmp/mjr-$RANDOM.webm

tmp_audio=./tmp/mjr-$RANDOM.opus

januspprec_dir=/usr/local/bin/

$januspprec_dir/janus-pp-rec ./rec-2464070935677548-audio.mjr $tmp_video

$januspprec_dir/janus-pp-rec ./rec-2464070935677548-video.mjr $tmp_audio
-----------------------

ffmpeg -i $tmp_audio -i $tmp_video  -c:v copy -c:a opus -strict experimental 2464070935677548-aaa.mp4

Copy the code

Last recommendation

  • Webrtc server Janus taste the actual situation of enterprise-class audio and video conference
  • Webrtc video group chat series complete instant messaging + multi-person video conferencing