webrtc vue3 demo备忘

1.如果vue工程不单独部署而是和java端集成，指定vite.config.js的base路径，并在java端的static目录下建base命名的文件夹，将编译后的assets文件夹和favicon.ico复制过去。

2.nginx里的websocket配置（proxy_pass是http协议）：
  location ^~ /rtc/websocket {
            proxy_pass http://localhost:8081/websocket;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
    }
 
 3.打开摄像头需要https页面，在https页面里发出的请求也必须是https或wss的，所以演示环境是需要配置https证书的。nginx的配置：
    listen       443 ssl;
    server_name  localhost;

    ssl_certificate      server-ssl.crt;
    ssl_certificate_key  server.key;
    
 4.在vue3 的setup 下获取模板中的标签对象，比如video audio等对象需要用ref方式
    <video ref="localVideo" autoplay playsinline></video>
    const localVideo = ref()
    使用时：localVideo.value.srcObject = stream;
    
 5.在vue3中双向绑定的对象需要用reactive
   const param = reactive({
        name: 'caller',
        peer: 'callee',
    })
    
 6.在浏览器端录制的视频、音频、抓图 等对象可以通过BLOB的方式上传或下载
    var debug = {hello: "world"};
    var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
    var file2 = new File([blob], 'a.txt', {type: 'text/plain;charset=utf-8'})
    var formData = new FormData()
    formData.append('file', file2)
    var param = {
        url: 'https://192.168.1.9:8082/rtc/upload',
        method: 'post',
        data: formData,
    }

 7.vue3 setup 中引入生命周期函数
    import { onBeforeUnmount } from 'vue';
    onBeforeUnmount(() => {
      socket.disconnect()
    });