jssip系列--视频电话期间实时拍照-录像处理

在jssip系列中实现视频电话期间的实时拍照和录像处理，主要依赖于WebRTC技术和浏览器提供的API。以下是详细的实现步骤和代码示例：

1. 理解WebRTC和RTCPeerConnection：

   WebRTC通过RTCPeerConnection对象进行端对端连接，实现媒体传输。

   在jssip中，RTCPeerConnection集成在每次call形成的session中。

2. 设置视频流：

   使用两个video标签，一个显示本地视频，一个显示远程视频。

   在newRTCSession事件监听中，处理接听事件，并将视频流设置到对应的video标签上。

   e.session.on("accepted", function () { if (e.session.connection.getLocalStreams().length > 0) { window.selfView.srcObject = e.session.connection.getLocalStreams()[0]; window.selfView.volume = 0; } if (e.session._connection.getRemoteStreams().length > 0) { window.remoteView.srcObject = e.session.connection.getRemoteStreams()[0]; } window.sipSession = e.session;});

3. 实现拍照功能：

   使用canvas元素将视频流绘制到画布上，并保存为图片。

   关键方法是context.drawImage(video, 0, 0, width, height)和canvas.toDataURL('image/png')。

   function captureImage(video, width, height) { if (canvas == undefined) { canvas = document.createElement('canvas'); canvas.setAttribute("id", "video-canvas"); canvas.setAttribute("style", "display: none;"); } var context = canvas.getContext('2d'); if (width && height) { canvas.width = width; canvas.height = height; context.drawImage(video, 0, 0, width, height); var data = canvas.toDataURL('image/png'); return data; } else { clearphoto(); }}

1. 开始录像：

   使用MediaRecorder API封装媒体记录对象。

   处理媒体流接收方法ondataavailable，将数据保存起来。

   function startVideoRecord() { var stream = remoteView.srcObject; mediaRecorder = new MediaRecorder(stream); mediaStream = stream; var chunks = [], startTime = 0; mediaRecorder.ondataavailable = function(e) { mediaRecorder.blobs.push(e.data); chunks.push(e.data); }; mediaRecorder.blobs = []; mediaRecorder.onstop = function (e) { recorderFile = new Blob(chunks, { 'type' : mediaRecorder.mimeType }); chunks = []; if (null != stopRecordCallback) { stopRecordCallback(); } }; mediaRecorder.start(100); // 注意：必须传入参数，否则ondataavailable无法接收数据}

2. 结束录像并保存文件：

   在onstop方法中，将录制的数据保存为Blob对象，并使用FileSaver.js库保存为文件。

   // 假设已引入FileSaver.jsfunction stopVideoRecord() { if (mediaRecorder && mediaRecorder.state !== 'inactive') { mediaRecorder.stop(); }}// 在stopRecordCallback中处理文件保存function stopRecordCallback() { saveAs(recorderFile, 'recording.webm'); // 使用FileSaver.js保存文件}

• MediaRecorder.start()参数：必须传入参数（如100），否则ondataavailable将无法接收数据。
• 文件保存：使用FileSaver.js库可以方便地将Blob对象保存为文件。
• 浏览器兼容性：确保目标浏览器支持WebRTC和MediaRecorder API。

通过以上步骤，您可以在jssip视频通话期间实现实时拍照和录像功能，为后续的OCR等操作提供数据支持。