VueJ를 사용하여 srcObject를 설정하는 대체 방법s

VueJ를 사용하여 srcObject를 설정하는 대체 방법s

html 비디오 요소의 "src" 속성을 설정하는 것은 Vue.js 및 Vuex에서는 작동하지 않습니다.

<video id="myVideoEl" :src="myStreamSrc" autoplay="autoplay">

myStreamSrc의한 됩니다.

AddStream: function (state, plMyStream) {
  state.myRTCPeerConnection.addStream(plMyStream)
  state.myStreamSrc = plMyStream
}

이 코드로 애플리케이션을 실행하면, 다음의 에러가 표시됩니다.

"text/html"의 HTTP "Content-Type"은 지원되지 않습니다.미디어 리소스 http://localhost:8080/[object%20MediaStream]를 로드하지 못했습니다.

다음을 수행할 때:

state.myVideoEl = document.querySelector('#myVideoEl')
state.myVideoEl.srcObject = payloadWithMyStream

오류는 발생하지 않고 스트림이 표시됩니다.문제는 참조된 요소가 나중에 DOM에 추가되기 때문에 스니핑된 작업 코드를 사용할 수 없다는 것입니다. 요소를 div의 html video로 .v-if 결과 Vuex.로드 하지 않았기 입니다).그 결과, 「정의되어 있지 않다」라고 하는 결과가 됩니다(비디오 요소가 있는 div 요소가 페이지 로드상에 존재하지 않았기 때문입니다).

'우리'를 과 다른 점이 요?srcObject 을 합니다.src★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★srcObject에 「」가 .srcAttribute ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.

그것 수 있습니까 설정할은 를을 설정할 수 있을까요?srcObject그 비디오에서 html 속성?비디오 html 속성으로요?

자세한 내용은 Vue.js 포럼의 my theard를 참조하십시오.https://forum.vuejs.org/t/reference-elements-when-they-rendered-with-v-if/16474/13

srcObject는 html 속성이 아닌 수식자이므로 기입해야 합니다.

<video :srcObject.prop="myStreamSrc" autoplay/>

2019년 업데이트에 대해서는 Priansh Shah의 답변을 참조하십시오.

새로운 버전의 Vue를 위한 업데이트된 솔루션을 게시합니다.누군가 이 문제를 발견하고 저와 같은 오류가 발생할 경우에 대비합니다.

2019년 업데이트:

<video :src-object.prop.camel="stream">

---

첫번째 변화 번째바인드하는 것입니다 에 변경은 첫에 바인딩 하는 것이다.srcObjectv-bind을 사용하여, 여기에 속기의:v-module을 사용한 예는다음과 같습니다를 가진 예가 있습니다.

<video :srcObject.prop="stream">

하지만하지만srcObject낙타가 HTML로 그냥 낙타가 되cased이기때문에 HTML에서는 낙타cased가 됩니다로 완전히 둘러싸인 있다.srcobject가 다른 재산과 비디오를 해고하지 않을 것으로 간주된다(소문자).다른 속성으로 간주되어 비디오가 실행되지 않습니다.

만약 당신이 뷰<>2.1를 사용하는 경우 수동으로 뷰를 사용하여 출력을 내뿜는, 2.1을사용하고 있는 경우는, 를 사용해 수동으로 기동할 필요가 있습니다 하겠습니다.document.getXXXXX(...).srcObject = stream.

그러나 Vue v2.1+를 사용하는 경우 API 수식어도 있기 때문에 운이 좋습니다.

<video :src-object.prop.camel="stream">

.camel변환합니다 camel 경우 그렇게케밥케이스를낙타 케이스로 변환해서를 얻기 위해 kebab-case.srcObject우리는그반대로 하면을 반대 한다.src-object.camel. 이것과 조합하여와 이 결합.prop ★★★★★★★★★★★★★★★★★」v-bind우리는 위의 구문을 얻는다.위의 구문을 알수 있습니다.

해보셨어요?

<video v-if="myStreamSrc" id="myVideoEl" :srcObject ="myStreamSrc" autoplay="autoplay"> ?

그 이외의 경우는, 다음의 컴포넌트를 작성하는 것을 추천합니다.

var videoComponent = {
  template: '<video ref="myVideoEl" :srcObject ="myStreamSrc" autoplay="autoplay">'
  props: ['myStreamSrc']
}
Vue.component("video-component", videoComponent)

부모 템플릿 내

<video-component v-if="myStreamSrc" :myStreamSrc="myStreamSrc"></video-component>

또는 올바른 비디오소스가 로드될 때까지 false와 동일한 것으로 간주되는 srcObject 워처를 부모에 배치할 수 있습니다.이 경우 소스 타겟이 설정될 때까지 기다렸다가 동작하는 방법으로 실행할 수 있습니다.

...
watchers:{
    myStreamSrc: function (newValue, oldValue) {
      if(!oldValue && !!newValue){
        this.nextTick(function () {
          state.myVideoEl = document.querySelector('#myVideoEl')
          state.myVideoEl.srcObject = payloadWithMyStream
        })
      }
  }
}

힌트: 사용할 수 있습니다.$refs.myVideoEl대신document.querySelector('#myVideoEl')설정할 때ref="myVideoEl"html-module로 변환합니다.id="myVideoEl"이건 그냥 맛이야.

PS: 철자 검사기 없이 스택오버플로우에서 직접 코드를 작성했습니다.

내 (유사) 솔루션에 동참하고 싶었다.Vue에서는 Nuxt 프레임워크를 사용하고 있습니다.Vuex를 통한 Media Stream 설정도 잘 되지 않았습니다.웹캠이 켜져 있는 상태는 자녀 이외의 컴포넌트에서 버튼을 클릭 한 번으로 시작되며, 이 다른 컴포넌트에서는 비디오 오브젝트의 미디어스트림을 설정해야 했습니다.

버튼을 클릭했을 때 실행되는 방법에서 내 보기를 전환하고 킥오프합니다.navigator.mediaDevices나는 결국 이것을 하게 되었다(아마 가장 깨끗하지 않을 것이다).

let constraints = (window.constraints = {
        audio: false,
        video: {
          facingMode: "user"
        }
      });

      navigator.mediaDevices
        .getUserMedia(constraints)
        .then((stream) => {
          let videoTracks = stream.getVideoTracks();
          if (this.$store.state.debug) console.log("Got stream with constraints:", constraints);
          if (this.$store.state.debug) console.log("Using video device: " + videoTracks[0].label);
          stream.oninactive = function() {
            if (this.$store.state.debug) console.log("Stream inactive");
          };
          // NOTE: this is done this way because I couldnt set it via Vuex state
          document.getElementById('user-media__source').srcObject = stream;
        })
        .catch((error) => {
          if (error.name === "ConstraintNotSatisfiedError") {
            if (this.$store.state.debug) console.log(`The resolution ${constraints.video.width.exact} "x" ${constraints.video.width.exact} px is not supported by your device.`);
          } else if (error.name === "PermissionDeniedError") {
            if (this.$store.state.debug) console.log(`Permissions have not been granted to use your camera and microphone, you need to allow the page access to your devices in order for the demo to work.`);
          }
        });

소스를 설정할 필요가 있는 컴포넌트는 이미 작성/마운트되어 있기 때문에, 통상의 기동만을 실시했습니다.document.getElementById('XXXX').srcObject =내가 원하는 대로 작동했어

언급URL : https://stackoverflow.com/questions/45888111/alternative-for-setting-the-srcobject-using-vuejs