중간 발표에서 언급한 아이템

• 얼굴에 스티커 붙이기
• 테두리 꾸미기
• 화면 변조(왜곡 등) ColorFace
• 목소리 변조 PitchVocie
• 강제 음소거 MuteVocie
• 다른 사람 얼굴로 바꾸기
• 다른 사람 얼굴로 뒤덮기 CoverFace
• 감정분석(FACE API) FaceEmotion
• 화면 뒤집기 VerticalFlip

선행되어야 하는 기능 : 출석 or 게임 승리시 user에게 일정 point를 부여 해줌

고려했던 아이템 자리 6칸

1. 자기 자신에게 아이템을 사용

   1. 아이템 shop버튼에서 클릭시 socket 클라이언트에서 아이템 사용 요청을 보냄
   2. 클릭한 user의 point정보를 확인한 뒤에 사용이 가능 여부 판단
      • 사용 가능할 경우
        • 아이템 함수를 통해서 사용자의 화면에 아이템을 적용
        • 아이템이 적용된 화면을 다같이 볼 수있어야함
      • 사용 불가능할 경우
        • (경고 메시지 띄워줌) 포인트가 부족해서 아이템을 사용할 수 없음 메시지

2. 타인에게 아이템 사용

   1. 1번과 같음
   2. 1번과 같음
      • 사용 가능할 경우
        • 어떤 사람에게 아이템을 적용할 것인지 (음소거)
          • 아이템 적용할 사람을 선택하고(webcam에 클릭 이벤트 적용)
          • 그 사람의 오디오에 음소거를 적용
          • 한 턴이니까 턴이 바뀔 때 리셋되게 하거나 timer을 먹여야함
        • 어떤 사람 얼굴로 뒤덮을건지(얼굴 뒤덮기)
          • 사람을 선택하고 모든 video의 user를 선택한 사람으로 변경해줌
          • 이것도 턴이 바뀔 때 리셋 처리 해야함
        • 누구의 표정을 분석할건지(감정분석)
          • 사람을 선택하고 FACE API Face Expression Recognition
        • 난리났네 보류
      • 사용 불가능경우
        • 1번과 같음

   ⇒ 아이템 중복 사용 안되도록, 아이템 사용 중에 버튼 비활성화

   ⇒ 아예 show false로 꺼버리는 것도 괜찮을 듯

   빈자리에다가

   ⇒ (자신에게 아이템 사용) 빈 칸에 “자신에게 아이템 A를 사용했습니다” ,

   ⇒ (타인에게 아이템 사용) “B 에게 아이템 C를 사용했습니다”

   ⇒ (거짓말 탐지 결과) “D는 거짓말을 하고 있습니다 !”

   아이템 case / fileters app.js에서

   • 얼굴 뒤집기 : Rotation
   • 음성 변조 : Pitch 20정도 주니까 변조한 느낌이 남
   • 얼굴 색 변경 : Chroma or Grayscale 변경해서 사용하면 될듯

   filter type & option 골라서 filter에 저장

   function applyFilter() {
   	var filter = { type: '', options: {} };
   	var type = $('input[name=filter]:checked').val();
   	switch (type) {
   		// 회색화면
   		case 'Grayscale':
   			filter.type = 'GStreamerFilter';
   			filter.options = { "command": "videobalance saturation=0.0" };
   			break;
   		// 뒤집기
   		case 'Rotation':
   			filter.type = 'GStreamerFilter';
   			filter.options = { "command": "videoflip method=vertical-flip" };
   			break;
   		// 음성변조
   		case 'Pitch':
   			filter.type = 'GStreamerFilter';
   			filter.options = { "command": "pitch pitch=20" };
   			break;
   		// 테두리
   		case 'Videobox':
   			filter.type = 'GStreamerFilter';
   			filter.options = { "command": "videobox fill=black top=-30 bottom=-30 left=-30 right=-30" };
   			break;
   		// 화면 색 왜곡
   		case 'Chroma':
   			filter.type = 'GStreamerFilter';
   			filter.options = { "command": 'chromahold target-r=0 target-g=0 target-b=255 tolerance=90' };
   			break;
   	}
   }
   

   selectedStreamManager.stream.applyFilter(filter.type, filter.options)
   

   function removeFilter() {
   	selectedStreamManager.stream.removeFilter();
   }
   

   • Face API적용시- OvVideo.vue

   기본 OvVideo

   <template>
   	<video autoplay/>
   </template>
   
   <script>
   export default {
   	name: 'OvVideo',
   
   	props: {
   		streamManager: Object,
   	},
   
   	mounted () {
   		this.streamManager.addVideoElement(this.$el);
   	},
   };
   </script>
   

   FaceAPI적용

   <video ref="myWebCam"/>
   
   

   const state = reactive({
         detections: null,
         myEmotion: '',
         lie: false,
         emotions: {
           angry: 0,
           disgusted: 0,
           fearful: 0,
           happy: 0,
           neutral: 0,
           sad: 0,
           surprised: 0,
         },
       })
   

   state.detections = await faceapi.detectSingleFace(myWebCam.value, new faceapi.TinyFaceDetectorOptions())
             .withFaceExpressions()
   

   onMounted(async () => {
         props.streamManager.addVideoElement(myWebCam.value)
         await faceapi.nets.tinyFaceDetector.load('..경로')
         await faceapi.nets.faceExpressionNet.load('..경로')
       })
   

   기존 FaceAPI 적용 코드에서는 emotion의 합이 3이상이면 거짓말이라고 탐지하였음

   itemshop

   @click =“FaceEmotion()”

   faceEmotionstate = true

   ⇒ vuex에서 상태관리하고 watch로 받아줌

   ⇒ store에 item 모듈 생성