{"id":5249,"date":"2021-07-11T20:24:24","date_gmt":"2021-07-11T11:24:24","guid":{"rendered":"https:\/\/greentown.tokyo\/?p=5249"},"modified":"2021-12-23T02:51:05","modified_gmt":"2021-12-22T17:51:05","slug":"vue-js-3-camera","status":"publish","type":"post","link":"https:\/\/greentown.tokyo\/?p=5249","title":{"rendered":"Vue.js 3 \u3067\u30ab\u30e1\u30e9\u3092\u4f7f\u3046"},"content":{"rendered":"\n

2021\/12\/23 \u8ffd\u8a18\uff1a<\/strong>\u5b9f\u306f\u3082\u3063\u3068\u826f\u3044\u3084\u308a\u304b\u305f\u304c\u3042\u3063\u305f\u3002video\u30bf\u30b0\u3092\u4f7f\u308f\u305ainput\u3067\u3044\u3051\u308b\u3002\u3053\u3093\u3069\u8a18\u4e8b\u3092\u66f8\u3053\u3046\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n

\u3067\u306f\u672c\u7de8<\/p>\n

\u64ae\u5f71\u30a2\u30d7\u30ea\u306a\u3089Flutter\u3067\u3084\u308c\u3070\u3044\u3044\u306e\u3067\u306f\uff1f\u3068\u601d\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u9ad8\u9f62\u8005\u5411\u3051\u306e\u30a2\u30d7\u30ea\u306a\u306e\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u4e0d\u8981\u306eWeb\u30a2\u30d7\u30ea\u3067\u5b9f\u88c5\u3057\u307e\u3057\u3087\u3046\uff01\u3068\u3046\u65b9\u5411\u3067\u3001\u5199\u771f\u30a2\u30d7\u30ea\u3092\u958b\u767a\u3057\u3066\u307e\u3059\u3002<\/p>\n

\u3044\u3061\u306b\u3061\u30cf\u30de\u3063\u305f\u306e\u3067\u30e1\u30e2\u3002<\/p>\n

\u7d50\u679c📷<\/p>\n

\"\"<\/a><\/p>\n

ref\u3092\u4f7f\u3063\u305f\u65b9\u6cd5\u3067\u5b9f\u88c5\u3059\u308b<\/h2>\n

\u5148\u65e5\u304b\u3089 $refs<\/span> \u3092 vue.js3<\/span> \u3067\u66f8\u304f\u65b9\u6cd5\u306b\u82e6\u3057\u3081\u3089\u308c\u3066\u305f\u306e\u3067\u3059\u304c\u3001\u7406\u89e3\u3057\u305f\u3002\u305f\u3076\u3093\u3002<\/span><\/p>\n

Template Refs<\/a> \u3092\u307f\u3066\u3082\u308f\u304b\u3089\u306a\u304b\u3063\u305f\u306e\u3060\u3088\u306d..\uff08\u3042\u304b\u3093..\u307e\u305f\u3001\u5f37\u5f37\u30a8\u30f3\u30b8\u30cb\u30a2\u306b\u52a9\u3051\u3066\u3082\u3089\u3063\u305f\u306e\u3067\u3057\u305f..\uff09<\/p>\n\n\n\n

<template>\n  <div class="camera">\n    <video ref="video" autoplay width="300" height="200"><\/video>\n  <\/div>\n<\/template>\n\n<script lang="ts">\nimport { defineComponent, onMounted, ref } from "vue";\n\nexport default defineComponent({\n  name: "Camera",\n\n  setup() {\n    const video = ref()\n\n    onMounted(() => {\n      if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {\n        navigator.mediaDevices.getUserMedia({\n          video: true,\n          audio: false,\n        }).then(stream => {\n          if (video.value && video.value !== null) {\n            video.value.srcObject = stream;\n            video.value.play()\n          }\n        });\n      }\n    });\n\n    return {\n      video,\n    };\n  },\n})\n<\/script><\/code><\/pre><\/div>\n\n\n\n
ref\u3092\u4f7f\u308f\u305a\u306b\u5b9f\u88c5\u3059\u308b<\/h2>\n\n\n\n
\u3053\u3061\u3089\u306f\u3001\u5b8c\u5168\u306b\u3053\u3053\u306e<\/a>\u5199\u7d4c\u306a\u306e\u3067\u3059\u304c..<\/p>\n\n\n\n
<template>\n  <div class="camera">\n    <video v-if="captureStream"\n      :srcObject.prop="captureStream"\n      id="video"\n      autoplay\n      playsinline\n      muted\n    ><\/video>\n  <\/div>\n<\/template>\n\n<script lang="ts">\nimport { defineComponent } from "vue";\n\nexport default defineComponent({\n  name: "Camera",\n\n  setup() {\n    const captureStream = ref<MediaStream | undefined>();\n\n    const constraints: MediaStreamConstraints = {\n      video: true,\n      audio: false,\n    }\n\n    const gotStream = (stream: MediaStream) => {\n      captureStream.value = stream;\n    }\n\n    const handleError = (error: Error) => {\n      console.error(error.name, error.message);\n    }\n    \n    navigator.mediaDevices\n      .getUserMedia(constraints)\n      .then(gotStream)\n      .catch(handleError);\n\n    return {\n      captureStream\n    };\n  },\n})\n<\/script>\n<\/code><\/pre><\/div>\n\n\n\n
\u4eca\u56de\u306fref\u3092\u4f7f\u3063\u305f\u65b9\u6cd5\u3092\u63a1\u7528\u3057\u307e\u3057\u305f\u3002<\/p>\n
\u6b21\u306f\u64ae\u5f71\u6a5f\u80fd\u3060\u301c📷<\/p>\n
\u53c2\u8003\uff1a<\/p>\n
\u3044\u308d\u3044\u308d\u5f98\u5f8a\u3057\u305f..<\/p>\n
https:\/\/v3.vuejs.org\/guide\/composition-api-template-refs.html#usage-with-jsx<\/a><\/p>\n
https:\/\/qiita.com\/kino15\/items\/8f8feffca54015555f4b<\/a><\/p>\n
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/dt>\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t
Vue3 + WebRTC \u3067\u30d6\u30e9\u30a6\u30b6\u304b\u3089\u30ab\u30e1\u30e9\u3092\u6271\u3046\u7c21\u5358\u306a\u30c7\u30e2\u306e\u7d39\u4ecb – \u30c6\u30b3\u30c6\u30c3\u30af\u958b\u767a\u8005\u30d6\u30ed\u30b0<\/p>\r\n\t\t\t\t\t\t\t\t\t
\u3053\u3093\u306b\u3061\u306f\u3002\u30d6\u30ed\u30c3\u30af\u30c1\u30a7\u30fc\u30f3\u4e8b\u696d\u90e8\u306e\u718a\u8c37\u3067\u3059\u3002 \u666e\u6bb5\u306fWeb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306b\u643a\u308f\u3063\u3066\u3044\u307e\u3059\u3002 \u3068\u3042\u308b\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067WebRTC\u3068\u3044\u3046\u3001Web\u30d6\u30e9\u30a6\u30b6\u304b\u3089\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u901a\u4fe1\u3092\u884c\u3046\u3053\u3068 … <\/p><\/div>\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t<\/span>tec.tecotec.co.jp<\/span>\r\n\t\t\t\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/dd>\r\n\t\t\t\t\t\t\t<\/dl>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/a>\r\n\t\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t<\/p>\n
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/dt>\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t
javascript Web\u30ab\u30e1\u30e9\u306bWeb API\u3092\u4f7f\u7528\u3057\u3066\u30a2\u30af\u30bb\u30b9\u3059\u308b<\/p>\r\n\t\t\t\t\t\t\t\t\t
javascript\u3067\u3001navigator.mediaDevices\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306egetUserMedia\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001Web\u30ab\u30e1\u30e9\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3092\u63b2\u8f09\u3057\u3066\u307e\u3059\u3002\u30d6\u30e9\u30a6\u30b6\u306fchro … <\/p><\/div>\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t<\/span>mebee.info<\/span>\r\n\t\t\t\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/dd>\r\n\t\t\t\t\t\t\t<\/dl>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/a>\r\n\t\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"
<template> <div class="camera"> <video ref="video" autoplay width … <\/p>\n","protected":false},"author":1,"featured_media":5253,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[106],"tags":[],"class_list":["post-5249","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue-js"],"_links":{"self":[{"href":"https:\/\/greentown.tokyo\/index.php?rest_route=\/wp\/v2\/posts\/5249"}],"collection":[{"href":"https:\/\/greentown.tokyo\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/greentown.tokyo\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/greentown.tokyo\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/greentown.tokyo\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5249"}],"version-history":[{"count":11,"href":"https:\/\/greentown.tokyo\/index.php?rest_route=\/wp\/v2\/posts\/5249\/revisions"}],"predecessor-version":[{"id":5460,"href":"https:\/\/greentown.tokyo\/index.php?rest_route=\/wp\/v2\/posts\/5249\/revisions\/5460"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/greentown.tokyo\/index.php?rest_route=\/wp\/v2\/media\/5253"}],"wp:attachment":[{"href":"https:\/\/greentown.tokyo\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/greentown.tokyo\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/greentown.tokyo\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}