视频

liuyg

2021-08-12 f4a4c7709e09bb7c31f802ea8187d1e117efda2b

 components/submit/submit.vue

@@ -3,85 +3,65 @@
      <view class="submit">
         <view class="submit-chat">
            <view class="bt-img">
               <image src="../../static/images/chatroom/voice.png" 
                         mode=""
                         @tap="records"/>
               <image src="../../static/images/chatroom/voice.png" mode="" @tap="records" />
            </view>
            <textarea auto-height="true" 
                           class="chat-send btn" 
                           :class="{displaynone: isrecord}"
                           @input="inputs"
                           v-model="msg"
                           @focus="focus"/>
            <view class="record btn"
                     :class="{displaynone: !isrecord}"
                     @touchstart="touchstart"
                     @touchend="touchend"
                     @touchmove="touchmove"
                     >
            <textarea auto-height="true" class="chat-send btn" :class="{displaynone: isrecord}" @input="inputs"
               v-model="msg" @focus="focus" />
            <view class="record btn" :class="{displaynone: !isrecord}" @touchstart="touchstart" @touchend="touchend"
               @touchmove="touchmove">
               按住说话
            </view>
            <view class="bt-img">
               <image src="../../static/images/chatroom/emoji.png" 
                         mode=""
                         @tap="emoji"/>
               <image src="../../static/images/chatroom/emoji.png" mode="" @tap="emoji" />
            </view>
            <view class="bt-img">
               <image src="../../static/images/chatroom/add.png" 
                         mode=""
                         @tap="more"/>
               <image src="../../static/images/chatroom/add.png" mode="" @tap="more" />
            </view>
         </view>
         <view class="emoji"
                  :class="{ displaynone: !isemoji }">
         <view class="emoji" :class="{ displaynone: !isemoji }">
            <view class="emoji-send">
               <view class="emoji-send-del"
                        @tap="emojiBack">
                        删除
               <view class="emoji-send-del" @tap="emojiBack">
                  删除
               </view>
               <view class="emoji-send-bt"
                        @tap="emojiSend">
                        发送
               <view class="emoji-send-bt" @tap="emojiSend">
                  发送
               </view>
            </view>
            <emoji @emotion="emotion"
                      :height="260" />
            <emoji @emotion="emotion" :height="260" />
         </view>
			
         <view class="more"
                  :class="{ displaynone: !ismore }">
            <view class="more-list" 
                     @tap="sendImg('album')">
               <image src="../../static/images/chatroom/photo.png"/>

         <view class="more" :class="{ displaynone: !ismore }">
            <view class="more-list" @tap="sendImg('album')">
               <image src="../../static/images/chatroom/photo.png" />
               <text class="more-list-title">图片</text>
            </view>
            <view class="more-list"
                     @tap="sendImg('camera')">
               <image src="../../static/images/chatroom/camera.png"/>
            <view class="more-list" @tap="sendImg('camera')">
               <image src="../../static/images/chatroom/camera.png" />
               <text class="more-list-title">拍照</text>
            </view>
            <view class="more-list">
               <image src="../../static/images/chatroom/file.png"/>
               <image src="../../static/images/chatroom/file.png" />
               <text class="more-list-title">文件</text>
            </view>
            <view class="more-list"
                     @tap="chooseLocation()">
               <image src="../../static/images/chatroom/location.png"/>
            <view class="more-list" @tap="chooseLocation()">
               <image src="../../static/images/chatroom/location.png" />
               <text class="more-list-title">位置</text>
            </view>
            <view class="more-list">
               <image src="../../static/images/chatroom/vedio.png"/>
            <view class="more-list" @click="openAudio('Mains')">
               <image src="../../static/images/chatroom/phone.png" />
               <text class="more-list-title">语音</text>
            </view>
            <view class="more-list" @click="openVideo('Mains')">
               <image src="../../static/images/chatroom/vedio.png" />
               <text class="more-list-title">视频</text>
            </view>
         </view>
      </view>
		

      <!-- 录制语音遮罩 -->
      <view class="voice-bg"
               :class="{displaynone: !voicebg}">
      <view class="voice-bg" :class="{displaynone: !voicebg}">
         <view class="voice-bg-len">
            <view class="voice-bg-time"
                     :style="{width:vlength/0.6 + '%'}">
            <view class="voice-bg-time" :style="{width:vlength/0.6 + '%'}">
               {{ vlength }} "
            </view>
         </view>
