更新 'SRSWebRtcPlayer.ts'

SRSWebRtcPlayer.ts

@@ -5,13 +5,19 @@
 class WebRtcPlayer {
     private Peer: any
     private TIMER: any
-    constructor(option: { HOST: string, TOKEN: string, UUID: string, PROFILE: number, PORT: number, DOM: HTMLElement }) {
+    constructor(option: { HOST: string; TOKEN: string; UUID: string; PROFILE: number; PORT: number; DOM: HTMLVideoElement }) {
         this.initWebRtc(option.HOST, option.PORT, option.TOKEN, option.UUID, option.PROFILE, option.DOM).then(res => {
             this.Peer = res
         }).catch(() => {
             this.Peer = null
         })
     }
+    /**
+     * 同步睡眠
+     * @param ms 毫秒
+     * @returns
+     */
+    private sleep(ms: number) { return new Promise((resolve) => { setTimeout(resolve, ms) }) }
 
     /**
      * 初始化webrtc
@@ -22,7 +28,7 @@ class WebRtcPlayer {
      * @param DOM video节点
      * @returns 
      */
-    private async initWebRtc(HOST: string, PORT: number, TOKEN: string, UUID: string, PROFILE: number, DOM: HTMLElement | any | null) {
+    private async initWebRtc(HOST: string, PORT: number, TOKEN: string, UUID: string, PROFILE: number, DOM: HTMLVideoElement) {
         try {
             const Peer = new RTCPeerConnection() as any
             Peer.addTransceiver('video', { direction: 'recvonly' })
@@ -109,6 +115,48 @@ class WebRtcPlayer {
         }, 500);
     }
 
+    /**
+     * 视频截图
+     * @param option 
+     * @returns base64
+     */
+    public capPhoto(DOM: HTMLVideoElement) {
+        const canvas = document.createElement('canvas')
+        canvas.width = DOM.offsetWidth
+        canvas.height = DOM.offsetHeight
+        const context = canvas.getContext('2d')
+        context?.drawImage(DOM, 0, 0, DOM.offsetWidth, DOM.offsetHeight)
+        const base64 = canvas.toDataURL('image/jpg')
+        return base64
+    }
+
+    /**
+     * 视频录像
+     * @param DOM 
+     * @param TIME ms
+     * @returns 
+     */
+    public async capVideo(DOM: HTMLVideoElement, TIME: number) {
+        const recordedBlobs = [] as any
+        const MediaStream = DOM['srcObject'] as MediaStream
+        const mediaRecorder = new MediaRecorder(MediaStream, { mimeType: 'video/webm;codecs=h264' })
+        mediaRecorder.ondataavailable = (event: { data: { size: number } }) => {
+            if (event.data && event.data.size > 0) {
+                recordedBlobs.push(event.data);
+            }
+        }
+        mediaRecorder.start()
+        await this.sleep(TIME || 1000 * 3)
+        mediaRecorder.stop()
+        return await new Promise((resolve, reject) => {
+            mediaRecorder.onstop = () => {
+                const blob = new Blob(recordedBlobs, { type: 'video/mp4' });
+                resolve(blob)
+            }
+            mediaRecorder.onerror = reject
+        })
+    }
+
     /**
      * 关闭webrtc
      */