添加 rtc 测试代码

weiyuc · May 7, 2018 · 5b95838 · 5b95838
1 parent d7ccdae
commit 5b95838
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 2 deletions.
diff --git a/src/router/index.js b/src/router/index.js
@@ -13,6 +13,7 @@ import NearbyPeople from '@/views/NearbyPeople'
 import AddNearbyPeople from '@/views/AddNearbyPeople'
 
 import ImgUpload from '@/components/ImageUpload'
+import TestRtc from '@/views/TestRtc'
 
 import store from '../store'
 
@@ -85,6 +86,11 @@ const router = new Router({
       path: '/imgUpload',
       name: 'imgUpload',
       component: ImgUpload
+    },
+    {
+      path: '/testRtc',
+      name: 'testRtc',
+      component: TestRtc
     }
   ]
 })
@@ -108,7 +114,7 @@ function subscribe() {
   }
 }
 
-const un_check_url = ['/login', '/register']
+const un_check_url = ['/login', '/register', '/testRtc']
 
 router.beforeEach((to, from, next) => {
   if (!~un_check_url.indexOf(to.fullPath)) {
@@ -139,4 +145,4 @@ router.beforeEach((to, from, next) => {
   }
 })
 
-export default router;
+export default router
diff --git a/src/views/TestRtc.vue b/src/views/TestRtc.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    test web rtc
+  </div>
+</template>
+<script>
+  export default {
+    name: 'test-rtc',
+    data() {
+      return {
+        recorder: null,
+        mediaStream: null,
+        recorderFile: null,
+        stopRecordCallback: function () {
+        }
+      }
+    },
+    methods: {
+      getUserMedia(callback) {
+        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
+          || navigator.msGetUserMedia || window.getUserMedia
+        const constraints = {audio: true}
+        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+          navigator.mediaDevices.getUserMedia(constraints).then(
+            stream => {
+              callback(false, stream)
+            },
+            err => {
+              console.error(err)
+              callback(err)
+            }
+          )
+        } else if (navigator.getUserMedia) {
+          navigator.getUserMedia(constraints, stream => {
+            callback(false, stream)
+          }, err => {
+            callback(err)
+          })
+        } else {
+          callback(new Error('Not support userMedia'))
+        }
+      },
+      closeStream(stream) {
+        if (typeof stream.stop === 'function') {
+          stream.stop();
+        }
+        else {
+          let trackList = [stream.getAudioTracks(), stream.getVideoTracks()];
+
+          for (let i = 0; i < trackList.length; i++) {
+            let tracks = trackList[i];
+            if (tracks && tracks.length > 0) {
+              for (let j = 0; j < tracks.length; j++) {
+                let track = tracks[j];
+                if (typeof track.stop === 'function') {
+                  track.stop();
+                }
+              }
+            }
+          }
+        }
+      },
+      startRecord() {
+        this.getUserMedia((err, stream) => {
+          if (err) {
+            throw err
+          }
+          this.recorder = new MediaRecorder(stream)
+          this.mediaStream = stream
+          let chunks = []
+          this.recorder.ondataavailable = function (e) {
+            chunks.push(e.data);
+          }
+          this.recorder.onstop = () => {
+            this.recorderFile = new Blob(chunks, {type: this.recorder.mimeType})
+            chunks = []
+            if (null !== this.stopRecordCallback) {
+              this.stopRecordCallback()
+            }
+          }
+          this.recorder.start()
+        })
+      },
+      stopRecord(callback) {
+        this.stopRecordCallback = callback
+        this.recorder.stop()
+        this.closeStream(this.mediaStream);
+      },
+      playRecord() {
+        let url = URL.createObjectURL(this.recorderFile)
+        let dom = document.createElement('video')
+        dom.src = url
+        document.body.appendChild(dom)
+        dom.play()
+      }
+    },
+    created() {
+      this.startRecord()
+      setTimeout(() => {
+        this.stopRecord(() => {
+          this.playRecord()
+        })
+      }, 5000)
+    }
+  }
+</script>