视频

liuyg

2021-08-12 f4a4c7709e09bb7c31f802ea8187d1e117efda2b

 components/submit/submit.vue

@@ -3,60 +3,39 @@
      <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')">
         <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')">
            <view class="more-list" @tap="sendImg('camera')">
               <image src="../../static/images/chatroom/camera.png"/>
               <text class="more-list-title">拍照</text>
            </view>
@@ -64,12 +43,15 @@
               <image src="../../static/images/chatroom/file.png"/>
               <text class="more-list-title">文件</text>
            </view>
            <view class="more-list"
                     @tap="chooseLocation()">
            <view class="more-list" @tap="chooseLocation()">
               <image src="../../static/images/chatroom/location.png"/>
               <text class="more-list-title">位置</text>
            </view>
            <view class="more-list">
            <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>
@@ -77,11 +59,9 @@
      </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>
@@ -96,6 +76,7 @@
   const recorderManager = uni.getRecorderManager()
   
   export default {
      props: ['names'],
      data() {
         return {
            isrecord: 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>
@@ -326,6 +342,7 @@
      }
      
   }

   .displaynone {
      display: none;
   }
@@ -371,6 +388,7 @@
         }
      }
   }

   .more {
      width: 100%;
      height: 436rpx;
@@ -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;