{"_id":"5bec8a15287d1b00426efde5","category":{"_id":"5bec8a15287d1b00426efdcc","project":"578c4badbd223d2000cc1441","version":"5bec8a15287d1b00426efe54","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2018-05-24T22:56:57.395Z","from_sync":false,"order":5,"slug":"enhanced-scenes","title":"Enhanced Scenes"},"project":"578c4badbd223d2000cc1441","parentDoc":null,"user":"578c4a62bd223d2000cc143e","version":{"_id":"5bec8a15287d1b00426efe54","project":"578c4badbd223d2000cc1441","__v":0,"forked_from":"5ba2b5747091250003437507","createdAt":"2018-04-23T20:03:35.726Z","releaseDate":"2018-04-23T20:03:35.726Z","categories":["5bec8a15287d1b00426efdc6","5bec8a15287d1b00426efdc7","5bec8a15287d1b00426efdc8","5bec8a15287d1b00426efdc9","5bec8a15287d1b00426efdca","5bec8a15287d1b00426efdcb","5bec8a15287d1b00426efdcc","5bec8a15287d1b00426efdcd","5bec8a15287d1b00426efdce"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.12.0","version":"2.12.0"},"githubsync":"","__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-07-18T18:29:46.178Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"Viro supports various components for displaying video. Video can be displayed in 360 degrees, surrounding the user, or on a flat plane, simulating a physical video screen.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Video Screen\"\n}\n[/block]\nThe ```<ViroVideo>``` component can be used to display video on a 2D screen. Like all UI elements, you specify the position in world space. You can also set the width and height of the screen, and set the video via the ```source``` attribute, as shown in the example below.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroVideo\\n    source={require('./video/myvid.mp4')}\\n    height={2}\\n    width={2}\\n    loop={true}\\n    position={[0,2,-5]}\\n />\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nSupported video formats are .mov, .mp4, .mpv, and .3gp. The video source may be a remote URL or a local file resource. To invoke with a remote URL, set the source to a URI. For example, ```{uri:\"http://example.org/myvideo.mp4\"}```. To invoke with a local file resource, use require: ```require('./myvideo.mp4');```. \n\nFor a full list of properties, refer to the [ViroVideo](doc:virovideo-2-compare) reference.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"360 Video\"\n}\n[/block]\nSpherical videos that surround the user can be displayed via the ```<Viro360Video>``` component. These videos are displayed as a [scene background](doc:scenes#scene-backgrounds) , behind all other UI elements.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<Viro360Video\\n    source={require(\\\"./video/myvideo.mp4\\\")}\\n    onFinish={this._onFinish}\\n    loop={false} \\n/>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nAs with 2D videos, 360 video sources may be remote URLs or local file resources. For a full list of properties, refer to the [Viro360Video](doc:viro360video-1) reference.\n[block:api-header]\n{\n  \"title\": \"Alpha Video (Chroma Key Filtering)\"\n}\n[/block]\nViro supports rendering partially transparent video over any VR, AR, or 3D scene. For AR scenes in particular, this enables \"hologram\" type experiences like [Will.I.Am on CNN](https://www.youtube.com/watch?v=68-bjoF1Vdk) or [Princess Leia in Star Wars](https://www.youtube.com/watch?v=tf-1xeE3zzE).\n\nAlpha video works via \"chroma key filtering\". Chroma key filtering removes (makes transparent) all colors from a video that are within an epsilon range of a target color. This technique is useful when rendering \"green screen\" or \"blue screen\" videos, as is commonly seen in newscasting and motion pictures. The videos in their raw form look something like the image below.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/8689ced-alpha.png\",\n        \"alpha.png\",\n        1546,\n        1012,\n        \"#04d304\"\n      ]\n    }\n  ]\n}\n[/block]\nThe code below shows how to enable chroma-key filtering, by setting the ```chromaKeyFilteringColor``` property on the ```<ViroMaterial>``` being used by the ```<ViroVideo>```.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"render: function() {\\n  return (\\n    <ViroScene>\\n       <ViroVideo source={require('./video/myvid.mp4')}\\n                  height={2} width={2}\\n                  loop={true}\\n                  position={[0, 2, -5]}\\n                  materials={[\\\"chromaKeyFilteredVideo\\\"]}\\n       />\\n    </ViroScene>\\n  );\\n},\\n\\n...\\n \\nViroMaterials.createMaterials({\\n  chromaKeyFilteredVideo : {\\n    chromaKeyFilteringColor: \\\"#00FF00\\\"\\n  },\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Manipulating Video\"\n}\n[/block]\nBoth the ```<ViroVideo>``` and ```<Viro360Video>``` components enable you to:\n* Adjust volume via the ```volume``` property\n* Mute the video via the ```muted``` property\n* Pause the video by setting the ```paused``` property\n* Seek the video to a specific time in seconds by invoking the ```seekToTime(time)``` method\n\nYou can also respond to various callbacks:\n* ```onFinish``` is invoked when a video finishes playing (if looping, this is invoked at the end of each loop)\n* ```onUpdateTime``` is invoked every second with the current time transpired in the video, and\n* ```onError``` is called when we encounter an error loading or playing the video.\n\nThe following example illustrates these features.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var VIDEO_REF = \\\"videoref\\\";\\n\\nvar VideoTest = React.createClass({\\n  getInitialState() {\\n    return {\\n      muteVideo: true,\\n      volume: 1,\\n    }\\n  },\\n  \\n  render: function() {\\n    <ViroScene>\\n      <Viro360Video\\n          ref={VIDEO_REF}\\n          paused={false}\\n          source={require('./res/test-video.mp4'}\\n          loop={true} \\n          muted={this.state.muteVideo} \\n          volume={this.state.volume}\\n          onFinish={this._onVideoFinished} \\n          onUpdateTime={this._onUpdateTime}\\n          onError={this._onVideoError} />   \\n      />\\n                           \\n      <ViroText position={[2, -2, -5])} text=\\\"Restart\\\"\\n                onClick={this._restartVideo} \\n                transformBehaviors={[\\\"billboard\\\"]}/>\\n    </ViroScene>\\n  },\\n  \\n  _onVideoFinished(){\\n    console.log(\\\"Video finished!\\\");\\n  },\\n  _onUpdateTime(current, total){\\n    console.log(\\\"Video time update, current: \\\" + current + \\\", total: \\\" + total);\\n  },\\n  _onVideoError(event) {\\n    console.log(\\\"Video loading failed with error: \\\" + event.nativeEvent.error);\\n  },\\n  _restartVideo() {\\n    this.refs[VIDEO_REF].seekToTime(0);\\n  },\\n});\\n      \",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIn particular, the example above shows how to respond to the various video callbacks, and provides an example of how to use the ```seekToTime``` function. When the ```<ViroText>``` component is tapped, ```_restartVideo()``` is invoked, which sets the time back to zero.","excerpt":"Adding video to your scenes","slug":"video","type":"basic","title":"Video"}

Video

Adding video to your scenes

Viro supports various components for displaying video. Video can be displayed in 360 degrees, surrounding the user, or on a flat plane, simulating a physical video screen. [block:api-header] { "type": "basic", "title": "Video Screen" } [/block] The ```<ViroVideo>``` component can be used to display video on a 2D screen. Like all UI elements, you specify the position in world space. You can also set the width and height of the screen, and set the video via the ```source``` attribute, as shown in the example below. [block:code] { "codes": [ { "code": "<ViroVideo\n source={require('./video/myvid.mp4')}\n height={2}\n width={2}\n loop={true}\n position={[0,2,-5]}\n />", "language": "javascript" } ] } [/block] Supported video formats are .mov, .mp4, .mpv, and .3gp. The video source may be a remote URL or a local file resource. To invoke with a remote URL, set the source to a URI. For example, ```{uri:"http://example.org/myvideo.mp4"}```. To invoke with a local file resource, use require: ```require('./myvideo.mp4');```. For a full list of properties, refer to the [ViroVideo](doc:virovideo-2-compare) reference. [block:api-header] { "type": "basic", "title": "360 Video" } [/block] Spherical videos that surround the user can be displayed via the ```<Viro360Video>``` component. These videos are displayed as a [scene background](doc:scenes#scene-backgrounds) , behind all other UI elements. [block:code] { "codes": [ { "code": "<Viro360Video\n source={require(\"./video/myvideo.mp4\")}\n onFinish={this._onFinish}\n loop={false} \n/>", "language": "javascript" } ] } [/block] As with 2D videos, 360 video sources may be remote URLs or local file resources. For a full list of properties, refer to the [Viro360Video](doc:viro360video-1) reference. [block:api-header] { "title": "Alpha Video (Chroma Key Filtering)" } [/block] Viro supports rendering partially transparent video over any VR, AR, or 3D scene. For AR scenes in particular, this enables "hologram" type experiences like [Will.I.Am on CNN](https://www.youtube.com/watch?v=68-bjoF1Vdk) or [Princess Leia in Star Wars](https://www.youtube.com/watch?v=tf-1xeE3zzE). Alpha video works via "chroma key filtering". Chroma key filtering removes (makes transparent) all colors from a video that are within an epsilon range of a target color. This technique is useful when rendering "green screen" or "blue screen" videos, as is commonly seen in newscasting and motion pictures. The videos in their raw form look something like the image below. [block:image] { "images": [ { "image": [ "https://files.readme.io/8689ced-alpha.png", "alpha.png", 1546, 1012, "#04d304" ] } ] } [/block] The code below shows how to enable chroma-key filtering, by setting the ```chromaKeyFilteringColor``` property on the ```<ViroMaterial>``` being used by the ```<ViroVideo>```. [block:code] { "codes": [ { "code": "render: function() {\n return (\n <ViroScene>\n <ViroVideo source={require('./video/myvid.mp4')}\n height={2} width={2}\n loop={true}\n position={[0, 2, -5]}\n materials={[\"chromaKeyFilteredVideo\"]}\n />\n </ViroScene>\n );\n},\n\n...\n \nViroMaterials.createMaterials({\n chromaKeyFilteredVideo : {\n chromaKeyFilteringColor: \"#00FF00\"\n },\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Manipulating Video" } [/block] Both the ```<ViroVideo>``` and ```<Viro360Video>``` components enable you to: * Adjust volume via the ```volume``` property * Mute the video via the ```muted``` property * Pause the video by setting the ```paused``` property * Seek the video to a specific time in seconds by invoking the ```seekToTime(time)``` method You can also respond to various callbacks: * ```onFinish``` is invoked when a video finishes playing (if looping, this is invoked at the end of each loop) * ```onUpdateTime``` is invoked every second with the current time transpired in the video, and * ```onError``` is called when we encounter an error loading or playing the video. The following example illustrates these features. [block:code] { "codes": [ { "code": "var VIDEO_REF = \"videoref\";\n\nvar VideoTest = React.createClass({\n getInitialState() {\n return {\n muteVideo: true,\n volume: 1,\n }\n },\n \n render: function() {\n <ViroScene>\n <Viro360Video\n ref={VIDEO_REF}\n paused={false}\n source={require('./res/test-video.mp4'}\n loop={true} \n muted={this.state.muteVideo} \n volume={this.state.volume}\n onFinish={this._onVideoFinished} \n onUpdateTime={this._onUpdateTime}\n onError={this._onVideoError} /> \n />\n \n <ViroText position={[2, -2, -5])} text=\"Restart\"\n onClick={this._restartVideo} \n transformBehaviors={[\"billboard\"]}/>\n </ViroScene>\n },\n \n _onVideoFinished(){\n console.log(\"Video finished!\");\n },\n _onUpdateTime(current, total){\n console.log(\"Video time update, current: \" + current + \", total: \" + total);\n },\n _onVideoError(event) {\n console.log(\"Video loading failed with error: \" + event.nativeEvent.error);\n },\n _restartVideo() {\n this.refs[VIDEO_REF].seekToTime(0);\n },\n});\n ", "language": "javascript" } ] } [/block] In particular, the example above shows how to respond to the various video callbacks, and provides an example of how to use the ```seekToTime``` function. When the ```<ViroText>``` component is tapped, ```_restartVideo()``` is invoked, which sets the time back to zero.