@@ -92,10 +72,11 @@

<script>
   import emoji from './emoji/emoji.vue'
	

   const recorderManager = uni.getRecorderManager()
	

   export default {
      props: ['names'],
      data() {
         return {
            isrecord: false,
@@ -108,10 +89,10 @@
            pageY: 0,
         };
      },
      components:{
      components: {
         emoji,
      },
      methods:{
      methods: {
         // 获取高度
         _getElementHeight() {
            const query = uni.createSelectorQuery().in(this);
@@ -154,34 +135,34 @@
         inputs(e) {
            let chatm = e.detail.value
            let pos = chatm.indexOf('\n')
            if(pos != -1 && chatm.length > 1) {
               this.send(this.msg,0)
            }
            setTimeout(() => {
               this._getElementHeight()
            },10)
         },
         // 输入框聚焦
         focus(){
            this.isemoji = false;
            this.ismore = false;
            setTimeout(() => {
               this._getElementHeight()
            },10)
         },
         // 表情内发送
         emojiSend() {
            if(this.msg.length > 0) {
            if (pos != -1 && chatm.length > 1) {
               this.send(this.msg, 0)
            }
            setTimeout(() => {
               this._getElementHeight()
            },10)
            }, 10)
         },
         // 输入框聚焦
         focus() {
            this.isemoji = false;
            this.ismore = false;
            setTimeout(() => {
               this._getElementHeight()
            }, 10)
         },
         // 表情内发送
         emojiSend() {
            if (this.msg.length > 0) {
               this.send(this.msg, 0)
            }
            setTimeout(() => {
               this._getElementHeight()
            }, 10)
         },
         // 表情退格
         emojiBack() {
            if(this.msg.length > 0){
               this.msg = this.msg.substring(0, this.msg.length-1)
            if (this.msg.length > 0) {
               this.msg = this.msg.substring(0, this.msg.length - 1)
            }
         },
         // 发送消息
@@ -196,14 +177,14 @@
            }, 0)
            setTimeout(() => {
               this._getElementHeight()
            },10)
            }, 10)
         },
         // 发送图片
         sendImg(e) {
            let count = 9;
            if(e == 'album') {
            if (e == 'album') {
               count = 9
            }else {
            } else {
               count = 1
            }
            uni.chooseImage({
@@ -212,14 +193,14 @@
               sourceType: [e],
               success: (res) => {
                  const filePath = res.tempFilePaths
                  for (let i in filePath){
                  for (let i in filePath) {
                     this.send(filePath[i], 1)
                  }
               }
            })
            setTimeout(() => {
               this._getElementHeight()
            },10)
            }, 10)
         },
         // 音频处理
         touchstart(e) {
@@ -230,7 +211,7 @@
            this.timer = setInterval(() => {
               this.vlength = startIndex
               startIndex++
               if(startIndex > 60) {
               if (startIndex > 60) {
                  clearInterval(this.timer)
                  this.touchend();
               }
@@ -245,15 +226,15 @@
                  voice: res.tempFilePath,
                  time: this.vlength
               }
               if(this.voicebg){
               if (this.voicebg) {
                  this.send(data, 2);
               }					
               }
               this.vlength = 0
               this.voicebg = false
            })
         },
         touchmove(e) {
            if(this.pageY - e.changedTouches[0].pageY > 200) {
            if (this.pageY - e.changedTouches[0].pageY > 200) {
               this.voicebg = false
            }
         },
@@ -274,7 +255,42 @@
                  console.log('经度' + res.longitude)
               }
            })
         },
         //开始音频
         openAudio(val) { //Mains
            // console.log(this.names)
            uni.navigateTo({
               url: '../videoCall/videoCall?state=' + val + '&type=audio'
            });
         },
         //接收音频
         receiveAudio(val) { //Receiver
            uni.navigateTo({
               url: '../videoCall/videoCall?state=' + val + '&type=audio'
            });
         },
         //开始视频
         openVideo(val) { //Mains
            uni.navigateTo({
               url: '../videoCall/videoCall?state=' + val + '&type=video' + '&myname=' + this.names[0] +
                  '&toname=' + this.names[1]
            });
         },
         //接收视频
         receiveVideo(val, room) { //Receiver
            uni.navigateTo({
               url: '../videoCall/videoCall?state=' + val + '&type=video' + '&room=' + room
            });
         }
      },
      mounted() {
         // uni.onSocketMessage(function(res) {
         //    console.log(res.data)
         //    if (res.data.type == 'video') {
         //       this.receiveVideo('Receiver', );
         //    }
         //    // console.log('收到服务器内容：' + res.data);
         // });
      }
   }
</script>
@@ -290,21 +306,21 @@
      z-index: 1002;
      padding-bottom: env(safe-area-inset-bottom);
   }
	

   .submit-chat {
      width: 100%;
      display: flex;
      align-items: flex-end;
      box-sizing: border-box;
      padding: 14rpx 10rpx;
		

      image {
         width: 56rpx;
         height: 56rpx;
         margin: 0 10rpx;
         flex: auto;
      }
		

      .btn {
         flex: auto;
         background-color: #fff;
@@ -313,29 +329,30 @@
         max-height: 160rpx;
         margin: 0 10rpx;
      }
		

      .chat-send {
         line-height: 44rpx !important;
      }
		

      .record {
         text-align: center;
         font-size: $uni-font-size-lg;
         color: $uni-text-color-grey;
         font-weight: bold;
      }
		

   }

   .displaynone {
      display: none;
   }
	

   .emoji {
      width: 100%;
      height: 460rpx;
      background: rgba(236, 237, 238, 1);
      box-shadow: 0 -1rpx 0 0 rgba(0, 0, 0, 1);
		

      .emoji-send {
         width: 260rpx;
         height: 104rpx;
@@ -345,19 +362,19 @@
         right: 0;
         padding-top: 24rpx;
         display: flex;
			

         .emoji-send-bt {
            flex: 1;
            height: 80rpx;
            margin: 0 32rpx 0 20rpx;
            background: rgba(255, 228, 49 ,1);
            background: rgba(255, 228, 49, 1);
            border-radius: 240rpx;
            font-size: 32rpx;
            text-align: center;
            line-height: 80rpx;
            border-radius: 12rpx;
         }
			

         .emoji-send-del {
            flex: 1;
            height: 80rpx;
@@ -371,6 +388,7 @@
         }
      }
   }

   .more {
      width: 100%;
      height: 436rpx;
@@ -379,7 +397,7 @@
      bottom: env(safe-area-inset-bottom);
      padding: 0 20rpx;
      box-sizing: border-box;
		

      .more-list {
         width: 25%;
         text-align: center;
@@ -393,7 +411,7 @@
            background: rgba(255, 255, 255, 1);
            border-radius: 24rpx;
         }
			

         .more-list-title {
            color: rgba(30, 40, 50, .5);
            line-height: 34rpx;
@@ -402,7 +420,7 @@
         }
      }
   }
	

   .voice-bg {
      height: 100%;
      width: 100%;
@@ -412,7 +430,7 @@
      bottom: 0;
      z-index: 1001;
      // position: relative;
		

      .voice-bg-len {
         height: 84rpx;
         width: 600rpx;
@@ -425,6 +443,7 @@
         background: rgba(255, 255, 255, .2);
         border-radius: 42rpx;
         text-align: center;

         .voice-bg-time {
            display: inline-block;
            line-height: 84rpx;
@@ -433,15 +452,15 @@
            min-width: 120rpx;
         }
      }
		

      .voice-del {
         position: absolute;
         bottom: 148rpx;
         margin-bottom: env(safe-area-inset-bottom);
         width: 100%;
         text-align: center;
          color: #fff;
          font-size: $uni-font-size-base;
         color: #fff;
         font-size: $uni-font-size-base;
      }
   }
</style>